// Marketing site — social proof, pricing, FAQ, footer.

// ===================================================================
// HOW IT WORKS — split layout with stepped device snippets
// ===================================================================
function HowItWorks() {
  const steps = [
    {
      n: '01', title: 'Pick the apps that own you',
      body: 'Instagram. TikTok. X. Reddit. Whatever your kryptonite is. You can pick a curated preset or hand-pick exactly what gets locked.',
      tone: '#ff465a',
    },
    {
      n: '02', title: 'Invite friends and stake ELO',
      body: 'Share a one-tap join link. Each player puts down ELO they\'re willing to lose. The bigger the stake, the bigger the climb when you win.',
      tone: '#a378ff',
    },
    {
      n: '03', title: 'Last one not scrolling wins',
      body: 'Apps disappear. The clock starts. The first person to crack is out — everyone else takes a slice. Live updates so you know who broke and when.',
      tone: '#5ae6c8',
    },
  ];
  return (
    <section id="how-it-works" style={{ padding: '120px 32px 80px', position: 'relative',
      background: 'linear-gradient(180deg, transparent 0%, rgba(15,10,30,0.5) 50%, transparent 100%)',
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="How it works"
          title={<>Three steps from <GradWord>doom-scrolling</GradWord> to ranked.</>}
          align="center"
        />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, position: 'relative' }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'flex', gap: 24, alignItems: 'flex-start',
              padding: '32px 28px',
              borderRadius: 22,
              background: 'rgba(255,255,255,0.025)',
              border: '1px solid rgba(255,255,255,0.06)',
              position: 'relative',
            }}>
              <div style={{
                fontSize: 'clamp(48px, 7vw, 84px)', fontWeight: 700, letterSpacing: '-0.04em',
                fontVariantNumeric: 'tabular-nums', lineHeight: 0.9,
                background: `linear-gradient(180deg, ${s.tone}, ${s.tone}40)`,
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                minWidth: 110, textAlign: 'left',
              }}>{s.n}</div>
              <div style={{ flex: 1, paddingTop: 10 }}>
                <h3 style={{
                  fontSize: 'clamp(22px, 2.4vw, 30px)', fontWeight: 600,
                  letterSpacing: '-0.02em', margin: 0, color: '#fff',
                }}>{s.title}</h3>
                <p style={{
                  marginTop: 10, fontSize: 16, lineHeight: 1.55, color: '#9089b3',
                  maxWidth: 640,
                }}>{s.body}</p>
              </div>
              <div style={{
                width: 12, height: 12, borderRadius: '50%',
                background: s.tone, alignSelf: 'center',
                boxShadow: `0 0 24px ${s.tone}`,
                flexShrink: 0,
              }}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// TESTIMONIALS
// ===================================================================
function Testimonials() {
  const quotes = [
    {
      handle: 'maya', tone: 'lucid', glyph: 'eye', elo: 1820,
      body: 'I\'ve uninstalled Instagram four times. Vault is the only thing that made it stick — because now my friends will literally laugh at me if I crack.',
    },
    {
      handle: 'jules', tone: 'seeker', glyph: 'compass', elo: 1554,
      body: 'My group chat replaced "wanna grab coffee" with "wanna vault for two hours." I\'ve read more books in three weeks than the last three years.',
    },
    {
      handle: 'tomás', tone: 'clairvoyant', glyph: 'crystal', elo: 2104,
      body: 'The ELO is a real drug. I will gladly skip a lunch break to defend my Clairvoyant rank from a Seeker who thinks they can take me.',
    },
    {
      handle: 'priya', tone: 'scroller', glyph: 'feed', elo: 1308,
      body: 'I went from 7 hrs/day on TikTok to 90 minutes. The wild part is I didn\'t even try — I just wanted the avatar.',
    },
    {
      handle: 'kai', tone: 'addicted', glyph: 'phone', elo: 1140,
      body: 'I keep losing. I keep playing. I think the app is fixing my brain by exploiting the same thing TikTok was using to break it. Iconic.',
    },
    {
      handle: 'sam', tone: 'lucid', glyph: 'eye', elo: 1782,
      body: 'My boyfriend and I do a nightly "couple vault" before bed. Best thing for our relationship since I quit cigarettes.',
    },
  ];
  return (
    <section style={{ padding: '120px 32px 80px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="In the wild"
          title={<>Real users, <GradWord>real screenshots avoided.</GradWord></>}
          sub="What people are saying after their first week of ranked play."
          maxWidth={760}
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 18,
        }}>
          {quotes.map((q, i) => <QuoteCard key={i} {...q}/>)}
        </div>
      </div>
    </section>
  );
}

function QuoteCard({ handle, tone, glyph, elo, body }) {
  const p = RANK_PALETTES[tone];
  return (
    <div style={{
      padding: 26,
      borderRadius: 20,
      background: 'rgba(255,255,255,0.025)',
      border: '1px solid rgba(255,255,255,0.06)',
      display: 'flex', flexDirection: 'column', gap: 18,
    }}>
      <p style={{
        margin: 0, fontSize: 16, lineHeight: 1.55, color: '#d4cdef',
        fontWeight: 400, letterSpacing: '-0.005em', textWrap: 'pretty',
      }}>"{body}"</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
        <Avatar avatar={{ id: handle, glyph }} tone={tone} size={36}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>@{handle}</div>
          <div style={{ fontSize: 11, color: p.hi, fontWeight: 600, letterSpacing: '0.04em',
            fontVariantNumeric: 'tabular-nums' }}>
            {p.name} · {elo} ELO
          </div>
        </div>
      </div>
    </div>
  );
}

// ===================================================================
// PRICING
// ===================================================================
function Pricing() {
  return (
    <section id="pricing" style={{ padding: '120px 32px 80px', position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(800px 500px at 50% 50%, rgba(255,180,90,0.08), transparent 60%)',
      }}/>
      <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="Pricing"
          title={<>Free to play. <GradWord from="#ffe6c0" via="#ffbe64" to="#ff9050">Pro to dominate.</GradWord></>}
          sub="Vault is free forever — host challenges, climb the ladder, unlock the default avatar set. Pro adds bigger lobbies, faster XP, and the rare avatars."
          align="center"
        />

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 18,
          maxWidth: 880, margin: '0 auto',
        }}>
          <PriceCard
            tier="Free"
            price="$0"
            cadence="forever"
            tagline="Everything you need to get ranked."
            features={[
              { ok: true, t: 'Host challenges with up to 3 friends' },
              { ok: true, t: 'Real ELO + global ladder' },
              { ok: true, t: '5 default avatars (one per rank)' },
              { ok: true, t: 'Streaks + history' },
              { ok: false, t: '4–8 player lobbies' },
              { ok: false, t: '2× XP boost' },
              { ok: false, t: '10 rare avatars' },
            ]}
            cta="Get the app"
            ghost
          />
          <PriceCard
            tier="Pro"
            price="$3.99"
            cadence="per month"
            yearlyHint="or $28.70/yr — save 40%"
            tagline="For people who play to win."
            features={[
              { ok: true, t: 'Everything in Free' },
              { ok: true, t: 'Lobbies up to 8 players' },
              { ok: true, t: '2× XP boost on every win' },
              { ok: true, t: '10 rare avatars (Symbol + Cosmos)' },
              { ok: true, t: 'Custom challenge templates' },
              { ok: true, t: 'Detailed insights & exports' },
              { ok: true, t: 'Priority lobby slots' },
            ]}
            cta="Try 3 days free"
            highlight
          />
        </div>

        <div style={{
          marginTop: 28, textAlign: 'center', fontSize: 13, color: '#7a759a',
        }}>
          Cancel anytime. No charge during trial.
        </div>
      </div>
    </section>
  );
}

