// Keynara landing sections below hero
const { useState: uS, useEffect: uE, useRef: uR } = React;

// ============ TRUST BAR ============
function TrustBar({ t }) {
  return (
    <section style={{ padding: '40px 0 24px', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', gap: 48, flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--slate)' }}>
            {t.trust.label}
          </div>
          <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', alignItems: 'center' }}>
            {t.trust.items.map((n, i) => (
              <span key={i} style={{
                fontFamily: 'DM Sans', fontWeight: 400, fontSize: 18,
                color: 'var(--slate)', opacity: 0.7, letterSpacing: '-0.01em',
              }}>{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ HOW IT WORKS ============
function HowItWorks({ t }) {
  return (
    <section id="how" className="section surface-fog">
      <div className="container">
        <SectionHeader eyebrow={t.how.eyebrow} title={t.how.title} sub={t.how.sub} align="left" />
        <div className="steps-grid" style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {t.how.steps.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <StepCard s={s} />
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function StepCard({ s }) {
  return (
    <div style={{
      background: 'white', borderRadius: 20, padding: 36,
      border: '1px solid var(--line)', position: 'relative', overflow: 'hidden', height: '100%',
    }}>
      <div style={{
        fontFamily: 'DM Sans', fontSize: 56, fontWeight: 300,
        color: 'var(--mint)', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 24,
      }}>{s.n}</div>
      <h3 className="h3" style={{ marginBottom: 12 }}>{s.t}</h3>
      <p className="body" style={{ fontSize: 15 }}>{s.d}</p>
      <div style={{
        position: 'absolute', top: 28, right: 28,
        width: 40, height: 40, borderRadius: '50%',
        border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--slate)',
      }}>
        <Icon.arrow />
      </div>
    </div>
  );
}

function SectionHeader({ eyebrow, title, sub, align = 'left', on = 'light' }) {
  return (
    <div style={{ maxWidth: 760, textAlign: align }}>
      <div className="eyebrow" style={{ color: on === 'dark' ? 'rgba(255,255,255,0.7)' : undefined }}>{eyebrow}</div>
      <h2 className="h1" style={{
        marginTop: 16, marginBottom: 20,
        color: on === 'dark' ? 'white' : 'var(--navy)',
      }}>{title}</h2>
      {sub && <p className="body-lg" style={{ color: on === 'dark' ? 'rgba(255,255,255,0.72)' : undefined }}>{sub}</p>}
    </div>
  );
}

// ============ INSIGHT / PULLQUOTE ============
function Insight({ t }) {
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 960 }}>
            <div className="eyebrow">{t.insight.eyebrow}</div>
            <blockquote className="display" style={{
              margin: '32px 0 24px 0',
              fontFamily: 'DM Sans', fontWeight: 300, fontSize: 'clamp(36px, 4.8vw, 64px)',
              lineHeight: 1.12, letterSpacing: '-0.02em', color: 'var(--navy)',
            }}>
              {t.insight.title}
            </blockquote>
            <p className="body-lg" style={{ maxWidth: 620 }}>{t.insight.sub}</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============ COMPARISON TABLE ============
function Comparison({ t }) {
  return (
    <section id="compare" className="section surface-navy" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* decorative mint line */}
      <div style={{ position: 'absolute', top: 0, left: 0, width: 120, height: 4, background: 'var(--mint)' }}/>
      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader eyebrow={t.compare.eyebrow} title={t.compare.title} sub={t.compare.sub} on="dark" />
        <Reveal delay={150}>
          <div style={{
            marginTop: 64, background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, overflow: 'hidden',
          }}>
            <div className="compare-head" style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
              padding: '20px 32px', borderBottom: '1px solid rgba(255,255,255,0.1)',
              fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)',
            }}>
              <div></div>
              <div>{t.compare.col_portal}</div>
              <div style={{ color: 'var(--mint)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--mint)' }}/>
                {t.compare.col_keynara}
              </div>
            </div>
            {t.compare.rows.map((r, i) => (
              <div key={i} className="compare-row" style={{
                display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
                padding: '24px 32px',
                borderBottom: i < t.compare.rows.length - 1 ? '1px solid rgba(255,255,255,0.06)' : 'none',
                alignItems: 'center',
              }}>
                <div style={{ fontFamily: 'DM Sans', fontSize: 17, color: 'white' }}>{r.k}</div>
                <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.5)', textDecoration: 'line-through' }}>{r.p}</div>
                <div style={{
                  fontFamily: 'DM Sans', fontSize: 17, fontWeight: 500, color: 'var(--mint)',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  <Icon.check style={{ color: 'var(--mint)' }}/>
                  {r.n}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .compare-head, .compare-row { grid-template-columns: 1.2fr 1fr 1fr !important; padding: 16px 20px !important; gap: 12px; }
        }
      `}</style>
    </section>
  );
}

// ============ PERSONAS ============
function Personas({ t }) {
  const [active, setActive] = uS(0);
  const items = t.personas.items;
  return (
    <section className="section">
      <div className="container">
        <SectionHeader eyebrow={t.personas.eyebrow} title={t.personas.title} sub={t.personas.sub} />
        <div className="persona-grid" style={{
          marginTop: 56, display: 'grid', gridTemplateColumns: '320px 1fr', gap: 40,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {items.map((p, i) => (
              <button key={i} onClick={() => setActive(i)}
                style={{
                  textAlign: 'left', padding: '20px 24px', borderRadius: 14,
                  background: i === active ? 'var(--navy)' : 'transparent',
                  color: i === active ? 'white' : 'var(--navy)',
                  border: '1px solid ' + (i === active ? 'var(--navy)' : 'var(--line)'),
                  transition: 'all 200ms', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                }}>
                <div>
                  <div style={{ fontFamily: 'DM Sans', fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em' }}>{p.t}</div>
                  <div style={{ fontSize: 12, color: i === active ? 'rgba(255,255,255,0.6)' : 'var(--slate)', marginTop: 2 }}>{p.a}</div>
                </div>
                <Icon.arrow style={{ opacity: i === active ? 1 : 0.3, color: i === active ? 'var(--mint)' : 'currentColor' }}/>
              </button>
            ))}
          </div>
          <div style={{
            background: 'var(--fog-2)', borderRadius: 20, padding: 48,
            border: '1px solid var(--line)', minHeight: 400,
            position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <PersonaScene idx={active} />
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{items[active].a}</div>
              <h3 className="h2" style={{ marginBottom: 20 }}>{items[active].t}</h3>
              <p className="body-lg" style={{ maxWidth: 520 }}>{items[active].d}</p>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .persona-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function PersonaScene({ idx }) {
  // Abstract brand-colored visual per persona — concentric rings with a moving dot
  const configs = [
    { rings: [120, 170, 220], dotPos: [0.35, 0.3] },
    { rings: [140, 200, 260], dotPos: [0.7, 0.25] },
    { rings: [100, 160, 230, 300], dotPos: [0.25, 0.5] },
    { rings: [80, 130, 180, 240], dotPos: [0.6, 0.45] },
  ];
  const cfg = configs[idx];
  return (
    <svg viewBox="0 0 520 200" style={{ position: 'absolute', top: 0, right: 0, width: '70%', maxWidth: 500, opacity: 0.9, pointerEvents: 'none' }}>
      <g transform="translate(380, 40)">
        {cfg.rings.map((r, i) => (
          <circle key={i} cx="0" cy="0" r={r} fill="none" stroke="#1A2B3C" strokeOpacity={0.08 + i * 0.02} strokeWidth="1" strokeDasharray={i % 2 ? "2 4" : ""}/>
        ))}
        <circle cx="0" cy="0" r="6" fill="#00C9A7"/>
        <circle cx={cfg.rings[0] * Math.cos(idx)} cy={cfg.rings[0] * Math.sin(idx)} r="4" fill="#1A2B3C"/>
      </g>
    </svg>
  );
}

// ============ MARKET STATS ============
function MarketStats({ t }) {
  return (
    <section className="section" style={{ background: 'var(--fog-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHeader eyebrow={t.market.eyebrow} title={t.market.title} />
        <div className="market-grid" style={{
          marginTop: 56,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
        }}>
          {t.market.stats.map((s, i) => (
            <Reveal key={i} delay={i * 120}>
              <div style={{
                background: 'white', borderRadius: 20, padding: 40,
                border: '1px solid var(--line)', position: 'relative', overflow: 'hidden', height: '100%',
              }}>
                <div style={{ fontFamily: 'DM Sans', fontSize: 'clamp(48px, 6vw, 72px)', fontWeight: 300, color: 'var(--navy)', lineHeight: 1, letterSpacing: '-0.03em' }}>
                  {s.v}
                </div>
                <div style={{ marginTop: 24, maxWidth: 300, color: 'var(--slate)', fontSize: 15, lineHeight: 1.5 }}>{s.l}</div>
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 3, background: 'var(--mint)', transformOrigin: 'left', transform: `scaleX(${[1, 0.68, 0.9][i]})` }}/>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 860px) { .market-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ============ FAQ ============
function FAQ({ t }) {
  const [open, setOpen] = uS(0);
  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div style={{ position: 'sticky', top: 120, alignSelf: 'flex-start' }}>
            <div className="eyebrow">{t.faq.eyebrow}</div>
            <h2 className="h1" style={{ marginTop: 16 }}>{t.faq.title}</h2>
            <div style={{ marginTop: 32, padding: 24, borderRadius: 16, background: 'var(--fog-2)', border: '1px solid var(--line)' }}>
              <div style={{ fontSize: 13, color: 'var(--slate)', marginBottom: 6 }}>hello@keynara.com</div>
              <div style={{ fontSize: 14, color: 'var(--navy)', fontWeight: 500 }}>keynara.com · DACH & Italia</div>
            </div>
          </div>
          <div>
            {t.faq.items.map((q, i) => (
              <FAQItem key={i} q={q} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
    </section>
  );
}

function FAQItem({ q, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={onToggle}
        style={{
          width: '100%', padding: '24px 0', display: 'flex',
          alignItems: 'center', justifyContent: 'space-between', gap: 16, textAlign: 'left',
        }}>
        <span style={{ fontFamily: 'DM Sans', fontSize: 19, fontWeight: 500, color: 'var(--navy)', letterSpacing: '-0.01em' }}>{q.q}</span>
        <span style={{
          width: 36, height: 36, borderRadius: '50%',
          background: open ? 'var(--navy)' : 'var(--fog)',
          color: open ? 'white' : 'var(--navy)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0, transition: 'all 200ms',
        }}>
          {open ? <Icon.minus/> : <Icon.plus/>}
        </span>
      </button>
      <div style={{
        maxHeight: open ? 300 : 0, overflow: 'hidden',
        transition: 'max-height 300ms ease, padding 300ms ease, opacity 300ms ease',
        paddingBottom: open ? 24 : 0, opacity: open ? 1 : 0,
      }}>
        <p className="body" style={{ maxWidth: 640, fontSize: 16 }}>{q.a}</p>
      </div>
    </div>
  );
}

// ============ FINAL CTA ============
function FinalCTA({ t, onStart }) {
  return (
    <section className="section" style={{ background: 'var(--mint)', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: '-20%', right: '-10%', width: 600, height: 600,
        borderRadius: '50%', border: '1px solid rgba(26,43,60,0.1)',
      }}/>
      <div style={{
        position: 'absolute', top: '-10%', right: '0%', width: 400, height: 400,
        borderRadius: '50%', border: '1px solid rgba(26,43,60,0.1)',
      }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow" style={{ color: 'var(--navy)' }}>{t.cta.eyebrow}</div>
          <h2 className="h1" style={{ marginTop: 16, color: 'var(--navy)' }}>{t.cta.title}</h2>
          <p className="body-lg" style={{ marginTop: 20, color: 'rgba(26,43,60,0.72)' }}>{t.cta.sub}</p>
          <div style={{ marginTop: 32 }}>
            <button onClick={onStart} style={{
              background: 'var(--navy)', color: 'white',
              padding: '16px 28px', borderRadius: 999,
              fontWeight: 500, fontSize: 14, letterSpacing: '0.08em', textTransform: 'uppercase',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>{t.cta.cta} <Icon.arrow /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TrustBar, HowItWorks, Insight, Comparison, Personas, MarketStats, FAQ, FinalCTA, SectionHeader });