// landing-sections-b.jsx — features, mid CTA, Pote+, trust, final CTA, footer.

function FeatureRow({ id, eyebrow, title, body, bullets, mockup, bg, flip }) {
  return (
    <div className="feature-block" style={{ background: bg }} id={id}>
      <div className={'feature-inner' + (flip ? ' flip' : '')}>
        <div className={'feature-copy reveal ' + (flip ? 'reveal-right' : 'reveal-left')}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h3 className="feature-title">{title}</h3>
          <p className="feature-body">{body}</p>
          {bullets && (
            <ul className="feature-bullets">
              {bullets.map((b, i) => (
                <li key={i}><span className="fb-dot" /><span>{b}</span></li>
              ))}
            </ul>
          )}
        </div>
        <div className={'feature-mock reveal ' + (flip ? 'reveal-left' : 'reveal-right')}>{mockup}</div>
      </div>
    </div>
  );
}

function Features() {
  const { t } = useT();
  const f = t.features;
  return (
    <section className="features" id="features">
      <div className="bento-grid">
        <BentoTile cls="b-a reveal reveal-up" bg={C.lavenderSoft}
          eyebrow={f.a.eyebrow} title={<RT text={f.a.title} />} body={f.a.body}>
          <VisualPotes />
        </BentoTile>

        <BentoTile cls="b-b reveal reveal-up" dark bg="#100f0d"
          eyebrow={f.b.eyebrow} title={<RT text={f.b.title} />} body={f.b.body}>
          <VisualPoti />
        </BentoTile>

        <BentoTile cls="b-c reveal reveal-up" bg={C.limeSoft}
          eyebrow={f.c.eyebrow} title={<RT text={f.c.title} />} body={f.c.body}>
          <VisualProgress />
        </BentoTile>

        <BentoTile cls="b-d reveal reveal-up" bg={C.cyanSoft}
          eyebrow={f.d.eyebrow} title={<RT text={f.d.title} />} body={f.d.body}>
          <VisualShared />
        </BentoTile>
      </div>
    </section>
  );
}

function MidCTA() {
  return (
    <section className="midcta">
      <div className="midcta-light" aria-hidden="true">
        <span className="ml-beam" />
        <span className="ml-core" />
        <span className="ml-pool ml-pool-a" />
        <span className="ml-pool ml-pool-b" />
        <span className="ml-grain" />
      </div>
      <div className="midcta-inner reveal reveal-up">
        <div className="midcta-poti" aria-hidden="true">
          <PoteOrb color="lime" progress={0.66} size={98} animate withFace shadow={false} seed={21} />
        </div>
        <div className="midcta-eyebrow"><span className="kd" />Lista de espera</div>
        <h2 className="midcta-title">Sé de los primeros<br />en <span className="hl">probar Pote.</span></h2>
        <p className="midcta-sub">Estamos abriendo acceso poco a poco. Déjanos tu email y te avisamos en cuanto haya hueco.</p>
        <div className="midcta-form"><WaitlistForm tone="dark" idp="mid" /></div>
        <div className="midcta-proof">
          <div className="midcta-avatars">
            {['lime', 'pink', 'cyan', 'lavender'].map((c, i) => (
              <span key={i} className="midcta-av" style={{ background: 'var(--av-' + c + ')', marginLeft: i ? -10 : 0 }}>{['S', 'L', 'M', 'A'][i]}</span>
            ))}
          </div>
          <span>+2.400 personas ya esperan a Pote</span>
        </div>
      </div>
    </section>
  );
}

function PotePlus() {
  const { t } = useT();
  return (
    <section id="plus" className="container plus">
      <div className="plus-grid">
        <div className="plus-copy reveal reveal-left">
          <div className="plus-chip"><span style={{ width: 18, height: 18, borderRadius: 9, background: C.lime, color: C.black, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 900 }}>+</span>Pote+</div>
          <h2 className="band-title" style={{ marginTop: 16 }}><RT text={t.plus.title} /></h2>
          <p className="feature-body" style={{ maxWidth: 420 }}>{t.plus.body}</p>
        </div>
        <div className="plus-list">
          {t.plus.feats.map((f, i) => (
            <div key={i} className="plus-item reveal reveal-right">
              <span className="plus-check">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={C.black} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 9-11"/></svg>
              </span>
              <div>
                <div className="plus-item-t">{f.t}</div>
                <div className="plus-item-d">{f.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Trust() {
  const { t } = useT();
  return (
    <section id="confianza" className="trust">
      <div className="container">
        <div className="trust-head reveal reveal-up">
          <div className="trust-orb" aria-hidden="true">
            <PoteOrb color="cyan" progress={0.52} size={104} animate seed={31} />
          </div>
          <Eyebrow style={{ marginTop: 26, whiteSpace: 'nowrap' }}>{t.trust.eyebrow}</Eyebrow>
          <h2 className="trust-title">{t.trust.title}</h2>
          <p className="trust-lead">{t.trust.lead}</p>
        </div>
        <div className="trust-points reveal reveal-up">
          {t.trust.points.map((p, i) => (
            <div key={i} className="trust-point">
              <div className="trust-point-t">{p.t}</div>
              <p className="trust-point-d">{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const { t } = useT();
  return (
    <section className="finalcta">
      <div className="finalcta-orb reveal reveal-pop" aria-hidden="true">
        <PoteOrb color="lime" progress={0.18} size={96} animate withFace shadow seed={41} />
      </div>
      <h2 className="finalcta-title reveal reveal-up"><RT text={t.final.title} /></h2>
      <p className="finalcta-sub reveal reveal-up">{t.final.sub}</p>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 26 }}>
        <WaitlistForm idp="final" />
      </div>
    </section>
  );
}

function Footer() {
  const { t } = useT();
  // hrefs mirror the column/item order in every language
  const hrefs = [
    ['#como', '#plus', '#features'],
    ['#confianza', 'mailto:hola@poteapp.com', '#top-form'],
    ['legal/privacidad.html', 'legal/terminos.html'],
  ];
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <PoteWordmark height={22} color={C.black} font="svg" />
          </div>
          <p style={{ fontSize: 13, fontWeight: 600, color: C.textMuted, maxWidth: 240, marginTop: 14, lineHeight: '19px' }}>{t.footer.tagline}</p>
        </div>
        {t.footer.cols.map((col, ci) => (
          <div key={col.h} className="footer-col">
            <div className="footer-col-h">{col.h}</div>
            {col.items.map((it, ii) => <a key={it} href={(hrefs[ci] && hrefs[ci][ii]) || '#top'} className="footer-link">{it}</a>)}
          </div>
        ))}
      </div>
      <div className="footer-bottom">
        <span>© 2026 Pote</span>
      </div>
    </footer>
  );
}

Object.assign(window, { FeatureRow, Features, MidCTA, PotePlus, Trust, FinalCTA, Footer });