// landing-sections-a.jsx — header, hero, tension, how-it-works.

function Header() {
  const { t } = useT();
  const links = [
    { t: t.nav.how, h: '#como' },
    { t: t.nav.plus, h: '#plus' },
    { t: t.nav.security, h: '#confianza' },
  ];
  return (
    <header className="pote-header">
      <div className="pote-header-inner">
        <a href="#top" aria-label="Pote" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <PoteWordmark height={24} color="currentColor" font="svg" />
        </a>
        <nav className="pote-nav">
          {links.map(l => <a key={l.h} href={l.h} className="pote-navlink">{l.t}</a>)}
        </nav>
        <LangSwitch />
        <a href="#top-form" className="pote-cta-pill">{t.cta}</a>
      </div>
    </header>
  );
}

function Hero() {
  const { t } = useT();
  return (
    <section id="top" className="hero-immersive">
      <div className="hero-bg" aria-hidden="true">
        <img className="hero-img-d" src="assets/hero-friends.jpg" alt="" />
        <img className="hero-img-m" src="assets/hero-friends-mobile.jpg" alt="" />
        <div className="hero-scrim"></div>
      </div>
      <div className="hero-inner">
        <h1 className="hero-h1">
          <RT text={t.hero.h1} />
        </h1>
        <p className="hero-sub">
          {t.hero.sub}
        </p>
        <div id="top-form" className="hero-form">
          <WaitlistForm tone="dark" idp="hero" />
        </div>
        <div className="hero-proof">
          <div className="hero-avatars">
            {['lime', 'pink', 'cyan', 'lavender'].map((c, i) => (
              <span key={i} className="hero-av" style={{ background: C[c], marginLeft: i ? -9 : 0 }}>{['S', 'L', 'M', 'A'][i]}</span>
            ))}
          </div>
          <small>{t.hero.proof}</small>
        </div>
      </div>
    </section>
  );
}

function Tension() {
  const { t } = useT();
  return (
    <section className="band">
      <div className="container">
        <h2 className="band-title reveal reveal-up" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <RT text={t.tension.title} />
        </h2>
        <div className="tension-grid">
          <div className="tension-card before reveal reveal-up">
            <div className="tension-tag" style={{ color: C.textMuted, background: 'rgba(5,5,5,0.05)' }}>{t.tension.before}</div>
            <ul className="tension-list muted">
              {t.tension.beforeList.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
          <div className="tension-card after reveal reveal-up">
            <div className="tension-tag" style={{ color: C.black, background: C.lime }}>{t.tension.after}</div>
            <ul className="tension-list">
              {t.tension.afterList.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const { t } = useT();
  const kinds = ['crear', 'ritmo', 'registrar'];
  const bgs = [C.lavenderSoft, C.cyanSoft, C.limeSoft];
  return (
    <section id="como" className="container how">
      <div className="how-head reveal reveal-up">
        <Eyebrow>{t.how.eyebrow}</Eyebrow>
        <h2 className="band-title">{t.how.title}</h2>
      </div>
      <div className="how-grid">
        {t.how.steps.map((s, i) => (
          <div key={i} className="how-card reveal reveal-pop">
            <div className="how-visual" style={{ background: bgs[i] }}>
              <StepVisual kind={kinds[i]} />
            </div>
            <div className="how-step-n">{'0' + (i + 1)}</div>
            <div className="how-step-t">{s.t}</div>
            <div className="how-step-d">{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, Tension, HowItWorks });