const { useState } = React;

/* ---------- Brand bits ---------- */
function Logo({ size = 28 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', fontFamily: 'var(--font-display)', fontSize: size, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1 }}>
      <span style={{ color: 'var(--fg)' }}>We'll</span>
      <span style={{ color: 'var(--accent)' }}>Send</span>
      <span style={{ width: size * 0.22, height: size * 0.22, borderRadius: '50%', background: 'var(--accent)', marginLeft: 6, alignSelf: 'flex-end', marginBottom: size * 0.1 }} />
    </span>
  );
}

function Eyebrow({ children, accent }) {
  return (
    <span className={`eyebrow ${accent ? 'eyebrow--accent' : ''}`}>
      {children}
    </span>
  );
}

const CALENDLY_URL = 'https://calendly.com/achaulagain090/introductury-call';
function openCalendly(e) {
  e.preventDefault();
  if (window.Calendly) {
    window.Calendly.initPopupWidget({ url: CALENDLY_URL });
  } else {
    window.open(CALENDLY_URL, '_blank');
  }
}

function Button({ variant = 'primary', children, arrow, href, calendly }) {
  const inner = <>{children}{arrow && <span style={{ fontFamily: 'var(--font-mono)' }}>→</span>}</>;
  if (calendly) {
    return <button className={`btn btn-${variant}`} onClick={openCalendly}>{inner}</button>;
  }
  if (href) {
    return (
      <a href={href} className={`btn btn-${variant}`} style={{ textDecoration: 'none' }}>
        {inner}
      </a>
    );
  }
  return <button className={`btn btn-${variant}`}>{inner}</button>;
}

/* ---------- Nav ---------- */
function Nav() {
  return (
    <nav style={{
      position: 'sticky', top: 16, zIndex: 50,
      margin: '16px auto 0', maxWidth: 1200,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 22px',
      background: 'rgba(10,15,28,0.7)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      border: '1px solid var(--border)', borderRadius: 14,
    }}>
      <Logo size={24} />
      <div className="nav-links">
        {['Results', 'System', 'Letters', 'FAQ'].map(l => (
          <a key={l} href={`#${l.toLowerCase()}`} style={{ color: 'var(--fg-muted)', textDecoration: 'none', fontSize: 14 }}>{l}</a>
        ))}
      </div>
      <Button arrow calendly>Book free audit</Button>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="section-hero" style={{ position: 'relative', padding: '120px 24px 100px', textAlign: 'center', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(50% 60% at 50% 40%, rgba(22,163,74,0.22), transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto' }}>
        <Eyebrow accent>Limited Q2 audit spots available</Eyebrow>
        <h1 style={{ marginTop: 24, fontSize: 'clamp(42px, 6vw, 78px)' }}>
          Your email list is a<br /><em>goldmine.</em> Start treating it like one.
        </h1>
        <p style={{ margin: '28px auto 0', color: 'var(--fg-muted)', fontSize: 19, maxWidth: 660, textAlign: 'center' }}>
          We build the Klaviyo retention engine that pulls <span style={{ color: 'var(--fg)' }}>35 to 45% of your store revenue from email.</span> Fully done for you. Zero founder involvement required.
        </p>
        <div className="hero-btns" style={{ marginTop: 40 }}>
          <Button arrow calendly>Book my free audit</Button>
          <Button variant="ghost" href="#system">Show me the system</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Stats ---------- */
function Stats() {
  const items = [
    { n: '$1.9M', label: 'Revenue added in 7 months' },
    { n: '42%', label: 'Avg. email revenue share' },
    { n: '3.2x', label: 'ROAS on retention spend' },
  ];
  return (
    <section className="section-sm" style={{ padding: '80px 24px', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="grid-stats" style={{ maxWidth: 1100, margin: '0 auto' }}>
        {items.map((s, i) => (
          <div key={i} style={{ textAlign: i === 1 ? 'center' : i === 0 ? 'left' : 'right' }}>
            <div className="stat"><em>{s.n}</em></div>
            <span className="stat-label">{s.label}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- System (three-step) ---------- */
function SystemSection() {
  const steps = [
    { n: '01', t: 'Audit and diagnose', b: "We go through your entire Klaviyo account. Every flow, every segment, every campaign. You get a clear document showing exactly where revenue is leaking and what we are going to fix." },
    { n: '02', t: 'Engineer the engine', b: "We rebuild your retention backend from scratch. Welcome series, abandoned cart, browse abandonment, post-purchase, winback. Every email written to convert. No bloat, no filler." },
    { n: '03', t: 'Scale and compound', b: "Weekly campaign execution, real-time reporting, and a system that keeps growing. You approve sends. We write, design, build, and manage everything else." },
  ];
  return (
    <section id="system" className="section-std" style={{ padding: '120px 24px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Eyebrow>The backend retention engine</Eyebrow>
        <h2 style={{ marginTop: 16, maxWidth: 720 }}>How we add <em>seven figures</em> to a DTC brand without touching the ad account.</h2>
        <div className="grid-3" style={{ marginTop: 60 }}>
          {steps.map(s => (
            <div key={s.n} className="card" style={{ padding: 28 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--accent-hover)' }}>{s.n}</div>
              <h4 style={{ marginTop: 16, fontSize: 24 }}>{s.t}</h4>
              <p style={{ marginTop: 12, fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.55 }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Logo, Eyebrow, Button, Nav, Hero, Stats, SystemSection });