/* within — sections (manifesto through footer) */

const Manifesto = () => {
  const { t } = React.useContext(LangContext);
  return (
    <section id="manifesto" className="manifesto">
      <div className="container">
        <div className="section-head" style={{marginBottom:64}}>
          <span className="eyebrow">{t('manifesto_eyebrow')}</span>
        </div>

        <div className="manifesto-grid">
          <p className="manifesto-text">
            {t('manifesto_t1')}
            {' '}<span className="mark">{t('manifesto_life')}</span>{' '}
            {t('manifesto_t2')} <strong>{t('manifesto_strong')}</strong>{' '}
            {t('manifesto_t3')}
          </p>

          <div className="manifesto-stats">
            <div className="stat">
              <div className="n">8<em>%</em></div>
              <div className="l">{t('manifesto_stat1')}</div>
            </div>
            <div className="stat">
              <div className="n">6<em>×</em></div>
              <div className="l">{t('manifesto_stat2')}</div>
            </div>
            <div className="stat">
              <div className="n">42<em>%</em></div>
              <div className="l">{t('manifesto_stat3')}</div>
            </div>
            <div className="stat">
              <div className="n">3.2<em>k</em></div>
              <div className="l">{t('manifesto_stat4')}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ MODULES ============ */
const Modules = () => {
  const { t } = React.useContext(LangContext);
  return (
    <section id="how" className="modules">
      <div className="container">
        <div className="modules-head">
          <div>
            <div className="eyebrow" style={{marginBottom:18}}>{t('modules_eyebrow')}</div>
            <h2 className="h-display h2">{t('modules_h2a')}<br/>{t('modules_h2b')}</h2>
          </div>
          <p className="lede">{t('modules_lede')}</p>
        </div>

        <div className="modules-grid">
          <div className="module">
            <div className="module-num"><span className="l"></span>01</div>
            <div>
              <h3>{t('mod1_pre')} <span className="accent">{t('mod1_accent')}</span></h3>
              <p>{t('mod1_desc')}</p>
            </div>
            <div className="module-viz">
              <div className="viz-profile">
                <span className="chip on">{t('chip1')}</span>
                <span className="chip">{t('chip2')}</span>
                <span className="chip mint">{t('chip3')}</span>
                <span className="chip">{t('chip4')}</span>
                <span className="chip on">{t('chip5')}</span>
                <span className="chip">{t('chip6')}</span>
                <span className="chip mint">{t('chip7')}</span>
                <span className="chip">{t('chip8')}</span>
              </div>
            </div>
          </div>

          <div className="module">
            <div className="module-num"><span className="l"></span>02</div>
            <div>
              <h3>{t('mod2_pre')} <span className="accent">{t('mod2_accent')}</span></h3>
              <p>{t('mod2_desc')}</p>
            </div>
            <div className="module-viz">
              <div className="viz-engine">
                <div className="bar"></div><div className="bar"></div><div className="bar"></div><div className="bar"></div><div className="bar"></div><div className="bar"></div><div className="bar"></div>
              </div>
            </div>
          </div>

          <div className="module">
            <div className="module-num"><span className="l"></span>03</div>
            <div>
              <h3>{t('mod3_pre')} <span className="accent">{t('mod3_accent')}</span> {t('mod3_post')}</h3>
              <p>{t('mod3_desc')}</p>
            </div>
            <div className="module-viz">
              <div className="viz-community">
                <div className="line" style={{top:'40%', left:'12%', width:'25%', transform:'rotate(8deg)'}}></div>
                <div className="line" style={{top:'62%', left:'28%', width:'30%', transform:'rotate(-14deg)'}}></div>
                <div className="line" style={{top:'34%', left:'48%', width:'28%', transform:'rotate(20deg)'}}></div>
                <div className="line" style={{top:'70%', left:'58%', width:'24%', transform:'rotate(-6deg)'}}></div>
                <div className="av mint" style={{top:'20%', left:'6%'}}>M</div>
                <div className="av" style={{top:'52%', left:'22%'}}>S</div>
                <div className="av ink" style={{top:'14%', left:'42%'}}>J</div>
                <div className="av" style={{top:'58%', left:'46%'}}>P</div>
                <div className="av mint" style={{top:'28%', left:'64%'}}>L</div>
                <div className="av" style={{top:'62%', left:'78%'}}>R</div>
                <div className="av ink" style={{top:'18%', left:'82%'}}>A</div>
              </div>
            </div>
          </div>

          <div className="module">
            <div className="module-num"><span className="l"></span>04</div>
            <div>
              <h3>{t('mod4_pre')} <span className="accent">{t('mod4_accent')}</span></h3>
              <p>{t('mod4_desc')}</p>
            </div>
            <div className="module-viz">
              <div className="viz-feedback">
                <svg viewBox="0 0 320 110" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="ar" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="#06c6a8" stopOpacity="0.25"/>
                      <stop offset="1" stopColor="#06c6a8" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <path d="M0,80 C30,75 50,68 80,55 C110,42 130,46 160,38 C190,30 210,42 240,28 C270,14 290,18 320,8 L320,110 L0,110 Z" fill="url(#ar)"/>
                  <path d="M0,80 C30,75 50,68 80,55 C110,42 130,46 160,38 C190,30 210,42 240,28 C270,14 290,18 320,8" fill="none" stroke="#06c6a8" strokeWidth="2.2" strokeLinecap="round"/>
                  <circle cx="320" cy="8" r="5" fill="#06c6a8"/>
                  <circle cx="320" cy="8" r="9" fill="none" stroke="#06c6a8" strokeOpacity="0.4"/>
                </svg>
                <div className="heart">+38<small style={{fontSize:13, color:'var(--w-ink-3)', fontWeight:400}}> {t('mod4_feedback_sub')}</small></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ EXPERIENCE / SCREENS ============ */
const Experience = () => {
  const { t } = React.useContext(LangContext);
  const screens = [
    { sn:'01', t_:t('scr1_title'), d:t('scr1_desc'), viz:<MiniHome/> },
    { sn:'02', t_:t('scr2_title'), d:t('scr2_desc'), viz:<MiniPassport/> },
    { sn:'03', t_:t('scr3_title'), d:t('scr3_desc'), viz:<MiniChat/> },
    { sn:'04', t_:t('scr4_title'), d:t('scr4_desc'), viz:<MiniCommunity/> },
    { sn:'05', t_:t('scr5_title'), d:t('scr5_desc'), viz:<MiniProgress/> },
    { sn:'06', t_:t('scr6_title'), d:t('scr6_desc'), viz:<MiniMarket/> },
  ];
  return (
    <section id="experience" className="experience">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t('exp_eyebrow')}</span>
          <h2 className="h-display h2">{t('exp_h2a')}<br/>{t('exp_h2b')}</h2>
          <p className="lede" style={{color:'rgba(255,255,255,0.65)'}}>{t('exp_lede')}</p>
        </div>

        <div className="screens-stage">
          {screens.map((s,i) => (
            <div className="screen-card" key={i}>
              <div className="sn">{s.sn}</div>
              <div>
                <h4>{s.t_}</h4>
                <p>{s.d}</p>
              </div>
              <div className="mini">{s.viz}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* tiny screen visualizations */
const MiniHome = () => {
  const { t } = React.useContext(LangContext);
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, fontSize:10, color:'rgba(255,255,255,0.8)'}}>
      {[
        ['07:00', t('mini_walk'), true],
        ['13:30', t('mini_lunch'), false],
        ['19:00', t('mini_sunset'), false],
      ].map((r,i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap:6, padding:'5px 8px', background:'rgba(255,255,255,0.04)', borderRadius:6}}>
          <div style={{width:8, height:8, borderRadius:'50%', background:r[2]?'#06c6a8':'transparent', border:`1.5px solid ${r[2]?'#06c6a8':'rgba(255,255,255,0.3)'}`}}></div>
          <div style={{color:'rgba(255,255,255,0.5)', fontSize:9, letterSpacing:'0.04em', minWidth:30}}>{r[0]}</div>
          <div>{r[1]}</div>
        </div>
      ))}
    </div>
  );
};

const MiniPassport = () => {
  const { t } = React.useContext(LangContext);
  return (
    <div style={{display:'flex', alignItems:'center', gap:14}}>
      <svg width="60" height="60" viewBox="0 0 60 60" style={{transform:'rotate(-90deg)'}}>
        <circle cx="30" cy="30" r="24" stroke="rgba(255,255,255,0.1)" strokeWidth="4" fill="none"/>
        <circle cx="30" cy="30" r="24" stroke="#06c6a8" strokeWidth="4" fill="none" strokeLinecap="round" strokeDasharray="150" strokeDashoffset="40"/>
      </svg>
      <div>
        <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:500, color:'white', letterSpacing:'-0.02em', lineHeight:1}}>72</div>
        <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', marginTop:4, letterSpacing:'0.04em'}}>{t('mini_passport_score')}</div>
        <div style={{fontSize:10, color:'#06c6a8', marginTop:2, fontWeight:700}}>{t('mini_passport_delta')}</div>
      </div>
    </div>
  );
};

const MiniChat = () => {
  const { t } = React.useContext(LangContext);
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, fontSize:10}}>
      <div style={{background:'rgba(255,255,255,0.08)', padding:'7px 10px', borderRadius:10, color:'white', maxWidth:'80%', alignSelf:'flex-start'}}>{t('mini_chat_you')}</div>
      <div style={{background:'#06c6a8', padding:'7px 10px', borderRadius:10, color:'#1c242e', maxWidth:'80%', alignSelf:'flex-end', fontWeight:600}}>{t('mini_chat_ai')}</div>
    </div>
  );
};

