const { useState: useStateB } = React;

/* ---------- Letter ---------- */
function Letter() {
  return (
    <section id="letters" className="section-std" style={{ padding: '120px 24px', background: 'var(--bg-deep)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontStyle: 'italic', color: 'var(--accent-hover)', marginBottom: 24 }}>
          Dear DTC founder,
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
          <p>Your email list is the most valuable asset in your business. Most founders have no idea.</p>
          <p>If your store does $100k or more per month, you are almost certainly leaking 30 to 40% of possible revenue through a Klaviyo account that nobody has touched in months. Flows that were set up once and forgotten. Campaigns sent on gut feeling. No system, no strategy, no compounding.</p>
          <p>That is exactly what we fix.</p>
          <p style={{ color: 'var(--fg)' }}>You are not hiring a newsletter agency. You are hiring the team that engineers the retention system responsible for turning your existing traffic and buyers into repeat revenue. The 98% of visitors who did not buy the first time. The customers who bought once and never came back.</p>
          <p>The audit is completely free. We either find the money or we do not. Either way you walk away with a document showing exactly what is broken and what it is worth to fix it.</p>
          <p>No pitch. No upsell. No fluff.</p>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--fg)', marginTop: 32 }}>
          Harshit · WellSend
        </div>
      </div>
    </section>
  );
}

/* ---------- Case Studies ---------- */
function CaseStudies() {
  const [active, setActive] = useStateB(0);
  const [prev, setPrev] = useStateB(null);
  const [dir, setDir] = useStateB(1);
  const [paused, setPaused] = useStateB(false);
  const activeRef = React.useRef(active);
  activeRef.current = active;

  React.useEffect(() => {
    const id = setInterval(() => {
      if (paused) return;
      const next = (activeRef.current + 1) % 3;
      setDir(1);
      setPrev(activeRef.current);
      setActive(next);
      setTimeout(() => setPrev(null), 500);
    }, 3000);
    return () => clearInterval(id);
  }, [paused]);

  const cases = [
    {
      label: 'Client #1',
      tag: '$953K/month store',
      headline: '+$244,557 from email in 30 days',
      desc: 'Nearly $1M/month store. We rebuilt their Klaviyo backend and drove a quarter-million in attributed email revenue — without touching their ad account.',
      bullets: [
        '25.66% of total store revenue from email',
        '$116K from campaigns · $128K from flows',
        '↑ 13% email growth vs. previous period',
      ],
      img: 'assets/case1.png',
      stat: '$244,557',
      pct: '25.66%',
      growth: '+13%',
    },
    {
      label: 'Client #2',
      tag: '$189K/month store',
      headline: '+$32,077 from email, 17% store growth',
      desc: 'Underperforming Klaviyo with barely any flows. We rebuilt from scratch — total store revenue grew 17% in the next 30 days.',
      bullets: [
        '16.95% of total store revenue from email',
        '$17K from campaigns · $14K from flows',
        '↑ 17% total revenue growth vs. prior period',
      ],
      img: 'assets/case2.png',
      stat: '$32,077',
      pct: '16.95%',
      growth: '+17%',
    },
    {
      label: 'Client #3',
      tag: '$2M/month store',
      headline: '+$527,684 from email — 30% store growth',
      desc: 'Our largest active account. $2M/month in total revenue, $527K attributed to email in a single month. Campaigns and flows both compounding.',
      bullets: [
        '25.38% of total store revenue from email',
        '$282K from campaigns · $245K from flows',
        '↑ 30% total revenue growth vs. prior period',
      ],
      img: 'assets/case3.png',
      stat: '$527,684',
      pct: '25.38%',
      growth: '+30%',
    },
  ];

  const go = (next) => {
    setDir(next > active ? 1 : -1);
    setPrev(active);
    setActive(next);
    setTimeout(() => setPrev(null), 500);
  };

  const goNext = () => go((active + 1) % cases.length);
  const goPrev = () => go((active - 1 + cases.length) % cases.length);

  return (
    <section id="results" className="section-std" style={{ padding: '120px 24px', background: 'var(--bg-deep)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>

        {/* Header */}
        <div className="cs-header">
          <div>
            <Eyebrow accent>Real Klaviyo dashboards. Real numbers.</Eyebrow>
            <h2 style={{ marginTop: 14, maxWidth: 640 }}>We have added <em>seven figures</em> for our clients. Here are the receipts.</h2>
          </div>
          {/* Nav controls */}
          <div className="cs-pill-nav" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {cases.map((_, i) => (
              <button key={i} onClick={() => go(i)}
                style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', padding: '6px 14px', borderRadius: 999, border: '1px solid', borderColor: i === active ? 'var(--accent)' : 'var(--border)', background: i === active ? 'var(--accent-soft)' : 'transparent', color: i === active ? 'var(--accent-hover)' : 'var(--fg-dim)', cursor: 'pointer', transition: 'all 0.2s' }}>
                {_.label}
              </button>
            ))}
            <button className="cs-nav-btn" onClick={goPrev}>←</button>
            <button className="cs-nav-btn" onClick={goNext}>→</button>
          </div>
        </div>

        {/* Slider wrapper */}
        <div onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: 'relative', overflow: 'hidden', borderRadius: 16, border: '1px solid var(--border)', background: 'var(--surface)', boxShadow: '0 32px 80px rgba(0,0,0,0.4)' }}>
          {/* Green accent bar top */}
          <div style={{ height: 3, background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))', width: `${((active + 1) / cases.length) * 100}%`, transition: 'width 0.5s var(--ease)' }} />

          {cases.map((c, i) => {
            let cls = 'cs-slide';
            if (i === active) cls += ' active';
            return (
              <div key={i} className={cls}>
                {/* Left */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-dim)', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 999, padding: '4px 12px' }}>{c.label}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-hover)' }}>· {c.tag}</span>
                  </div>

                  <div style={{ background: 'linear-gradient(135deg, var(--accent), #15803D)', borderRadius: 10, padding: '16px 22px', marginBottom: 28, boxShadow: '0 8px 24px rgba(22,163,74,0.3)' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(18px, 2vw, 26px)', color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{c.headline}</div>
                  </div>

                  <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.65, marginBottom: 24, maxWidth: '100%' }}>{c.desc}</p>

                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
                    {c.bullets.map((b, j) => (
                      <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                        <div style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--accent-soft)', border: '1px solid rgba(22,163,74,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                          <span style={{ color: 'var(--accent-hover)', fontSize: 11 }}>✓</span>
                        </div>
                        <span style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.5 }}>{b}</span>
                      </div>
                    ))}
                  </div>

                  {/* Stats row */}
                  <div className="cs-stat-chips" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                    {[
                      { v: c.stat, l: 'Email attributed' },
                      { v: c.pct, l: 'Of total revenue' },
                      { v: c.growth, l: 'Store growth' },
                    ].map((s, j) => (
                      <div key={j} className="cs-stat-chip">
                        <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(18px, 1.8vw, 24px)', color: j === 0 ? 'var(--accent-hover)' : 'var(--fg)', letterSpacing: '-0.03em', fontStyle: 'italic' }}>{s.v}</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-dim)', marginTop: 4 }}>{s.l}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Right — screenshot */}
                <div className="cs-img-wrap">
                  <img src={c.img} alt={c.label} style={{ width: '100%', display: 'block' }} />
                  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '30%', background: 'linear-gradient(to top, rgba(26,34,54,0.7), transparent)', pointerEvents: 'none' }} />
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom progress */}
        <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 8 }}>
          {cases.map((_, i) => (
            <button key={i} onClick={() => go(i)}
              style={{ height: 3, flex: i === active ? 3 : 1, borderRadius: 999, background: i === active ? 'var(--accent)' : 'var(--border)', border: 'none', cursor: 'pointer', transition: 'all 0.4s var(--ease)', padding: 0 }} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useStateB(0);
  const items = [
    { q: 'How fast until we see actual revenue?', a: "Most clients see attributed email revenue within 14 to 21 days of kickoff. Core flows ship in week one. Abandoned cart, welcome series, and browse abandonment go live first. Campaign strategy follows in week two." },
    { q: 'What access do you need from us?', a: "Admin access to Klaviyo and read access to Shopify. We send a simple two-minute permissions doc on day one. That is all we need to get started." },
    { q: 'What is the commitment?', a: "90 days minimum. If the system has not paid for itself several times over by day 90, you get your final month refunded. We are that confident in the results." },
    { q: 'How much of my time does this take?', a: "Almost none. One 30-minute check-in per week where you approve upcoming sends. Copy, design, flows, segmentation, QA, and reporting are all handled by us." },
    { q: 'We already have flows set up. Can you still help?', a: "Yes, and this is actually where we find the most money. Most existing setups have gaps in segmentation, weak copy, and missing flows. We audit what you have, rebuild what is broken, and layer in what is missing." },
  ];
  return (
    <section id="faq" className="section-std" style={{ padding: '120px 24px' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <Eyebrow>Common questions</Eyebrow>
        <h2 style={{ marginTop: 16 }}>Things founders ask us <em>before</em> booking.</h2>
        <div style={{ marginTop: 40, borderTop: '1px solid var(--border)' }}>
          {items.map((it, i) => (
            <div key={i}
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{ borderBottom: '1px solid var(--border)', padding: '22px 0', cursor: 'pointer' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em', color: 'var(--fg)' }}>{it.q}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, color: 'var(--fg-dim)', lineHeight: 1 }}>{open === i ? '−' : '+'}</div>
              </div>
              {open === i && (
                <p style={{ marginTop: 12, fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.6, maxWidth: 620 }}>{it.a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Process + What You Get ---------- */
function ProcessSection() {
  const phases = [
    {
      n: '01', title: 'Audit', timeline: 'Days 1 to 7',
      items: ['Full Klaviyo account teardown', 'Flow, segment, and deliverability audit', 'Competitor and brand research', '60-day revenue roadmap built'],
    },
    {
      n: '02', title: 'Build', timeline: 'Days 7 to 45',
      items: ['8+ automated flows written and deployed', '3 to 4 campaigns sent per week', 'Sign-up form creation and optimization', 'Weekly performance reports'],
    },
    {
      n: '03', title: 'Scale', timeline: 'Days 45+',
      items: ['Campaigns ramping week over week', 'New flow and subject line tests weekly', 'Ongoing angle and segment experiments', 'Revenue compounding month over month'],
    },
  ];

  const deliverables = [
    'Pop-up form creation, copy, and ongoing management',
    'Minimum 3 to 4 email campaigns per week, written and sent for you',
    'Minimum 8 automated flows with 40 to 60 emails inside them',
    'Ongoing Klaviyo account management and deliverability monitoring',
    'Weekly strategy calls and real-time performance reporting',
    'Full campaign calendar planning and scheduling',
    'Unlimited email marketing strategy and consulting',
  ];

  return (
    <section className="section-std" style={{ padding: '120px 24px', background: 'var(--bg-deep)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <Eyebrow>How it works</Eyebrow>
          <h2 style={{ marginTop: 16 }}>The exact process we use for <em>every client.</em></h2>
          <p style={{ margin: '16px auto 0', maxWidth: 560, fontSize: 16 }}>Three phases. A clear timeline. Results you can see in the first two weeks.</p>
        </div>

        <div className="grid-3" style={{ marginBottom: 32 }}>
          {phases.map((p, i) => (
            <div key={i} className="card" style={{ padding: '32px 28px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 28, color: 'var(--fg)', letterSpacing: '-0.02em' }}>{p.title}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--accent-hover)', background: 'var(--accent-soft)', border: '1px solid rgba(22,163,74,0.25)', borderRadius: 999, padding: '4px 10px', whiteSpace: 'nowrap' }}>{p.n}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--fg-dim)', marginBottom: 24 }}>{p.timeline}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {p.items.map((item, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <div style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--accent-soft)', border: '1px solid rgba(22,163,74,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <span style={{ color: 'var(--accent-hover)', fontSize: 10, fontWeight: 700 }}>✓</span>
                    </div>
                    <span style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="card" style={{ padding: '36px 40px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <Eyebrow>No surprises</Eyebrow>
            <h3 style={{ marginTop: 12, fontSize: 26 }}>Here is exactly <em>what you get.</em></h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 24 }}>
              {deliverables.map((d, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 20, height: 20, borderRadius: 5, background: 'var(--accent-soft)', border: '1px solid rgba(22,163,74,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                    <span style={{ color: 'var(--accent-hover)', fontSize: 11, fontWeight: 700 }}>✓</span>
                  </div>
                  <span style={{ fontSize: 15, color: 'var(--fg)', lineHeight: 1.5 }}>{d}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'center', gap: 16, flexShrink: 0 }}>
            <div style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, padding: '20px 24px', textAlign: 'center', minWidth: 200 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 36, color: 'var(--accent-hover)', letterSpacing: '-0.03em' }}>90 days</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-dim)', marginTop: 6 }}>Money-back guarantee</div>
            </div>
            <Button arrow calendly>Schedule my free audit</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Book a Call ---------- */
function CTASection() {
  React.useEffect(() => {
    if (window.Calendly) {
      window.Calendly.initInlineWidget({
        url: 'https://calendly.com/achaulagain090/introductury-call',
        parentElement: document.getElementById('calendly-inline'),
      });
    }
  }, []);

  const onCall = [
    'We review your current Klaviyo setup live',
    'We pinpoint your 3 biggest email revenue leaks',
    'We show you exactly what we would do in the first 30 days',
    'You leave with a clear picture of what your list is worth',
  ];
  const qualify = [
    'You run a DTC eCommerce brand',
    'Your store does at least $50k per month',
    'You want a done-for-you system, not a course',
  ];

  return (
    <section className="section-std" style={{ padding: '120px 24px', borderTop: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }} className="book-grid-outer">
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <Eyebrow accent>Free. 30 minutes. No obligation.</Eyebrow>
          <h2 style={{ marginTop: 16 }}>Stop guessing what your email list <em>could</em> be doing.</h2>
          <p style={{ margin: '16px auto 0', maxWidth: 520, fontSize: 16 }}>One call. We dig in, tell you exactly what is broken, and show you what fixing it is worth. Then you decide.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'start' }} className="book-grid">
          {/* Left */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <div className="card" style={{ padding: '28px 32px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--fg)', marginBottom: 20 }}>What happens on the call:</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {onCall.map((b, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--accent-soft)', border: '1px solid rgba(22,163,74,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <span style={{ color: 'var(--accent-hover)', fontSize: 11, fontWeight: 700 }}>✓</span>
                    </div>
                    <span style={{ fontSize: 15, color: 'var(--fg)', lineHeight: 1.55 }}>{b}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ background: 'var(--surface)', border: '1px solid var(--border-strong)', borderRadius: 14, padding: '28px 32px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--fg)', marginBottom: 20 }}>This call is for you if:</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {qualify.map((b, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--accent-soft)', border: '1px solid rgba(22,163,74,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <span style={{ color: 'var(--accent-hover)', fontSize: 11, fontWeight: 700 }}>✓</span>
                    </div>
                    <span style={{ fontSize: 15, color: 'var(--fg)', lineHeight: 1.55 }}>{b}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border)', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--fg-dim)', lineHeight: 1.6 }}>
                No pitch. No hard sell. If we are a good fit we will tell you. If we are not, we will tell you that too.
              </div>
            </div>
          </div>

          {/* Right — inline Calendly */}
          <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--border)', background: '#fff' }}>
            <div id="calendly-inline" className="calendly-inline-widget"
              data-url="https://calendly.com/achaulagain090/introductury-call"
              style={{ minWidth: '100%', height: 680 }} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{ padding: '60px 24px 40px', borderTop: '1px solid var(--border)' }}>
      <div className="footer-inner" style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div>
          <Logo size={22} />
          <p style={{ marginTop: 16, fontSize: 13, color: 'var(--fg-dim)', maxWidth: 280 }}>
            Klaviyo-focused retention for high-ticket DTC. Built by founders, for founders.
          </p>
        </div>
        <div className="footer-cols">
          {[
            { t: 'Work', l: ['Case studies', 'System', 'Letters'] },
            { t: 'Company', l: ['About', 'Contact', 'Careers'] },
          ].map(col => (
            <div key={col.t}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{col.t}</div>
              {col.l.map(x => (
                <div key={x} style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 8 }}>{x}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 1100, margin: '40px auto 0', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-dim)' }}>
        © WellSend · 2026
      </div>
    </footer>
  );
}

Object.assign(window, { Letter, CaseStudies, ProcessSection, FAQ, CTASection, Footer });