function PriceCard({ tier, price, cadence, yearlyHint, tagline, features, cta, ghost, highlight }) {
  return (
    <div style={{
      position: 'relative',
      padding: 32,
      borderRadius: 26,
      background: highlight
        ? `radial-gradient(180% 120% at 30% 0%, rgba(255,178,87,0.18) 0%, transparent 55%), linear-gradient(180deg, rgba(50,30,15,0.65), rgba(20,10,5,0.55))`
        : 'linear-gradient(180deg, rgba(30,20,60,0.45), rgba(15,10,30,0.4))',
      border: highlight ? '1px solid rgba(255,178,87,0.35)' : '1px solid rgba(255,255,255,0.08)',
      boxShadow: highlight ? '0 30px 80px -30px rgba(255,140,50,0.45)' : 'none',
    }}>
      {highlight && (
        <div style={{
          position: 'absolute', top: 18, right: 20,
          padding: '4px 10px', borderRadius: 999,
          fontSize: 10, fontWeight: 800, letterSpacing: '0.18em', color: '#ffd9b0',
          background: 'rgba(255,178,87,0.15)', border: '1px solid rgba(255,178,87,0.4)',
        }}>POPULAR</div>
      )}
      <div style={{
        fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: highlight ? '#ffbe64' : '#a378ff',
      }}>Vault {tier}</div>

      <div style={{ marginTop: 18, display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <div style={{
          fontSize: 56, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1,
          background: highlight
            ? 'linear-gradient(135deg,#fff,#ffd9b0)'
            : 'linear-gradient(135deg,#fff,#c8a6ff)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        }}>{price}</div>
        <div style={{ fontSize: 14, color: '#9089b3', paddingBottom: 8 }}>{cadence}</div>
      </div>
      {yearlyHint && (
        <div style={{ marginTop: 6, fontSize: 12, color: '#ffd9b0', fontWeight: 500 }}>{yearlyHint}</div>
      )}
      <div style={{ marginTop: 14, fontSize: 14, color: '#aaa3cc', lineHeight: 1.45 }}>{tagline}</div>

      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {features.map((f, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 14, color: f.ok ? '#d4cdef' : '#5a5478',
          }}>
            {f.ok ? (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="8" cy="8" r="7" fill={highlight ? 'rgba(255,178,87,0.2)' : 'rgba(122,68,238,0.25)'}/>
                <path d="M5 8.2 7.2 10.5 11.4 6" stroke={highlight ? '#ffd9b0' : '#c8a6ff'} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            ) : (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="8" cy="8" r="7" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
              </svg>
            )}
            <span style={{ textDecoration: f.ok ? 'none' : 'none' }}>{f.t}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28 }}>
        {ghost ? (
          <a href="#" style={{
            display: 'block', padding: '14px', textAlign: 'center',
            borderRadius: 14, fontSize: 14, fontWeight: 600,
            color: '#fff', textDecoration: 'none',
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.12)',
          }}>{cta}</a>
        ) : (
          <a href="#" style={{
            display: 'block', padding: '14px', textAlign: 'center',
            borderRadius: 14, fontSize: 14, fontWeight: 700,
            color: '#1a0f00', textDecoration: 'none',
            background: 'linear-gradient(135deg, #ffd9b0 0%, #ffbe64 100%)',
            boxShadow: '0 14px 36px -10px rgba(255,140,50,0.55), inset 0 1px 0 rgba(255,255,255,0.4)',
          }}>{cta}</a>
        )}
      </div>
    </div>
  );
}

// ===================================================================
// FAQ
// ===================================================================
function FAQ() {
  const items = [
    {
      q: 'Is this just another Screen Time app?',
      a: 'No. Screen Time apps tell you you\'re using your phone too much, then you ignore them. Vault makes the cost social — your friends see when you crack, and you lose ELO. The accountability is the product.',
    },
    {
      q: 'How does the blocking actually work?',
      a: 'Vault uses iOS Screen Time + Android Digital Wellbeing APIs to make blocked apps unlaunchable for the duration of a challenge. There\'s no bypass, including disabling Vault — that auto-forfeits the round.',
    },
    {
      q: 'What happens if my battery dies or I lose signal?',
      a: 'The block runs locally on your device, so signal doesn\'t matter. If your phone dies, the round pauses for you — when you turn it back on, the timer picks up where it left off, with a 60-second grace.',
    },
    {
      q: 'Can I play solo?',
      a: 'Yes — solo challenges count toward streaks and unlock avatars, but they don\'t move ELO. The ladder is strictly multiplayer. We think you\'ll find solo gets boring fast.',
    },
    {
      q: 'How do you make money?',
      a: 'Vault Pro subscriptions, full stop. We do not sell data, run ads, or ever insert anything into your feed. The product would not work if we were trying to keep you in the app.',
    },
    {
      q: 'What if my friend uses Android and I use iOS?',
      a: 'Cross-platform from day one. Lobbies, ELO, and the leaderboard are unified. The blocking implementation differs under the hood, but the experience is identical.',
    },
  ];
  return (
    <section id="faq" style={{ padding: '120px 32px 80px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="Questions"
          title="The honest FAQ."
          align="center"
        />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((it, i) => <FAQItem key={i} {...it} defaultOpen={i === 0}/>)}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, defaultOpen }) {
  const [open, setOpen] = useState(!!defaultOpen);
  return (
    <div style={{
      borderRadius: 16,
      background: open ? 'rgba(122,68,238,0.06)' : 'rgba(255,255,255,0.025)',
      border: `1px solid ${open ? 'rgba(163,120,255,0.2)' : 'rgba(255,255,255,0.06)'}`,
      transition: 'background 0.2s, border-color 0.2s',
      overflow: 'hidden',
    }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: '100%', padding: '20px 24px',
        background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        textAlign: 'left', color: '#fff',
        font: 'inherit',
      }}>
        <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.005em' }}>{q}</span>
        <span style={{
          width: 24, height: 24, flexShrink: 0,
          borderRadius: '50%',
          background: open ? 'rgba(163,120,255,0.25)' : 'rgba(255,255,255,0.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform 0.25s', transform: open ? 'rotate(45deg)' : 'rotate(0)',
          color: open ? '#c8a6ff' : '#aaa3cc',
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
        </span>
      </button>
      {open && (
        <div style={{
          padding: '0 24px 22px', fontSize: 15, lineHeight: 1.6, color: '#aaa3cc',
          maxWidth: 720, textWrap: 'pretty',
        }}>{a}</div>
      )}
    </div>
  );
}

// ===================================================================
// FINAL CTA
// ===================================================================
function FinalCTA() {
  return (
    <section style={{ padding: '40px 32px 120px', position: 'relative' }}>
      <div style={{
        position: 'relative', maxWidth: 1080, margin: '0 auto',
        padding: 'clamp(48px, 8vw, 96px) clamp(28px, 5vw, 64px)',
        borderRadius: 32,
        background: `
          radial-gradient(120% 90% at 20% 20%, rgba(163,120,255,0.35) 0%, transparent 55%),
          radial-gradient(120% 90% at 80% 80%, rgba(255,178,87,0.18) 0%, transparent 55%),
          linear-gradient(135deg, #1a0f3d 0%, #0c0820 100%)
        `,
        border: '1px solid rgba(200,166,255,0.25)',
        overflow: 'hidden',
      }}>
        {/* deco starfield */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.6,
          backgroundImage: `radial-gradient(1px 1px at 30% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #c8a6ff, transparent), radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 85% 30%, #fff, transparent)`,
        }}/>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }} className="cta-grid">
          <div>
            <Eyebrow color="#5ae6c8">Ready when you are</Eyebrow>
            <h2 style={{
              marginTop: 20, fontSize: 'clamp(36px, 4.5vw, 56px)',
              fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.05,
              color: '#fff', margin: '20px 0 0',
            }}>
              Lock the vault.<br/>
              <GradWord>Let the climb begin.</GradWord>
            </h2>
            <p style={{
              marginTop: 16, fontSize: 17, lineHeight: 1.55, color: '#aaa3cc',
              maxWidth: 520,
            }}>
              Free to download. Free to play. Free to crush your group chat.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <AppStoreBadge store="apple"/>
            <AppStoreBadge store="google"/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// FOOTER
// ===================================================================
function Footer() {
  const linkStyle = {
    fontSize: 13, color: '#aaa3cc', textDecoration: 'none', transition: 'color 0.2s',
  };
  const hover = (color) => (e) => { e.currentTarget.style.color = color; };
  return (
    <footer style={{
      padding: '48px 32px 32px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      background: 'rgba(7,4,14,0.7)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <VaultLogo size={28} idSuffix="footer"/>
            <span style={{ fontSize: 16, fontWeight: 700, color: '#fff' }}>Vault</span>
          </div>
          <nav style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="/terms" style={linkStyle}
              onMouseEnter={hover('#fff')} onMouseLeave={hover('#aaa3cc')}
            >Terms of Service</a>
            <a href="/privacy" style={linkStyle}
              onMouseEnter={hover('#fff')} onMouseLeave={hover('#aaa3cc')}
            >Privacy Policy</a>
            <a href="mailto:chriscui1203@gmail.com" style={linkStyle}
              onMouseEnter={hover('#fff')} onMouseLeave={hover('#aaa3cc')}
            >Contact</a>
          </nav>
        </div>
        <div style={{
          marginTop: 32, paddingTop: 20,
          borderTop: '1px solid rgba(255,255,255,0.05)',
          fontSize: 12, color: '#5a5478',
        }}>
          © 2026 Vault. Climb out of your phone.
        </div>
      </div>
    </footer>
  );
}

window.HowItWorks = HowItWorks;
window.Testimonials = Testimonials;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