const MiniCommunity = () => {
  const { t } = React.useContext(LangContext);
  const items = [
    [t('mini_c1'), t('mini_going1')],
    [t('mini_c2'), t('mini_going2')],
    [t('mini_c3'), t('mini_going3')],
    [t('mini_c4'), t('mini_going4')],
  ];
  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, fontSize:9}}>
      {items.map(([title, count], i) => (
        <div key={i} style={{padding:8, background:'rgba(255,255,255,0.04)', borderRadius:8, borderLeft:i===0?'2px solid #06c6a8':'2px solid transparent', color:'rgba(255,255,255,0.85)'}}>
          <div style={{fontWeight:700, color:'white'}}>{title}</div>
          <div style={{color:'rgba(255,255,255,0.45)', marginTop:2}}>{count}</div>
        </div>
      ))}
    </div>
  );
};

const MiniProgress = () => (
  <svg viewBox="0 0 240 90" style={{width:'100%', height:'100%'}}>
    <defs>
      <linearGradient id="mpg" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#06c6a8" stopOpacity="0.3"/>
        <stop offset="1" stopColor="#06c6a8" stopOpacity="0"/>
      </linearGradient>
    </defs>
    <path d="M0,70 C20,65 40,60 60,55 C80,50 100,52 120,40 C140,28 160,32 180,22 C200,12 220,18 240,8 L240,90 L0,90 Z" fill="url(#mpg)"/>
    <path d="M0,70 C20,65 40,60 60,55 C80,50 100,52 120,40 C140,28 160,32 180,22 C200,12 220,18 240,8" fill="none" stroke="#06c6a8" strokeWidth="1.6"/>
    {[20,60,100,140,180,220].map((x,i) => <circle key={i} cx={x} cy={[64,55,48,32,24,14][i]} r="1.8" fill="white"/>)}
  </svg>
);

