// Home page (`/`) — Direction C "Crew/ticket" energy, three phones in a
// dark hero strip at the bottom (per the user's screenshot).

function HomePage() {
  return (
    <SiteShell route="home">
      {/* hero — orange "ticket" */}
      <div style={{ padding: '40px' }}>
        <div style={{
          background: ORANGE, borderRadius: 28, padding: '56px 56px 64px',
          position: 'relative', overflow: 'hidden', minHeight: 720,
        }}>
          <div style={{
            position: 'absolute', right: -120, top: -120, width: 480, height: 480,
            borderRadius: '50%', background: 'rgba(255,255,255,0.08)',
          }}/>
          <div style={{
            position: 'absolute', right: -200, bottom: -200, width: 520, height: 520,
            borderRadius: '50%', border: '2px dashed rgba(255,255,255,0.18)',
          }}/>

          <div style={{ display: 'flex', justifyContent: 'space-between',
            alignItems: 'flex-start', position: 'relative' }}>
            <div style={{
              padding: '8px 14px', background: 'rgba(0,0,0,0.18)', borderRadius: 999,
              fontSize: 12, fontWeight: 700, fontFamily: 'ui-monospace, Menlo, monospace',
              letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>
              ★ Tonight's plan
            </div>
            <div style={{
              fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11,
              opacity: 0.7, letterSpacing: '0.08em', textAlign: 'right',
            }}>
              No · 0001<br/>HEL → ANY
            </div>
          </div>

          <h1 style={{
            fontSize: 156, lineHeight: 0.86, fontWeight: 800,
            letterSpacing: '-0.05em', margin: '40px 0 0', position: 'relative',
            color: '#fff',
          }}>
            Beers,<br/>
            sauna,<br/>
            <span style={{ fontStyle: 'italic', fontFamily: '"Fraunces", serif', fontWeight: 500 }}>
              whatever.
            </span>
          </h1>

          <div style={{
            position: 'absolute', bottom: 56, left: 56, right: 56,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          }}>
            <div style={{ maxWidth: 460, fontSize: 18, lineHeight: 1.5,
              color: 'rgba(255,255,255,0.92)' }}>
              The 30-second app for getting your friends to actually leave the house.
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <StoreBadge type="apple" onDark/>
              <StoreBadge type="google" onDark/>
            </div>
          </div>
        </div>
      </div>

      {/* chip strip */}
      <div style={{ padding: '20px 40px 60px' }}>
        <div style={{
          fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace',
          color: 'var(--fg-mute)', letterSpacing: '0.1em',
          marginBottom: 16,
        }}>── WHAT'S THE PLAN? ──</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {[
            'Beers', 'Coffee', 'Dinner', 'Sauna',
            'Run', 'Movie', 'Live music', 'Boardgames',
            'Sunrise', 'Bonfire', 'Hike', 'Skate',
            'Sushi', 'Photowalk', 'Pizza & gossip', '+ You name it',
          ].map((l, i) => (
            <div key={i} style={{
              padding: '12px 18px', borderRadius: 999,
              background: i === 0 ? ORANGE : 'var(--bg-soft)',
              border: i === 0 ? 'none' : '1px solid var(--hairline)',
              fontSize: 16, fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 8,
              color: i === 0 ? '#fff' : 'var(--fg)',
            }}>
              {l}
            </div>
          ))}
        </div>
      </div>

      {/* receipt + plan phone */}
      <div style={{ padding: '60px 40px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div>
          <div style={{
            fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace',
            color: ORANGE, letterSpacing: '0.1em', marginBottom: 12,
          }}>── HOW IT WORKS ──</div>
          <h2 style={{
            fontSize: 88, lineHeight: 0.92, fontWeight: 800,
            letterSpacing: '-0.04em', margin: 0, color: 'var(--fg)',
          }}>
            One screen.<br/>One question.
          </h2>
          <div style={{
            marginTop: 40, fontFamily: 'ui-monospace, Menlo, monospace',
            fontSize: 14, lineHeight: 2.2, color: 'var(--fg-soft)',
          }}>
            <ReceiptRow l="01 · Pick a vibe" r="2 sec"/>
            <ReceiptRow l="02 · Pick a time" r="3 sec"/>
            <ReceiptRow l="03 · Pick a place" r="5 sec (optional)"/>
            <ReceiptRow l="04 · Tap your crew" r="20 sec"/>
            <div style={{
              borderTop: '1px dashed var(--hairline-strong)',
              borderBottom: '1px dashed var(--hairline-strong)',
              padding: '8px 0', marginTop: 12,
              display: 'flex', justifyContent: 'space-between',
              fontWeight: 700, color: 'var(--fg)',
            }}>
              <span>TOTAL</span><span>30 sec · DONE.</span>
            </div>
          </div>
          <div style={{
            marginTop: 40, padding: 24, background: 'var(--bg-soft)',
            border: '1px dashed var(--hairline-strong)', borderRadius: 16,
          }}>
            <div style={{ fontSize: 14, lineHeight: 1.5,
              color: 'var(--fg-soft)' }}>
              <span style={{ color: ORANGE, fontWeight: 700 }}>The boring promise:</span> no infinite feed, no doomscrolling, no "happy birthday" notifications you don't care about. Open Evnted to make a thing happen — close it when you're done.
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame screen={<PhonePlan/>}/>
        </div>
      </div>

      {/* THREE PHONES at bottom — matches user's screenshot */}
      <div style={{ padding: '80px 0 0', overflow: 'hidden' }}>
        <div style={{
          fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace',
          color: ORANGE, letterSpacing: '0.1em', textAlign: 'center',
          marginBottom: 40,
        }}>── THE WHOLE APP ──</div>
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 24,
          alignItems: 'flex-end', padding: '0 40px',
          marginBottom: -200, // crop the bottom of phones for the strip look
        }}>
          <div style={{ marginBottom: 30 }}>
            <PhoneFrame screen={<PhoneSplash/>} small/>
          </div>
          <PhoneFrame screen={<PhoneHome/>}/>
          <div style={{ marginBottom: 30 }}>
            <PhoneFrame screen={<PhoneDiscover/>} small/>
          </div>
        </div>
        {/* strip floor — matches the photo */}
        <div style={{
          marginTop: 200, height: 12, background: 'var(--hairline-strong)',
          borderTop: '1px solid var(--hairline)',
        }}/>
      </div>

      {/* big CTA */}
      <div style={{ padding: '80px 40px', background: 'var(--bg)' }}>
        <div style={{
          padding: '88px 56px', borderRadius: 28,
          border: '2px dashed var(--hairline-strong)',
          background: 'var(--bg-soft)',
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 13,
            color: ORANGE, letterSpacing: '0.12em', marginBottom: 16,
          }}>✂ -- TEAR HERE -- ✂</div>
          <h2 style={{
            fontSize: 96, lineHeight: 0.92, fontWeight: 800,
            letterSpacing: '-0.04em', margin: 0, color: 'var(--fg)',
          }}>
            Get the app.<br/>
            <span style={{ color: ORANGE, fontStyle: 'italic',
              fontFamily: '"Fraunces", serif', fontWeight: 500 }}>
              Get the crew.
            </span>
          </h2>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center',
            marginTop: 40 }}>
            <StoreBadge type="apple"/>
            <StoreBadge type="google"/>
          </div>
        </div>
      </div>
    </SiteShell>
  );
}

function ReceiptRow({ l, r }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between',
      borderBottom: '1px dashed var(--hairline)' }}>
      <span>{l}</span><span style={{ color: 'var(--fg-mute)' }}>{r}</span>
    </div>
  );
}

function PhoneFrame({ screen, small = false, accent = false }) {
  const w = small ? 240 : 360;
  const h = small ? 510 : 760;
  return (
    <div style={{
      width: w, height: h, padding: 8, borderRadius: 44,
      background: '#1a1a1c',
      boxShadow: accent
        ? '0 30px 80px rgba(232,99,58,0.25), 0 0 0 1px rgba(255,255,255,0.06)'
        : '0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06)',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 36,
        overflow: 'hidden', background: '#000',
      }}>{screen}</div>
      <div style={{
        position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)',
        width: small ? 76 : 96, height: small ? 22 : 28, background: '#000',
        borderRadius: 999, zIndex: 2,
      }}/>
    </div>
  );
}

Object.assign(window, { HomePage, ReceiptRow, PhoneFrame });