// Landing sections — Archivo typography, real screenshots, ink + violet + lime palette.

function SectionCompat() {
  const brands = ['Whoop', 'Apple Watch', 'Oura', 'Apple Health', 'Health Connect'];
  return (
    <section style={{
      background: '#0a0b0d', padding: '60px 48px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div data-compat="true" style={{
        maxWidth: 1300, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40,
        flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
          color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase',
        }}>
          Works with your wearable →
        </div>
        <div data-compat-brands="true" style={{
          display: 'flex', gap: 56, alignItems: 'center', flexWrap: 'wrap',
          fontFamily: 'Archivo, sans-serif', fontSize: 22, fontWeight: 500,
          color: 'rgba(255,255,255,0.75)', letterSpacing: '-0.02em',
        }}>
          {brands.map((b, i) => <span key={i}>{b}</span>)}
        </div>
      </div>
    </section>
  );
}

function SectionHowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Connect your wearable',
      desc: 'Pair with Whoop, Oura, Apple Health, or Health Connect on Android. 30 seconds. No new hardware.',
      icon: (
        <svg viewBox="0 0 48 48" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="14" y="6" width="20" height="36" rx="4" />
          <rect x="18" y="14" width="12" height="20" rx="2" />
          <path d="M18 2 L18 6 M30 2 L30 6 M18 42 L18 46 M30 42 L30 46" />
        </svg>
      ),
    },
    {
      n: '02',
      title: 'Your data gets modeled',
      desc: 'We analyze 22 biomarkers — HRV trends, sleep staging drift, RHR creep — against clinical burnout research.',
      icon: (
        <svg viewBox="0 0 48 48" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M6 36 L14 24 L22 30 L32 14 L42 22" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="14" cy="24" r="2" fill="currentColor" />
          <circle cx="22" cy="30" r="2" fill="currentColor" />
          <circle cx="32" cy="14" r="2" fill="currentColor" />
        </svg>
      ),
    },
    {
      n: '03',
      title: 'Get early signals',
      desc: 'A daily burnout score — not a generic "recovery" number. Plus recommendations tuned to what your body is actually doing.',
      icon: (
        <svg viewBox="0 0 48 48" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="1.5">
          <circle cx="24" cy="24" r="18" />
          <path d="M24 12 L24 24 L32 28" strokeLinecap="round" />
        </svg>
      ),
    },
  ];
  return (
    <section id="how-it-works" style={{
      background: '#0a0b0d', color: '#fff', padding: '140px 48px',
    }}>
      <div style={{ maxWidth: 1300, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
          color: 'rgba(216,211,255,0.7)', marginBottom: 20, textTransform: 'uppercase',
        }}>○ How it works</div>
        <h2 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(42px, 5.5vw, 88px)', lineHeight: 0.98, letterSpacing: '-0.045em',
          color: '#fff', margin: 0, marginBottom: 72, maxWidth: 900,
        }}>
          Three steps.<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>One honest answer.</span>
        </h2>
        <div data-grid="3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 16, overflow: 'hidden',
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: '#0a0b0d', padding: '48px 36px',
              display: 'flex', flexDirection: 'column', gap: 20, minHeight: 340,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ color: '#d8d3ff' }}>{s.icon}</div>
                <div style={{
                  fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
                  color: 'rgba(255,255,255,0.3)',
                }}>{s.n}</div>
              </div>
              <h3 style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 600,
                fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.035em',
                color: '#fff', margin: 0, marginTop: 'auto',
              }}>{s.title}</h3>
              <p style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 400,
                fontSize: 15, lineHeight: 1.55, letterSpacing: '-0.005em',
                color: 'rgba(255,255,255,0.6)', margin: 0,
              }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SectionStatsBand() {
  const stats = [
    { v: '6+', l: 'weeks earlier', sub: 'than self-report' },
    { v: '22', l: 'biomarkers', sub: 'tracked daily' },
    { v: '94%', l: 'detection', sub: 'clinical cohort' },
    { v: '30s', l: 'to connect', sub: 'your wearable' },
  ];
  return (
    <section style={{
      background: '#0a0b0d', padding: '120px 48px',
      borderTop: '1px solid rgba(255,255,255,0.08)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', width: 1200, height: 600, top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        background: 'radial-gradient(ellipse, rgba(74,58,154,0.2) 0%, transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }} />
      <div data-grid="4" style={{
        maxWidth: 1300, margin: '0 auto', position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40,
      }}>
        {stats.map((s, i) => (
          <div key={i} data-stat="true" style={{
            paddingRight: i < 3 ? 32 : 0,
            borderRight: i < 3 ? '1px solid rgba(255,255,255,0.1)' : 'none',
          }}>
            <div data-statbig="true" style={{
              fontFamily: 'Archivo, sans-serif', fontWeight: 600,
              fontSize: 'clamp(64px, 6.5vw, 104px)', lineHeight: 0.9,
              letterSpacing: '-0.05em', color: '#fff',
            }}>{s.v}</div>
            <div style={{
              fontFamily: 'Archivo, sans-serif', fontWeight: 500,
              fontSize: 18, color: '#d8d3ff', marginTop: 14,
              letterSpacing: '-0.02em',
            }}>{s.l}</div>
            <div style={{
              fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 500,
              color: 'rgba(255,255,255,0.5)', marginTop: 6, letterSpacing: 0.3,
              textTransform: 'uppercase',
            }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SectionFeatures() {
  return (
    <section style={{ background: '#0a0b0d', padding: '140px 48px' }}>
      <div style={{ maxWidth: 1300, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
          color: 'rgba(216,211,255,0.7)', marginBottom: 20, textTransform: 'uppercase',
        }}>○ What you get</div>
        <h2 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(42px, 5.5vw, 88px)', lineHeight: 0.98, letterSpacing: '-0.045em',
          color: '#fff', margin: 0, marginBottom: 80, maxWidth: 900,
        }}>
          Not another dashboard.<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>A signal you can act on.</span>
        </h2>
        <div data-grid="features" style={{
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 24,
        }}>
          {/* Big feature card — device showcase */}
          <div data-feat-big="true" style={{
            background: 'linear-gradient(155deg, #1a1a2e 0%, #0a0b0d 100%)',
            borderRadius: 24, padding: 56, minHeight: 600,
            display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
            gridRow: 'span 2', border: '1px solid rgba(255,255,255,0.06)',
          }}>
            <div style={{
              position: 'absolute', width: 600, height: 600, top: '-20%', right: '-20%',
              background: 'radial-gradient(circle, rgba(139,120,232,0.35) 0%, transparent 65%)',
              filter: 'blur(40px)', pointerEvents: 'none',
            }} />
            <div style={{ position: 'relative', zIndex: 2 }}>
              <div style={{
                fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
                color: 'rgba(216,211,255,0.7)', marginBottom: 20, textTransform: 'uppercase',
              }}>Vibe cards</div>
              <h3 style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 600,
                fontSize: 44, lineHeight: 1.02, letterSpacing: '-0.04em',
                color: '#fff', margin: 0, marginBottom: 16,
              }}>
                A card for the day,<br/>
                <span style={{ color: '#d8d3ff' }}>tuned to how you feel.</span>
              </h3>
              <p style={{
                fontFamily: 'Archivo, sans-serif', fontSize: 16, lineHeight: 1.55,
                letterSpacing: '-0.005em', color: 'rgba(255,255,255,0.6)',
                maxWidth: 380, margin: 0,
              }}>
                Morning, midday, evening — shareable cards auto-generated from
                your signals. Tone, color, and copy picked to match your state.
              </p>
            </div>
            <div data-screenshot-shift="true" style={{
              marginTop: 'auto', display: 'flex', justifyContent: 'center',
              position: 'relative', zIndex: 2, transform: 'translateY(60px)',
            }}>
              <DeviceScreenshot src="assets/ss-vibe-cards.png?v=2" width={240} shadow="soft" />
            </div>
          </div>
          {/* Small card 1 — Weekly trends w/ screenshot */}
          <div data-feat-small="true" style={{
            background: 'linear-gradient(155deg, #0f1419 0%, #0a0b0d 100%)',
            borderRadius: 24, padding: '36px 36px 0',
            minHeight: 288, border: '1px solid rgba(255,255,255,0.06)',
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
          }}>
            <div>
              <div style={{
                fontFamily: 'Geist Mono, ui-monospace, monospace',
                fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.4)', marginBottom: 14,
              }}>Weekly trends</div>
              <h3 style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 600,
                fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.035em',
                margin: 0, marginBottom: 12, color: '#fff',
              }}>See the trajectory,<br/>not just today.</h3>
              <p style={{
                fontFamily: 'Archivo, sans-serif', fontSize: 14, lineHeight: 1.55,
                letterSpacing: '-0.005em', margin: 0, color: 'rgba(255,255,255,0.6)',
              }}>HRV drift, sleep debt, recovery patterns — the slow signals that matter.</p>
            </div>
            <div data-screenshot-shift="true" style={{
              marginTop: 'auto', display: 'flex', justifyContent: 'center',
              transform: 'translateY(40px)',
            }}>
              <DeviceScreenshot src="assets/ss-trends.png?v=2" width={200} shadow="soft" />
            </div>
          </div>
          {/* Small card 2 — use dashboard screenshot as illustration */}
          <div data-feat-small="true" style={{
            background: 'linear-gradient(155deg, #1a1a2e 0%, #0a0b0d 100%)',
            borderRadius: 24, padding: '36px 36px 0',
            minHeight: 288, border: '1px solid rgba(255,255,255,0.06)',
            display: 'flex', gap: 20, overflow: 'hidden',
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ color: '#9dd929', marginBottom: 16 }}>
                <svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <circle cx="16" cy="16" r="11" />
                  <path d="M16 10 L16 16 L20 18" strokeLinecap="round" />
                </svg>
              </div>
              <h3 style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 600,
                fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.035em',
                margin: 0, marginBottom: 12, color: '#fff',
              }}>Burnout in one number</h3>
              <p style={{
                fontFamily: 'Archivo, sans-serif', fontSize: 14, lineHeight: 1.55,
                letterSpacing: '-0.005em', margin: 0, color: 'rgba(255,255,255,0.6)',
              }}>
                Not a recovery score. A dedicated burnout signal trained on
                clinical data, tuned to you.
              </p>
            </div>
            <div style={{
              flexShrink: 0, marginTop: 20, marginRight: -10, marginBottom: -40,
              alignSelf: 'flex-end',
            }}>
              <DeviceScreenshot src="assets/ss-dashboard.png?v=2" width={140} tilt={5} shadow="soft" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ label, title, titleBreak, desc, icon }) {
  return (
    <div style={{
      background: 'linear-gradient(155deg, #1a1a2e 0%, #0a0b0d 100%)',
      borderRadius: 24, padding: 36,
      minHeight: 288, border: '1px solid rgba(255,255,255,0.06)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ color: '#d8d3ff', marginBottom: 16 }}>{icon}</div>
      <div style={{
        fontFamily: 'Archivo, sans-serif', fontSize: 10, fontWeight: 600,
        letterSpacing: 0.8, color: 'rgba(216,211,255,0.6)',
        marginBottom: 10, textTransform: 'uppercase',
      }}>{label}</div>
      <h3 style={{
        fontFamily: 'Archivo, sans-serif', fontWeight: 600,
        fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.035em',
        margin: 0, marginBottom: 12, color: '#fff',
      }}>{title}<br/><span style={{ color: '#d8d3ff' }}>{titleBreak}</span></h3>
      <p style={{
        fontFamily: 'Archivo, sans-serif', fontSize: 14, lineHeight: 1.55,
        letterSpacing: '-0.005em', margin: 0, color: 'rgba(255,255,255,0.6)',
      }}>{desc}</p>
    </div>
  );
}

function SectionScience() {
  return (
    <section id="science" style={{
      background: '#0a0b0d', color: '#fff', padding: '140px 48px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', width: 1000, height: 800, top: '-20%', right: '-20%',
        background: 'radial-gradient(ellipse, rgba(74,58,154,0.2) 0%, transparent 60%)',
        filter: 'blur(100px)', pointerEvents: 'none',
      }} />
      <div data-grid="2" style={{
        maxWidth: 1300, margin: '0 auto', position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
            color: 'rgba(216,211,255,0.7)', marginBottom: 20, textTransform: 'uppercase',
          }}>○ The science</div>
          <h2 style={{
            fontFamily: 'Archivo, sans-serif', fontWeight: 600,
            fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.04em',
            color: '#fff', margin: 0, marginBottom: 36, maxWidth: 640,
          }}>
            Your nervous system tells the truth <span style={{ color: '#d8d3ff' }}>before your brain catches up.</span>
          </h2>
          <p style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 17, lineHeight: 1.65,
            letterSpacing: '-0.005em', color: 'rgba(255,255,255,0.7)',
            margin: 0, marginBottom: 20, maxWidth: 560,
          }}>
            Chronic stress reshapes autonomic balance months before you notice.
            Heart-rate variability narrows. Deep sleep shortens. Resting heart
            rate climbs. These aren't random — they're signatures.
          </p>
          <p style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 17, lineHeight: 1.65,
            letterSpacing: '-0.005em', color: 'rgba(255,255,255,0.7)',
            margin: 0, maxWidth: 560,
          }}>
            Wane's model is trained on longitudinal biometric data from over
            12,000 participants across clinical burnout studies. We don't ask
            how you feel. We read what your body is already saying.
          </p>
          <div style={{
            marginTop: 48, padding: '24px 0', borderTop: '1px solid rgba(255,255,255,0.1)',
            display: 'flex', gap: 20, fontFamily: 'Archivo, sans-serif', fontSize: 11,
            fontWeight: 500, letterSpacing: 0.4,
            color: 'rgba(255,255,255,0.4)', flexWrap: 'wrap', textTransform: 'uppercase',
          }}>
            <span>HRV-RMSSD</span>
            <span>·</span>
            <span>Sleep staging</span>
            <span>·</span>
            <span>RHR trend</span>
            <span>·</span>
            <span>Respiratory rate</span>
            <span>·</span>
            <span>Recovery latency</span>
          </div>
        </div>
        {/* Proof: floating screenshot */}
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', width: 600, height: 600,
            background: 'radial-gradient(circle, rgba(139,120,232,0.4) 0%, transparent 60%)',
            filter: 'blur(60px)',
          }} />
          <div style={{ position: 'relative' }}>
            <DeviceScreenshot src="assets/ss-dashboard.png?v=2" width={340} tilt={-3} />
          </div>
          {/* Annotation callouts */}
          <div data-callout="true" style={{
            position: 'absolute', top: '25%', left: '-5%',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.1)',
            backdropFilter: 'blur(12px)',
            padding: '10px 14px', borderRadius: 12,
            fontFamily: 'Archivo, sans-serif', fontSize: 12, fontWeight: 500,
            color: '#fff', letterSpacing: '-0.005em',
          }}>
            <span style={{ color: '#9dd929', fontWeight: 600 }}>94%</span> detection
          </div>
          <div data-callout="true" style={{
            position: 'absolute', bottom: '30%', right: '-8%',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.1)',
            backdropFilter: 'blur(12px)',
            padding: '10px 14px', borderRadius: 12,
            fontFamily: 'Archivo, sans-serif', fontSize: 12, fontWeight: 500,
            color: '#fff', letterSpacing: '-0.005em',
          }}>
            <span style={{ color: '#d8d3ff', fontWeight: 600 }}>22</span> biomarkers
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionFAQ() {
  const faqs = [
    {
      q: 'Is my biometric data private?',
      a: 'Yes. Your data is encrypted end-to-end and never sold or shared. You can delete your account and all data with one tap. We are HIPAA-aligned and GDPR-compliant by design.',
    },
    {
      q: 'How accurate is the burnout score?',
      a: 'In our clinical validation cohort (n=1,400), Wane correctly flagged elevated burnout risk 6+ weeks before self-reported symptoms in 94% of cases. Accuracy improves with 14+ days of baseline data.',
    },
    {
      q: 'Which wearables are supported?',
      a: 'Whoop, Oura (Gen 2+), Apple Health (Apple Watch Series 4+), and Health Connect on Android. We add new integrations every quarter — vote on which ones next in-app.',
    },
    {
      q: 'How much does Wane cost?',
      a: "7-day free trial, then $9/month or $79/year. No ads, no data sales, no upsells. That's the whole business model.",
    },
    {
      q: 'Is this a medical device?',
      a: "No. Wane is a wellness tool, not a diagnostic. If you're experiencing burnout symptoms, talk to a clinician. Wane is most useful as an early signal, not a substitute for care.",
    },
    {
      q: 'How long until I see my first score?',
      a: "You'll see a preliminary score after 48 hours of wearable data, and a calibrated personal baseline after 14 days.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ background: '#0a0b0d', padding: '140px 48px' }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
          color: 'rgba(216,211,255,0.7)', marginBottom: 20, textTransform: 'uppercase',
        }}>○ FAQ</div>
        <h2 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(42px, 5vw, 76px)', lineHeight: 0.98, letterSpacing: '-0.045em',
          color: '#fff', margin: 0, marginBottom: 64,
        }}>
          Questions,<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>honestly answered.</span>
        </h2>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)' }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '28px 0', background: 'none', border: 'none',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                cursor: 'pointer', textAlign: 'left',
                gap: 16,
              }}>
                <span data-faq-q="true" style={{
                  fontFamily: 'Archivo, sans-serif', fontSize: 22, fontWeight: 500,
                  letterSpacing: '-0.03em', color: '#fff',
                }}>{f.q}</span>
                <span style={{
                  fontSize: 28, color: '#d8d3ff', transition: 'transform 0.3s',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  fontFamily: 'Archivo', fontWeight: 300,
                }}>+</span>
              </button>
              <div style={{
                maxHeight: open === i ? 360 : 0, overflow: 'hidden',
                transition: 'max-height 0.4s ease, padding 0.3s',
                paddingBottom: open === i ? 28 : 0,
              }}>
                <p style={{
                  fontFamily: 'Archivo, sans-serif', fontSize: 16, fontWeight: 400,
                  lineHeight: 1.6, letterSpacing: '-0.005em',
                  color: 'rgba(255,255,255,0.7)', margin: 0, maxWidth: 680,
                }}>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SectionFinalCTA({ onCTA }) {
  return (
    <section style={{
      background: '#0a0b0d', color: '#fff',
      padding: '160px 48px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'center', justifyContent: 'center', opacity: 0.08,
      }}>
        <div style={{ width: 'min(80vh, 80vw)' }}>
          <WaneMarkSVG size="100%" palette="violet" />
        </div>
      </div>
      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 900, margin: '0 auto', textAlign: 'center',
      }}>
        <h2 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(48px, 7vw, 120px)', lineHeight: 0.95, letterSpacing: '-0.05em',
          color: '#fff', margin: 0, marginBottom: 36, textWrap: 'balance',
        }}>
          Your body has been<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>trying to tell you.</span>
        </h2>
        <p style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 19, lineHeight: 1.55,
          letterSpacing: '-0.005em',
          color: 'rgba(255,255,255,0.65)', maxWidth: 560, margin: '0 auto 48px',
        }}>
          Seven days free. Cancel anytime. No data sold, ever.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <StoreButtons dark={true} onClick={onCTA} />
        </div>
      </div>
    </section>
  );
}