const MiniMarket = () => {
  const { t } = React.useContext(LangContext);
  const items = [
    [t('mini_m1'), '€18'],
    [t('mini_m2'), '€60'],
    [t('mini_m3'), t('mini_free')],
    [t('mini_m4'), '€85'],
  ];
  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, fontSize:9}}>
      {items.map((r,i) => (
        <div key={i} style={{padding:8, background:'rgba(255,255,255,0.04)', borderRadius:8, color:'rgba(255,255,255,0.85)', display:'flex', justifyContent:'space-between', gap:6}}>
          <span style={{color:'white'}}>{r[0]}</span>
          <span style={{color:'#06c6a8', fontWeight:700}}>{r[1]}</span>
        </div>
      ))}
    </div>
  );
};

/* ============ AI COMPANION FULL SECTION ============ */
const Companion = () => {
  const { t } = React.useContext(LangContext);
  return (
    <section id="companion" className="companion">
      <div className="container">
        <div className="companion-grid">
          <div>
            <span className="eyebrow">{t('comp_eyebrow')}</span>
            <h2 className="h-display h2" style={{marginTop:18}}>{t('comp_h2a')}<br/>{t('comp_h2b')}</h2>
            <p className="lede" style={{marginTop:24}}>{t('comp_lede')}</p>
            <div style={{marginTop:32, display:'grid', gap:16}}>
              {[
                [t('comp_b1_title'), t('comp_b1_desc')],
                [t('comp_b2_title'), t('comp_b2_desc')],
                [t('comp_b3_title'), t('comp_b3_desc')],
              ].map(([title, desc], i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:14, alignItems:'flex-start'}}>
                  <div style={{width:8, height:8, marginTop:9, background:'var(--w-mint)', borderRadius:'50%'}}></div>
                  <div>
                    <div style={{fontFamily:'var(--font-display)', fontWeight:600, fontSize:16, color:'var(--w-ink)', letterSpacing:'-0.01em'}}>{title}</div>
                    <div style={{fontSize:14.5, color:'var(--w-ink-2)', marginTop:2, lineHeight:1.5}}>{desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="chat-card">
            <div className="chat-header">
              <div className="chat-avatar"></div>
              <div>
                <div className="chat-name">within</div>
                <div className="chat-status">{t('comp_chat_status')}</div>
              </div>
            </div>

            <div className="msgs">
              <div className="msg you delay-1">{t('comp_msg1')}</div>
              <div className="msg ai delay-2">{t('comp_msg2')}</div>
              <div className="msg ai delay-3">{t('comp_msg3a')} <span className="ai-strong">{t('comp_msg3b')}</span> {t('comp_msg3c')}</div>
              <div className="msg you delay-4">{t('comp_msg4')}</div>
            </div>

            <div className="chat-input">
              <input placeholder={t('comp_placeholder')}/>
              <button><Icon name="send" size={16} stroke={2}/></button>
            </div>

            <div className="suggest">
              <span className="sg">{t('comp_sg1')}</span>
              <span className="sg">{t('comp_sg2')}</span>
              <span className="sg">{t('comp_sg3')}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ COMMUNITY ============ */
const Community = () => {
  const { t } = React.useContext(LangContext);
  const cards = [
    { span:5, label:t('cc1_label'), title:t('cc1_title'), meta:[t('cc1_m1'),t('cc1_m2'),t('cc1_m3')], ph:'ph-1', glyph:'activity' },
    { span:4, label:t('cc2_label'), title:t('cc2_title'), meta:[t('cc2_m1'),t('cc2_m2')],              ph:'ph-3', glyph:'moon' },
    { span:3, label:t('cc3_label'), title:t('cc3_title'), meta:[t('cc3_m1'),'La Latina'],              ph:'ph-2', glyph:'bowl' },
    { span:3, label:t('cc4_label'), title:t('cc4_title'), meta:[t('cc4_m1'),'Manzanares'],             ph:'ph-6', glyph:'wave' },
    { span:5, label:t('cc5_label'), title:t('cc5_title'), meta:[t('cc5_m1'),t('cc5_m2'),t('cc5_m3')], ph:'ph-5', glyph:'map' },
    { span:4, label:t('cc6_label'), title:t('cc6_title'), meta:[t('cc6_m1'),t('cc6_m2')],              ph:'ph-4', glyph:'target' },
  ];
  return (
    <section id="community" className="community">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t('comm_eyebrow')}</span>
          <h2 className="h-display h2">{t('comm_h2a')}<br/>{t('comm_h2b')}</h2>
          <p className="lede" style={{marginTop:24}}>{t('comm_lede')}</p>
        </div>

        <div className="community-grid">
          {cards.map((c, i) => (
            <div key={i} className={`com-card span-${c.span}`}>
              <div className={`visual ${c.ph}`}>
                <div className="ph-label">{c.label}</div>
                <div className="ph-glyph">
                  <Icon name={c.glyph} size={120} stroke={1.2}/>
                </div>
                <div className="members">
                  <span className="av a1"></span>
                  <span className="av a2"></span>
                  <span className="av a3"></span>
                  <span className="more">+{[8,32,4,2,11,16][i]}</span>
                </div>
              </div>
              <div className="body">
                <div className="ttl">{c.title}</div>
                <div className="meta">
                  {c.meta.map((m,j) => (
                    <React.Fragment key={j}>
                      <span>{m}</span>
                      {j < c.meta.length - 1 && <span className="sep"></span>}
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============ PASSPORT ============ */
const Passport = () => {
  const { t } = React.useContext(LangContext);
  const tracks = [
    [t('pass_track1'), 78, '+9%'],
    [t('pass_track2'), 64, '+4%'],
    [t('pass_track3'), 71, '+12%'],
    [t('pass_track4'), 58, t('pass_delta_steady')],
    [t('pass_track5'), 82, '+22%'],
  ];
  return (
    <section id="science" className="passport">
      <div className="container passport-grid">
        <div>
          <span className="eyebrow">{t('pass_eyebrow')}</span>
          <h2 className="h-display h2" style={{marginTop:18}}>{t('pass_h2a')}<br/>{t('pass_h2b')}</h2>
          <p className="lede" style={{marginTop:24}}>{t('pass_lede')}</p>
          <div style={{marginTop:36, display:'flex', gap:14, flexWrap:'wrap'}}>
            <a href="#cta" className="btn btn-primary">{t('pass_btn_see')}<Icon name="arrow" size={16}/></a>
            <a href="#" className="btn btn-ghost">{t('pass_btn_privacy')}</a>
          </div>
        </div>

        <div className="passport-card">
          <div className="passport-head">
            <div>
              <div className="label">{t('pass_card_label')}</div>
              <div className="name">Aitana M.</div>
              <div className="id">{t('pass_card_id')}</div>
            </div>
            <img src="assets/logo_icon_white_transparent_teal_dot_same_size.png" alt="" style={{width:40, height:40, objectFit:'contain'}}/>
          </div>

          <div className="passport-score">
            <div className="score-ring-wrap">
              <div className="score-ring">
                <svg viewBox="0 0 120 120">
                  <circle className="bg" cx="60" cy="60" r="52"/>
                  <circle className="fg" cx="60" cy="60" r="52" strokeDasharray="326" strokeDashoffset="91"/>
                </svg>
                <div className="num">72</div>
              </div>
              <div className="score-sub">{t('pass_score_label')}</div>
            </div>
            <div className="score-text">
              <div className="h">{t('pass_score_h')}</div>
              <div className="s">{t('pass_score_s')}</div>
              <div className="delta">{t('pass_score_delta')}</div>
            </div>
          </div>

          <div className="passport-tracks">
            {tracks.map(([n,v,d],i) => (
              <div className="passport-track" key={i}>
                <div className="lb">{n}</div>
                <div className="bar"><i style={{width:`${v}%`, animationDelay:`${i*0.1}s`}}></i></div>
                <div className="vl">{v} <span style={{color:'var(--w-mint)', fontSize:11, marginLeft:4}}>{d}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ CTA + FOOTER ============ */
const CTA = () => {
  const { t } = React.useContext(LangContext);
  return (
    <section id="cta" className="cta">
      <div className="container">
        <div className="cta-card">
          <span className="eyebrow">{t('cta_eyebrow')}</span>
          <h2 className="h-display h2">{t('cta_h2a')}<br/>{t('cta_h2b')}</h2>
          <p>{t('cta_desc')}</p>
          <div className="cta-actions">
            <a href="#" className="btn btn-mint">{t('cta_btn_invite')}<Icon name="arrow" size={16}/></a>
            <a href="#" className="btn btn-on-dark">{t('cta_btn_team')}</a>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const { t } = React.useContext(LangContext);
  const isLegal = /\/(privacy|terms|data-ethics)\.html/.test(window.location.pathname);
  const p = isLegal ? 'index.html' : '';
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href={p || '/'}><img src="assets/within_logo_transparent_original_colors_400x110.png" alt="within"/></a>
            <p>{t('footer_tagline')}</p>
          </div>
          <div>
            <h5>{t('footer_product')}</h5>
            <ul>
              <li><a href={`${p}#experience`}>{t('footer_dashboard')}</a></li>
              <li><a href={`${p}#science`}>{t('footer_passport')}</a></li>
              <li><a href={`${p}#companion`}>{t('footer_companion')}</a></li>
              <li><a href={`${p}#community`}>{t('footer_community')}</a></li>
              <li><a href="#">{t('footer_marketplace')}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t('footer_company')}</h5>
            <ul>
              <li><a href={`${p}#manifesto`}>{t('footer_manifesto')}</a></li>
              <li><a href="#">{t('footer_science')}</a></li>
              <li><a href="#">{t('footer_press')}</a></li>
              <li><a href="#">{t('footer_careers')}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t('footer_stay')}</h5>
            <ul>
              <li><a href="#">{t('footer_newsletter')}</a></li>
              <li><a href="#">{t('footer_instagram')}</a></li>
              <li><a href="#">{t('footer_substack')}</a></li>
              <li><a href="#">{t('footer_investors')}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t('footer_copyright')}</div>
          <div className="links">
            <a href="privacy.html">{t('footer_privacy')}</a>
            <a href="terms.html">{t('footer_terms')}</a>
            <a href="data-ethics.html">{t('footer_data')}</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Manifesto = Manifesto;
window.Modules = Modules;
window.Experience = Experience;
window.Companion = Companion;
window.Community = Community;
window.Passport = Passport;
window.CTA = CTA;
window.Footer = Footer;