/* ---------------- TIMELINE ---------------- */
function TimelineSection() {
  const { eyebrow, headline, items } = CONTENT.timeline;
  const icons = [Icon.Spark, Icon.Chart, Icon.Shield];
  return (
    <section className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={eyebrow} headline={headline} />
        <div className="grid md:grid-cols-3 gap-5 relative">
          <div className="hidden md:block absolute top-10 left-[8%] right-[8%] h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(94,234,212,0.3), rgba(167,139,250,0.25), rgba(94,234,212,0.3), transparent)' }}></div>
          {items.map((t, i) => {
            const Ico = icons[i] || Icon.Circle;
            return (
              <div key={i} className="glass glass-hover p-7 reveal relative">
                <div className="flex items-center gap-3">
                  <div className="h-9 w-9 rounded-full flex items-center justify-center" style={{ background: 'rgba(94,234,212,0.10)', color: '#5EEAD4', border: '1px solid rgba(94,234,212,0.3)' }}>
                    <Ico size={16} />
                  </div>
                  <div className="font-mono text-[10.5px] tracking-wider uppercase" style={{ color: '#5EEAD4' }}>{t.when}</div>
                </div>
                <p className="mt-5 text-[15.5px] leading-relaxed text-ink/90">{t.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- OFFER ---------------- */
function OfferSection() {
  const o = CONTENT.offer;
  return (
    <section id="pricing" className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={o.eyebrow} headline={o.headline} align="center" />

        <div className="reveal max-w-3xl mx-auto">
          <div className="glass glow-cyan p-8 md:p-12 text-center">
            <div className="font-mono text-[11px] uppercase tracking-wider text-faint">Done-for-you — everything included</div>
            <div className="mt-8 flex flex-col items-center gap-8">
              <div>
                <div className="flex items-baseline justify-center gap-3">
                  {o.priceSetupOriginal && (
                    <span className="h-display text-[22px] md:text-[26px] leading-none line-through decoration-[1.5px]" style={{ color: '#E6EDF7', textDecorationColor: 'rgba(230,237,247,0.55)' }}>
                      {o.priceSetupOriginal}
                    </span>
                  )}
                  <span className="h-display text-[56px] md:text-[68px] leading-none" style={{ color: '#5EEAD4' }}>{o.priceSetup}</span>
                </div>
                <div className="mt-3 text-muted text-[14px] text-center">{o.priceSetupLabel}</div>
              </div>
              <div className="text-center">
                <div className="h-display text-[56px] md:text-[68px] leading-none text-ink">{o.priceMonthly}</div>
                <div className="mt-3 text-muted text-[14px]">{o.priceMonthlyLabel}</div>
              </div>
            </div>
            <div className="mt-8 flex items-center justify-center gap-5 flex-wrap font-mono text-[12.5px] text-muted">
              <span>{o.year1}</span>
              <span className="text-faint">·</span>
              <span>{o.year2}</span>
            </div>
            <div className="mt-8 flex items-center justify-center gap-3 flex-wrap">
              <a href="#final-cta" className="btn-primary inline-flex items-center gap-2 rounded-full px-5 py-3 text-[14px]">
                Book a demo <Icon.Arrow size={15} />
              </a>
              <a href="#faq" className="btn-ghost inline-flex items-center gap-2 rounded-full px-5 py-3 text-[14px]">
                See what's included
              </a>
            </div>
          </div>
        </div>

        {/* Value stack */}
        <div className="reveal mt-10 max-w-3xl mx-auto glass p-6 md:p-8">
          <div className="font-mono text-[10.5px] uppercase tracking-wider text-faint mb-5">Value stack</div>
          <ul className="divide-y divide-white/5">
            {o.valueStack.map((v, i) => (
              <li key={i} className="py-3.5 flex items-center justify-between gap-6">
                <span className="text-[14.5px] text-ink/90">{v.name}</span>
                <span className="font-mono text-[13px] text-muted whitespace-nowrap">{v.value}</span>
              </li>
            ))}
          </ul>
          <div className="mt-6 pt-5 border-t border-white/10 flex items-baseline justify-between gap-4 flex-wrap">
            <span className="font-mono text-[11px] uppercase tracking-wider text-faint">Total value</span>
            <span className="h-display text-[22px]" style={{ color: '#5EEAD4' }}>{o.valueTotal}</span>
          </div>
        </div>

        {/* Bonus stack */}
        <div className="mt-10 max-w-5xl mx-auto grid sm:grid-cols-2 lg:grid-cols-4 gap-3 reveal">
          {o.bonuses.map((b, i) => (
            <div key={i} className="glass glass-hover p-5">
              <div className="font-mono text-[10.5px] uppercase tracking-wider text-faint">Bonus 0{i+1}</div>
              <div className="mt-2 h-display text-[18px] leading-snug">{b.name}</div>
              <div className="mt-3 text-[13px] leading-relaxed text-muted">{b.value}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- GUARANTEES ---------------- */
function GuaranteesSection() {
  const g = CONTENT.guarantees;
  const icons = [Icon.Spark, Icon.Check, Icon.Lock];
  return (
    <section className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={g.eyebrow} headline="Three guarantees. No asterisks." />
        <div className="grid md:grid-cols-3 gap-5">
          {g.items.map((it, i) => {
            const Ico = icons[i] || Icon.Check;
            return (
              <div key={i} className="glass glass-hover p-7 reveal">
                <div className="h-10 w-10 rounded-lg flex items-center justify-center" style={{ background: 'rgba(94,234,212,0.08)', color: '#5EEAD4', border: '1px solid rgba(94,234,212,0.22)' }}>
                  <Ico size={17} />
                </div>
                <h3 className="mt-5 h-display text-[22px]">{it.title}</h3>
                <p className="mt-2 text-[14.5px] leading-relaxed text-muted">{it.body}</p>
              </div>
            );
          })}
        </div>
        <p className="mt-8 text-[12.5px] text-faint max-w-3xl reveal">{g.disclaimer}</p>
      </div>
    </section>
  );
}

/* ---------------- SCARCITY ---------------- */
function ScarcitySection() {
  return (
    <section className="relative py-16">
      <div className="max-w-3xl mx-auto px-6 text-center reveal">
        <div className="inline-flex items-center gap-3 glass px-5 py-3 rounded-full">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping" style={{ background: '#F59E0B' }}></span>
            <span className="relative inline-flex rounded-full h-2 w-2" style={{ background: '#F59E0B' }}></span>
          </span>
          <span className="font-mono text-[12.5px] text-muted">{CONTENT.scarcity}</span>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQSection() {
  return (
    <section id="faq" className="relative py-24 md:py-32">
      <div className="max-w-3xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow="FAQ" headline="Questions we get on every call." align="center" />
        <div className="space-y-3">
          {CONTENT.faq.map((f, i) => (
            <details key={i} className="glass group reveal">
              <summary className="p-5 md:p-6 flex items-start justify-between gap-6">
                <span className="text-[16px] md:text-[17px] font-medium text-ink">{f.q}</span>
                <span className="faq-icon text-muted mt-0.5"><Icon.Plus size={16} /></span>
              </summary>
              <div className="px-5 md:px-6 pb-5 md:pb-6 -mt-1 text-[14.5px] leading-relaxed text-muted">{f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FINAL CTA ---------------- */
function FinalCTA() {
  const c = CONTENT.finalCta;
  return (
    <section id="final-cta" className="relative py-24 md:py-36">
      <div className="max-w-5xl mx-auto px-6 md:px-8">
        <div className="reveal relative glass p-10 md:p-16 text-center overflow-hidden">
          <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[80%] h-64 pointer-events-none" aria-hidden="true"
               style={{ background: 'radial-gradient(closest-side, rgba(94,234,212,0.35), transparent 70%)', filter: 'blur(30px)' }}></div>
          <h2 className="h-display text-[32px] md:text-[46px] max-w-3xl mx-auto">{c.headline}</h2>
          <p className="mt-5 text-muted text-[16px] md:text-[17px] max-w-2xl mx-auto">{c.sub}</p>
          <div className="mt-8 flex items-center justify-center">
            <a href={`mailto:${CONTENT.brand.email}?subject=LealIntake demo`}
               className="btn-primary inline-flex items-center gap-2 rounded-full px-6 py-3.5 text-[15px]">
              {c.cta} <Icon.Arrow size={16} />
            </a>
          </div>
          <div className="mt-6 font-mono text-[11.5px] text-faint uppercase tracking-wider">
            30 min · live system · no pitch deck
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const f = CONTENT.footer;
  return (
    <footer className="relative border-t border-white/5 py-12">
      <div className="max-w-7xl mx-auto px-6 md:px-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
        <div>
          <div className="flex items-center gap-2">
            <span className="text-[16px] font-semibold tracking-tightish">
              Leal<span className="relative inline-block">
                <span>ı</span>
                <span className="absolute rounded-full" style={{ top: '5px', left: '50%', transform: 'translateX(-50%)', width: '3.5px', height: '3.5px', background: '#5EEAD4', boxShadow: '0 0 6px rgba(94,234,212,0.7)' }}></span>
              </span>ntake
            </span>
          </div>
          <div className="mt-3 text-[13px] text-muted max-w-lg">{f.tagline}</div>
        </div>
        <div className="flex items-center gap-6 text-[13px] text-muted">
          {f.links.map(l => (
            <a key={l.label} href={l.href} className="hover:text-ink transition-colors">{l.label}</a>
          ))}
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-6 md:px-8 mt-8 font-mono text-[11px] text-faint flex items-center justify-between">
        <span>{f.copyright}</span>
        <span>{CONTENT.brand.email}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { TimelineSection, OfferSection, GuaranteesSection, ScarcitySection, FAQSection, FinalCTA, Footer });