function SectionFooter() {
  return (
    <footer style={{
      background: '#0a0b0d', color: '#fff', padding: '60px 48px 40px',
      borderTop: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div data-grid="footer" style={{
        maxWidth: 1300, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <WaneMarkSVG size={32} palette="violet" />
            <span style={{
              fontFamily: 'Archivo, sans-serif', fontSize: 22, fontWeight: 600,
              letterSpacing: '-0.04em', color: '#fff',
            }}>wane</span>
          </div>
          <p style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 13, lineHeight: 1.55,
            letterSpacing: '-0.005em',
            color: 'rgba(255,255,255,0.5)', margin: 0, maxWidth: 320,
          }}>
            Biometric burnout monitoring. Read the signals before symptoms catch up.
          </p>
        </div>
        {[
          { t: 'Product', l: [
            ['How it works', '#how-it-works'],
            ['Science', '#science'],
            ['FAQ', '#faq'],
          ]},
          { t: 'Company', l: [
            ['White paper', 'research.html'],
            ['Contact', 'mailto:[email protected]'],
            ['Support', 'mailto:[email protected]'],
          ]},
          { t: 'Legal', l: [
            ['Privacy Policy', 'privacy.html'],
            ['Terms of Service', 'terms.html'],
            ['Not a medical device', 'research.html#compliance'],
          ]},
        ].map((c, i) => (
          <div key={i}>
            <div style={{
              fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
              color: 'rgba(255,255,255,0.4)', marginBottom: 16, textTransform: 'uppercase',
            }}>{c.t}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {c.l.map(([label, href], j) => (
                <a key={j} href={href} style={{
                  fontFamily: 'Archivo, sans-serif', fontSize: 14, fontWeight: 400,
                  letterSpacing: '-0.005em',
                  color: 'rgba(255,255,255,0.7)', textDecoration: 'none',
                }}>{label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        maxWidth: 1300, margin: '60px auto 0', paddingTop: 24,
        borderTop: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
        fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 500,
        color: 'rgba(255,255,255,0.4)', letterSpacing: 0.4, textTransform: 'uppercase',
      }}>
        <span>© 2026 WANE · Bucharest</span>
        <span>Not a medical device</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  SectionCompat, SectionHowItWorks, SectionStatsBand, SectionFeatures,
  SectionScience, SectionFAQ, SectionFinalCTA, SectionFooter,
});
