// PROVE landing — extended content sections.
// Problem, Science, A Day in the Life, REP tiers, Anti-cheat, FAQ, new Final CTA, new Footer.

const { useState: useStateExt, useEffect: useEffectExt } = React;

// ─────────────────────────────────────────────────────────────
// 01 — THE PROBLEM
// ─────────────────────────────────────────────────────────────
function ProblemSection() {
  const items = [
    { n: '01', body: 'Streaks reset in secret. One tap, no consequences. Nobody knows you skipped. So you skip again.' },
    { n: '02', body: 'Accountability partners get tired. They stop asking. You stop answering. The habit quietly dies.' },
    { n: '03', body: 'Motivation runs out. It always does. And motivation-based apps have nothing left to offer you.' },
  ];
  return (
    <section style={{
      background: 'var(--bg)', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 01 / the problem</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.3)' }}>read carefully</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }}>
        <h2 style={{
          fontFamily: 'var(--display)',
          fontSize: 'clamp(56px, 6.4vw, 104px)',
          fontWeight: 900, lineHeight: 0.94,
          letterSpacing: '-0.045em', margin: 0,
          textTransform: 'uppercase',
          textWrap: 'balance',
        }}>
          Every habit app you’ve tried <span style={{ color: 'var(--coral)', fontStyle: 'italic' }}>let you cheat.</span>
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 12 }}>
          {items.map((it) => (
            <div key={it.n} style={{ display: 'flex', gap: 20 }}>
              <span style={{
                fontFamily: 'var(--mono)', fontSize: 14, fontWeight: 700,
                color: 'var(--coral)', letterSpacing: 0.1 + 'em',
                paddingTop: 4, flexShrink: 0,
              }}>{it.n} /</span>
              <p style={{
                fontSize: 18, lineHeight: 1.55,
                color: 'rgba(255,255,255,0.82)', margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>

      <div style={{ height: 80 }} />
      <div style={{ height: 2, background: 'var(--coral)', width: '100%' }} />
      <p style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(22px, 2.4vw, 32px)',
        fontStyle: 'italic',
        fontWeight: 600,
        color: 'rgba(255,255,255,0.9)',
        margin: '40px auto 0',
        maxWidth: 900,
        textAlign: 'center',
        lineHeight: 1.3,
        textWrap: 'balance',
      }}>
        PROVE is built on one idea — public proof makes
        <span style={{ color: 'var(--coral)' }}> quitting harder </span>
        than continuing.
      </p>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 02 — THE SCIENCE (coral background)
// ─────────────────────────────────────────────────────────────
function ScienceSection() {
  const cards = [
    {
      tag: 'Public commitment',
      val: 3.2, suffix: '×',
      label: 'more likely to achieve goals when publicly committed',
      source: '— Dominican University study, 2015',
      body: 'Telling someone you will do something is completely different from showing them you did.',
    },
    {
      tag: 'Loss aversion',
      val: 2.5, suffix: '×',
      label: 'stronger motivation from avoiding loss than gaining reward',
      source: '— Kahneman & Tversky, Prospect Theory',
      body: 'When coins are staked on your streak, missing feels like losing something real. It is.',
    },
    {
      tag: 'Commitment device',
      val: 76, suffix: '%',
      label: 'of people who use commitment devices report achieving their target behavior',
      source: '— Journal of Economic Perspectives',
      body: 'The PROVE Window is a commitment device. Miss it and the streak dies. No override. No grace period.',
    },
  ];
  return (
    <section style={{
      background: 'var(--coral)', color: '#0D0D0D',
      padding: '140px 72px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(-45deg, transparent 0 40px, rgba(0,0,0,0.03) 40px 42px)',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(0,0,0,0.55)' }}>§ 02 / the science</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(0,0,0,0.4)' }}>not motivation · architecture</span>
        </div>

        <h2 style={{
          fontFamily: 'var(--display)',
          fontSize: 'clamp(56px, 6vw, 96px)',
          fontWeight: 900, lineHeight: 0.92,
          letterSpacing: '-0.045em', margin: 0,
          textTransform: 'uppercase',
          textWrap: 'balance',
          maxWidth: 1100,
        }}>
          This isn’t motivation. It’s <span style={{ fontStyle: 'italic' }}>architecture.</span>
        </h2>
        <p style={{
          fontSize: 22, lineHeight: 1.5,
          color: 'rgba(0,0,0,0.7)',
          maxWidth: 720, marginTop: 22, marginBottom: 56,
        }}>
          PROVE is built around three proven psychological forces.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {cards.map((c) => (
            <div key={c.tag} style={{
              background: '#fafaf7', color: '#0D0D0D',
              border: '1px solid rgba(0,0,0,0.1)',
              padding: 28, borderRadius: 4,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <span style={{
                fontSize: 10, fontFamily: 'var(--mono)',
                letterSpacing: 0.14 + 'em', textTransform: 'uppercase',
                color: 'rgba(0,0,0,0.55)', fontWeight: 700,
              }}>{c.tag}</span>
              <AnimatedCount value={c.val} suffix={c.suffix} style={{
                fontSize: 72, fontWeight: 700, color: '#0D0D0D',
                letterSpacing: '-0.04em', lineHeight: 0.92,
              }} />
              <div style={{ fontSize: 15, fontWeight: 600, color: '#0D0D0D', lineHeight: 1.4 }}>
                {c.label}
              </div>
              <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'rgba(0,0,0,0.5)', marginTop: -6 }}>
                {c.source}
              </div>
              <p style={{ fontSize: 14, color: 'rgba(0,0,0,0.7)', lineHeight: 1.55, margin: 0, marginTop: 4 }}>
                {c.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 03 — A DAY IN THE LIFE (timeline)
// ─────────────────────────────────────────────────────────────
function DayInLifeSection() {
  const moments = [
    { t: '6:07 AM',  icon: 'sunrise', body: 'Window opens. Phone buzzes. You’ve been doing this 47 days. You don’t need motivation anymore.' },
    { t: '6:31 AM',  icon: 'camera',  body: '60 seconds. Raw footage. Front squat. Eye contact with the camera. No filter. No music. Just proof.' },
    { t: '6:34 AM',  icon: 'check',   body: 'Posted. 12 backers notified. +10 coins credited. Day 47 is on the record.' },
    { t: '11:45 AM', icon: 'coin',    body: '3 people doubted you today. They staked 150 coins against your streak. They’ll lose those tonight.' },
    { t: '11:59 PM', icon: 'shield',  body: 'Window closed. Streak protected. Your backers earned from the doubters. Day 48 opens in 6 hours.' },
  ];
  return (
    <section style={{
      background: '#0a0a0a', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
        <div style={{ maxWidth: 760 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 03 / a day in the life</span>
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(56px, 6vw, 96px)',
            fontWeight: 900, lineHeight: 0.92,
            letterSpacing: '-0.045em', margin: '18px 0 14px',
            textTransform: 'uppercase',
            textWrap: 'balance',
          }}>
            What <span style={{ color: 'var(--coral)', fontStyle: 'italic' }}>day 47</span> looks like.
          </h2>
          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.6)', margin: 0, maxWidth: 600, lineHeight: 1.55 }}>
            This is not inspiration porn. This is what the habit looks like.
          </p>
        </div>
      </div>

      {/* Timeline */}
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24 }}>
        {/* Coral connecting line */}
        <div style={{
          position: 'absolute', left: '5%', right: '5%', top: 36,
          height: 2, background: 'linear-gradient(90deg, transparent, var(--coral) 20%, var(--coral) 80%, transparent)',
          zIndex: 0,
        }} />
        {moments.map((m, i) => (
          <div key={i} style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16 }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: '#0a0a0a',
              border: '1.5px solid var(--coral)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 0 0 6px #0a0a0a, 0 0 24px rgba(255,97,85,0.4)',
            }}>
              <TimelineIcon kind={m.icon} />
            </div>
            <MonoNum size={16} weight={700} color="var(--coral)" style={{ letterSpacing: '-0.01em' }}>{m.t}</MonoNum>
            <p style={{
              fontSize: 13, color: 'rgba(255,255,255,0.7)',
              margin: 0, lineHeight: 1.55, padding: '0 4px',
            }}>{m.body}</p>
          </div>
        ))}
      </div>

      <p style={{
        marginTop: 80,
        fontSize: 18, fontStyle: 'italic',
        color: 'rgba(255,255,255,0.7)',
        textAlign: 'center', maxWidth: 760, marginLeft: 'auto', marginRight: 'auto',
        lineHeight: 1.6,
      }}>
        47 days ago this person said they’d start working out. Today they have <span style={{ color: '#fff', fontWeight: 600 }}>203 backers</span> and a REP score of <span style={{ color: 'var(--coral)', fontFamily: 'var(--mono)', fontWeight: 600 }}>6,480</span>.
        <br />The proof is all the motivation they need.
      </p>
    </section>
  );
}

function TimelineIcon({ kind }) {
  const s = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--coral)', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'sunrise') return <svg {...s}><path d="M3 18h18M12 4v6M5 11l2-2M19 11l-2-2M8 18a4 4 0 018 0" /></svg>;
  if (kind === 'camera')  return <svg {...s}><rect x="3" y="7" width="18" height="13" rx="2"/><circle cx="12" cy="13.5" r="4"/><path d="M9 7l2-3h2l2 3"/></svg>;
  if (kind === 'check')   return <svg {...s}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></svg>;
  if (kind === 'coin')    return <svg {...s}><circle cx="12" cy="12" r="9"/><path d="M9 10c0-1.4 1.3-2.5 3-2.5s3 1.1 3 2.5-1 2-3 2.5-3 1.1-3 2.5 1.3 2.5 3 2.5 3-1.1 3-2.5"/></svg>;
  if (kind === 'shield')  return <svg {...s}><path d="M12 2l8 3v7c0 5-4 9.5-8 10-4-.5-8-5-8-10V5z"/><path d="M8 12l3 3 5-6"/></svg>;
  return null;
}

// ─────────────────────────────────────────────────────────────
// 04 — REP TIERS (deep dive)
// ─────────────────────────────────────────────────────────────
function REPDeepDive() {
  const tiers = [
    { label: 'Newcomer', range: '0 – 999',     score: 320,    desc: 'Everyone starts here.' },
    { label: 'Regular',  range: '1K – 4.9K',   score: 3200,   desc: 'You’re showing up.' },
    { label: 'Proven',   range: '5K – 9.9K',   score: 7400,   desc: 'People notice.' },
    { label: 'Legend',   range: '10K+',        score: 12480,  desc: 'You’ve earned this.' },
  ];
  return (
    <section style={{
      background: 'var(--bg)', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', filter: 'drop-shadow(0 0 60px rgba(255,97,85,0.3))' }}>
          <REPBadge score={6480} size="lg" showLabel={false} />
        </div>
        <div>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 05 / your reputation</span>
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(48px, 5.4vw, 84px)',
            fontWeight: 900, lineHeight: 0.94,
            letterSpacing: '-0.045em', margin: '18px 0 22px',
            textTransform: 'uppercase',
            textWrap: 'balance',
          }}>
            Your streak is your <span style={{ color: 'var(--coral)', fontStyle: 'italic' }}>credit score.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 32px', maxWidth: 580 }}>
            REP is your public track record. Every proof adds to it. Every miss tanks it.
            Backers look at your REP before staking coins. A high REP means people believe in you.
            That belief — from strangers — hits different.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {tiers.map((t) => (
              <div key={t.label} style={{
                display: 'grid', gridTemplateColumns: '140px 130px 1fr',
                gap: 20, alignItems: 'center',
                padding: '14px 16px',
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 8,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <REPBadge score={t.score} inline />
                </div>
                <MonoNum size={13} color="rgba(255,255,255,0.55)" weight={600}>{t.range}</MonoNum>
                <span style={{ fontSize: 14, color: '#fff' }}>{t.desc}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 05 — NO CHEATING (anti-fraud)
// ─────────────────────────────────────────────────────────────
function NoCheatingSection() {
  const D = window.PROVE_DATA;
  const scenarios = [
    { headline: 'Posted yesterday\u2019s video today.', tag: 'Timestamp check. Nope.' },
    { headline: 'Filmed the gym, didn\u2019t actually work out.', tag: 'Flagged in 4 minutes.' },
    { headline: 'Had someone else post for you.', tag: 'IP mismatch. Streak: 0.' },
  ];
  const proofs = D.proofs.slice(0, 4);
  return (
    <section style={{
      background: '#0a0a0a', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 06 / no cheating</span>
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(48px, 5.4vw, 84px)',
            fontWeight: 900, lineHeight: 0.94,
            letterSpacing: '-0.045em', margin: '18px 0 22px',
            textTransform: 'uppercase',
            textWrap: 'balance',
          }}>
            Your camera is the <span style={{ color: 'var(--coral)', fontStyle: 'italic' }}>only rule.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 36px' }}>
            No check-ins. No self-reporting. No honor system. Video or it didn’t happen. 60 seconds. Raw. Unedited. Timestamped. The community watches. Fake it and they’ll flag it. Streak gone. REP gone. No appeal.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {scenarios.map((sc, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid rgba(255,255,255,0.08)',
                borderLeft: '2px solid var(--coral)',
                padding: '14px 18px',
              }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: '#fff', marginBottom: 4 }}>{sc.headline}</div>
                <div style={{ fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--coral)' }}>→ {sc.tag}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 2×2 thumbnail grid w/ verified/flagged badges */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {proofs.map((p, i) => {
            const h = D.habits[p.habit];
            const flagged = i === 2;
            return (
              <div key={p.id} style={{
                position: 'relative', borderRadius: 10, overflow: 'hidden',
                border: '1px solid rgba(255,255,255,0.08)',
              }}>
                <BlurTile hue={h.hue} seed={i + 19} aspect="1/1" />
                <div style={{ position: 'absolute', inset: 0, background: flagged ? 'rgba(0,0,0,0.55)' : 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6))' }} />
                <div style={{
                  position: 'absolute', top: 10, left: 10,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  background: flagged ? 'rgba(255,255,255,0.08)' : 'var(--coral)',
                  color: flagged ? 'rgba(255,255,255,0.6)' : '#0D0D0D',
                  fontSize: 10, fontWeight: 700, padding: '4px 8px', borderRadius: 4,
                  letterSpacing: 0.12 + 'em', textTransform: 'uppercase', fontFamily: 'var(--mono)',
                }}>
                  {flagged ? '✕ Flagged' : '✓ Verified'}
                </div>
                {!flagged && (
                  <div style={{
                    position: 'absolute', bottom: 10, left: 10,
                    fontFamily: 'var(--mono)', fontSize: 10, color: '#fff', opacity: 0.85,
                  }}>day {p.day} · {h.label}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 06 — FAQ ACCORDION
// ─────────────────────────────────────────────────────────────
function FAQSection() {
  const [open, setOpen] = useStateExt(0);
  const qs = [
    { q: 'What happens if I miss a day?',
      a: 'Your streak resets to zero. No grace period. No streak freeze on free tier. Pro members get one Streak Shield per month — one free miss that doesn\u2019t break the streak. This strictness is the point.' },
    { q: 'Are coins real money?',
      a: 'No. Coins have no monetary value. They can\u2019t be purchased with real money and they can\u2019t be redeemed for cash. They\u2019re reputation points with a leaderboard. The bragging rights are very real though.' },
    { q: 'What stops people from faking their proof?',
      a: 'The community. Every proof is publicly visible. Other users can flag suspicious content — wrong lighting, wrong location, suspiciously short video. Flagged proofs go to moderation. Confirmed fakes: streak gone, REP penalty, possible ban. People try. They get caught.' },
    { q: 'Why is posting camera-only? Why not just check in?',
      a: 'Because check-ins let you lie. You cannot fake 60 seconds of yourself doing the thing on camera. The video is the accountability. Everything else is an honor system. We don\u2019t do honor systems.' },
    { q: 'What is the PROVE Window exactly?',
      a: 'A daily posting window from 6:00 AM to 11:59 PM local time. You must post your proof inside this window to keep your streak alive. It opens at 6AM to prevent backdating yesterday\u2019s workout. It closes before midnight to prevent you from convincing yourself that "I\u2019ll just do it tomorrow."' },
    { q: 'Is this available on Android?',
      a: 'iOS first. Android is in active development. Join via the web app to stake and follow while the Android app ships.' },
  ];
  return (
    <section style={{
      background: 'var(--bg)', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
        <h2 style={{
          fontFamily: 'var(--display)',
          fontSize: 'clamp(56px, 6vw, 96px)',
          fontWeight: 900, lineHeight: 0.92,
          letterSpacing: '-0.045em', margin: 0,
          textTransform: 'uppercase',
        }}>
          Questions<span style={{ color: 'var(--coral)' }}>.</span>
        </h2>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 09 / faq</span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        maxWidth: 1280,
      }}>
        {qs.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              border: '1px solid rgba(255,255,255,0.1)',
              background: isOpen ? 'rgba(255,97,85,0.04)' : 'rgba(255,255,255,0.02)',
              borderColor: isOpen ? 'rgba(255,97,85,0.3)' : 'rgba(255,255,255,0.1)',
              borderRadius: 8,
              transition: 'background 0.2s ease, border-color 0.2s ease',
            }}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: '100%', padding: '20px 24px',
                  background: 'transparent', border: 'none', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 16, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
                }}>
                <span style={{ fontSize: 17, fontWeight: 700 }}>{item.q}</span>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="var(--coral)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                  style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s ease' }}>
                  <path d="M5 7l4 4 4-4" />
                </svg>
              </button>
              <div style={{
                maxHeight: isOpen ? 300 : 0,
                overflow: 'hidden',
                transition: 'max-height 0.3s ease, padding 0.2s ease',
                padding: isOpen ? '0 24px 22px' : '0 24px',
              }}>
                <p style={{
                  fontSize: 15, color: 'rgba(255,255,255,0.7)',
                  lineHeight: 1.6, margin: 0,
                }}>{item.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 07 — NEW FINAL CTA
// ─────────────────────────────────────────────────────────────
function FinalCTAv2() {
  return (
    <section style={{
      background: 'var(--coral)', color: '#0D0D0D',
      padding: '160px 72px',
      position: 'relative', overflow: 'hidden',
      textAlign: 'center',
    }}>
      <div style={{
        position: 'absolute', top: -100, left: -100, right: -100, bottom: -100,
        backgroundImage: 'repeating-linear-gradient(-45deg, transparent 0 40px, rgba(0,0,0,0.04) 40px 42px)',
      }} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1180, margin: '0 auto' }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(0,0,0,0.6)', letterSpacing: 0.12 + 'em', textTransform: 'uppercase' }}>§ 10 / your move</span>
        <h2 style={{
          fontFamily: 'var(--display)', fontSize: 'clamp(72px, 9vw, 144px)',
          fontWeight: 900, letterSpacing: '-0.05em', margin: '24px 0 24px',
          textTransform: 'uppercase', lineHeight: 0.84, textWrap: 'balance',
        }}>
          The window opens at 6 AM.
        </h2>
        <p style={{
          fontFamily: 'var(--display)', fontSize: 'clamp(28px, 3.4vw, 48px)',
          fontStyle: 'italic', fontWeight: 700,
          color: 'rgba(0,0,0,0.7)', margin: '0 0 32px', lineHeight: 1.1,
        }}>Will you post?</p>
        <p style={{
          fontSize: 20, lineHeight: 1.5,
          color: 'rgba(0,0,0,0.78)',
          maxWidth: 620, margin: '0 auto 44px',
        }}>
          This is the only question that matters now. Not whether you want to get fit, or read more, or learn something new. Just: will you post tomorrow at 6 AM.
          <br /><br />
          <span style={{ color: '#0D0D0D', fontWeight: 600 }}>
            Every person who ever built a real habit answered yes one day at a time.
          </span>
        </p>

        <BigAppStoreButton />

        <div style={{ marginTop: 24, fontSize: 13, color: 'rgba(0,0,0,0.55)', fontFamily: 'var(--mono)' }}>
          Free to download · No credit card · Your first 100 coins are waiting
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 08 — NEW FOOTER (with founder note + live countdown)
// ─────────────────────────────────────────────────────────────
function FooterSectionV2() {
  const [s, setS] = useStateExt(14535);
  useEffectExt(() => {
    const t = setInterval(() => setS((v) => Math.max(0, v - 1)), 1000);
    return () => clearInterval(t);
  }, []);
  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
  const timer = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;

  return (
    <footer style={{
      background: 'var(--bg)', color: 'rgba(255,255,255,0.6)',
      padding: '80px 72px 40px',
      borderTop: '1px solid rgba(255,255,255,0.08)',
    }}>
      {/* Built by Ryon block */}
      <div style={{
        maxWidth: 800, marginBottom: 48,
        paddingBottom: 36, borderBottom: '1px solid rgba(255,255,255,0.06)',
      }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,0.4)', letterSpacing: 0.12 + 'em', textTransform: 'uppercase', fontWeight: 700 }}>
          Built by
        </span>
        <p style={{
          fontFamily: 'var(--display)',
          fontSize: 22, fontStyle: 'italic',
          fontWeight: 600, color: 'rgba(255,255,255,0.85)',
          margin: '14px 0 16px', lineHeight: 1.4, maxWidth: 720,
          letterSpacing: '-0.01em',
        }}>
          "PROVE was built by one person who got tired of tracking habits in private and quitting in private. The app you’re looking at is the proof."
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'oklch(70% 0.12 40)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0D0D0D', fontFamily: 'var(--display)', fontWeight: 700, fontSize: 12 }}>R</div>
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)' }}>— Ryon, founder</span>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 40 }}>
        <div>
          <ProveLogo size={28} color="#fff" />
          <p style={{ fontSize: 16, maxWidth: 360, marginTop: 16, lineHeight: 1.5, color: 'rgba(255,255,255,0.75)' }}>
            Built for people tired of saying they will.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 64, flexWrap: 'wrap' }}>
          {[
            { t: 'Product', l: [
                { label: 'Feed',         href: '#/feed' },
                { label: 'The Window',   anchor: 'prove-window' },
                { label: 'Leaderboard',  href: '#/leaderboard' },
                { label: 'Manifesto',    anchor: 'manifesto' },
            ] },
            { t: 'Company', l: [
                { label: 'About',   anchor: 'manifesto' },
                { label: 'Contact', mailto: 'support@tryproveit.app' },
            ] },
            { t: 'Legal',   l: [
                { label: 'Privacy',         mailto: 'support@tryproveit.app?subject=Privacy' },
                { label: 'Terms',           mailto: 'support@tryproveit.app?subject=Terms' },
                { label: 'Trust & safety',  mailto: 'support@tryproveit.app?subject=Trust' },
            ] },
          ].map((col) => (
            <div key={col.t}>
              <div style={{
                fontSize: 11, letterSpacing: 0.1 + 'em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.4)', marginBottom: 14, fontFamily: 'var(--mono)',
              }}>{col.t}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {col.l.map((item) => (
                  <li key={item.label}
                    onClick={() => {
                      if (item.href) window.location.hash = item.href.replace(/^#/, '');
                      else if (item.anchor) document.getElementById(item.anchor)?.scrollIntoView({ behavior: 'smooth' });
                      else if (item.mailto) window.location.href = 'mailto:' + item.mailto;
                    }}
                    style={{ fontSize: 14, cursor: 'pointer' }}>{item.label}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <AppStoreBadge />
      </div>
      <div style={{
        marginTop: 60, paddingTop: 24,
        borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
        fontSize: 12, fontFamily: 'var(--mono)', color: 'rgba(255,255,255,0.4)',
      }}>
        <span>© 2026 PROVE Inc.</span>
        <span style={{ color: 'rgba(255,255,255,0.65)' }}>
          The PROVE Window opens daily at your local 6:00 AM ·{' '}
          <span style={{ color: 'var(--coral)' }}>today’s window closes in {timer}</span>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  ProblemSection, ScienceSection, DayInLifeSection,
  REPDeepDive, NoCheatingSection, FAQSection, FinalCTAv2, FooterSectionV2,
});
