// landing.jsx — The go marketing site
// Switchable visual direction via Tweaks.

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "editorial",
  "showFrames": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply direction to <html>
  useEffect(() => {
    document.documentElement.setAttribute('data-direction', t.direction);
  }, [t.direction]);

  return (
    <>
      <div className="page">
        <Nav direction={t.direction} />
        <Hero />
        <Marquee />
        <HowItWorks />
        <ScreensGallery />
        <MoreScreens />
        <FoundersNote />
        <ActivitiesCloud />
        <PreLaunchBand />
        <CTABand />
        <Footer />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual direction">
          <TweakRadio
            value={t.direction}
            onChange={(v) => setTweak('direction', v)}
            options={[
              { value: 'editorial', label: 'editorial' },
              { value: 'magazine', label: 'magazine' },
              { value: 'after-dark', label: 'dark' },
            ]}
          />
          <div style={{ fontSize: 11, lineHeight: 1.45, color: 'var(--ink-3)', marginTop: 8, fontFamily: 'var(--sans)' }}>
            <strong style={{ color: 'var(--ink)' }}>editorial</strong> — refined cream / terracotta (safe). <br />
            <strong style={{ color: 'var(--ink)' }}>magazine</strong> — pushed: bolder ink type, italic display, denser. <br />
            <strong style={{ color: 'var(--ink)' }}>dark</strong> — espresso bg, cream type, glowing terracotta (stretch).
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Waitlist — email + city, with success state
// ─────────────────────────────────────────────────────────────
// Domains commonly used by throwaway/temporary inboxes. Not exhaustive —
// the goal is to filter the lazy bot traffic, not block every disposable
// service (that's a losing battle and bad for real users on niche providers).
const DISPOSABLE_DOMAINS = new Set([
  'mailinator.com', 'guerrillamail.com', 'sharklasers.com', 'yopmail.com',
  '10minutemail.com', 'tempmail.com', 'temp-mail.org', 'getnada.com',
  'maildrop.cc', 'trashmail.com', 'throwawaymail.com', 'dispostable.com',
  'fakeinbox.com', 'mailcatch.com', 'mintemail.com', 'mohmal.com',
  'spam4.me', 'spambox.us', 'tempinbox.com', 'mvrht.net', 'mytrashmail.com',
]);

function isDisposable(email) {
  const domain = email.split('@')[1]?.toLowerCase();
  return domain ? DISPOSABLE_DOMAINS.has(domain) : false;
}

function WaitlistForm({ compact = false }) {
  const [email, setEmail] = useState('');
  const [city, setCity] = useState('london');
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  // Honeypot — bots fill every input. Real users never see this field.
  const [hp, setHp] = useState('');
  // Loaded-at timestamp — block submissions made in under 2 seconds
  // (bots auto-submit immediately; humans need time to type).
  const loadedAtRef = useRef(Date.now());

  const validShape    = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const validDomain   = !isDisposable(email.trim());
  const valid         = validShape && validDomain;

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || submitting) return;

    // Honeypot triggered → silently accept (so bots think they succeeded
    // and stop hammering) but write nothing.
    if (hp) { setSubmitted(true); return; }

    // Too-fast submit → silently accept, write nothing.
    if (Date.now() - loadedAtRef.current < 2000) { setSubmitted(true); return; }

    setSubmitting(true);
    try {
      if (window.firebase?.firestore) {
        await firebase.firestore().collection('waitlist').add({
          email: email.trim().toLowerCase(),
          city,
          createdAt: firebase.firestore.FieldValue.serverTimestamp(),
          userAgent: navigator.userAgent,
          referrer: document.referrer || null,
        });
      }
    } catch (err) {
      console.error('waitlist write failed:', err);
    } finally {
      setSubmitting(false);
      setSubmitted(true);
    }
  };

  if (submitted) {
    return (
      <div className={`waitlist-success ${compact ? 'compact' : ''}`}>
        <div className="waitlist-success-check">✓</div>
        <div>
          <div className="waitlist-success-title">you're on the list.</div>
          <div className="waitlist-success-sub">
            we'll email when go opens in {city.replace(/\b\w/g, c => c.toUpperCase())}.
            no spam, ever. <a href="#" style={{ color: 'var(--accent)', textDecoration: 'underline' }}>tell a friend?</a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className={`waitlist-form ${compact ? 'compact' : ''}`}>
      {/* Honeypot: invisible to humans, irresistible to bots. Any value
          here means we silently drop the submission. Positioned off-screen
          rather than display:none — some bots skip hidden fields. */}
      <input
        type="text"
        name="website"
        tabIndex={-1}
        autoComplete="off"
        value={hp}
        onChange={(e) => setHp(e.target.value)}
        style={{ position: 'absolute', left: '-9999px', top: 'auto', width: 1, height: 1, opacity: 0 }}
        aria-hidden="true"
      />
      <div className="waitlist-fields">
        <label className="waitlist-field email-field">
          <span className="waitlist-label">EMAIL</span>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@somewhere.com"
            required
          />
          {validShape && !validDomain && (
            <span style={{
              display: 'block',
              fontSize: 11, color: 'var(--accent-deep)',
              fontFamily: 'var(--sans)', marginTop: 6,
            }}>
              that looks like a throwaway address — give us a real one and we'll never spam it.
            </span>
          )}
        </label>
        <label className="waitlist-field city-field">
          <span className="waitlist-label">CITY</span>
          <select value={city} onChange={(e) => setCity(e.target.value)}>
            <option value="london">london</option>
            <option value="new-york">new york</option>
            <option value="paris">paris</option>
            <option value="berlin">berlin</option>
            <option value="amsterdam">amsterdam</option>
            <option value="other">somewhere else</option>
          </select>
          <span className="waitlist-chev">▾</span>
        </label>
      </div>
      <button
        type="submit"
        disabled={!valid || submitting}
        className="btn btn-accent btn-lg waitlist-submit"
      >
        {submitting ? 'saving…' : 'save my spot →'}
      </button>
      <div className="waitlist-store-row">
        <div className="waitlist-fineprint">
          download when we open:
        </div>
        <div className="store-greyed-row">
          <div className="store-greyed">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
            App Store
            <span className="soon-tag">soon</span>
          </div>
          <div className="store-greyed">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 9.48l1.84-3.18a.4.4 0 00-.7-.39l-1.86 3.22a11.43 11.43 0 00-9.76 0L5.26 5.91a.4.4 0 00-.7.39L6.4 9.48A10.86 10.86 0 001 18h22a10.86 10.86 0 00-5.4-8.52zM7 15.25a.94.94 0 11.94-.94.94.94 0 01-.94.94zm10 0a.94.94 0 11.94-.94.94.94 0 01-.94.94z"/></svg>
            Google Play
            <span className="soon-tag">soon</span>
          </div>
        </div>
      </div>
    </form>
  );
}

// ─────────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="container">
        <div className="nav-row">
          <LogoWordmark size={28} color="var(--ink)" />
          <div className="nav-links">
            <a href="#how">how it works</a>
            <a href="#screens">screens</a>
            <a href="#activities">activities</a>
            <a href="#brand">brand</a>
            <a href="#waitlist">join the waitlist</a>
          </div>
          <a className="btn btn-accent" href="#waitlist">join the waitlist →</a>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// Phone helper — handles top inset for status bars
// ─────────────────────────────────────────────────────────────
function Phone({ device = 'ios', width, height, children }) {
  if (device === 'ios') {
    return (
      <div className="phone-frame">
        <IOSDevice width={width} height={height}>
          <div style={{ paddingTop: 50, minHeight: '100%', boxSizing: 'border-box' }}>
            {children}
          </div>
        </IOSDevice>
      </div>
    );
  }
  return (
    <div className="phone-frame">
      <AndroidDevice width={width} height={height}>
        <div style={{ paddingTop: 0, minHeight: '100%', boxSizing: 'border-box', overflow: 'hidden' }}>
          {children}
        </div>
      </AndroidDevice>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero
// ─────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-eyebrow-row">
              <div className="eyebrow">london · soft launch · summer 2026</div>
              <span style={{ color: 'var(--accent)', fontSize: 18 }}>●</span>
            </div>
            <h1 className="hero-headline">
              actually{' '}
              <span style={{ position: 'relative', display: 'inline-block', whiteSpace: 'nowrap' }}>
                catch&nbsp;up.
                <svg width="100%" height="14" viewBox="0 0 400 14" preserveAspectRatio="none" style={{ position: 'absolute', left: 0, right: 0, bottom: -8, color: 'var(--accent)' }}>
                  <path d="M4 9 Q 80 1, 160 7 T 320 6 T 396 5" stroke="currentColor" strokeWidth="4" fill="none" strokeLinecap="round" />
                </svg>
              </span><br />
              <em>meet</em> people<br />
              nearby.
            </h1>
            <p className="hero-sub">
              the friend ten minutes away you haven't seen in a year. the neighbour two streets over who also plays tennis on sundays. <span style={{ color: 'var(--ink)', fontWeight: 600 }}>go</span> is one quiet app for both — a tap to make this week's catch-up happen, and a map of what's on nearby that you can join with one button.
            </p>
            <div className="hero-cta-row">
              <WaitlistForm compact />
            </div>
            <div className="hero-meta">
              <span>iOS + Android · summer '26</span>
              <span style={{ color: 'var(--rule)' }}>·</span>
              <span>london first</span>
              <span style={{ color: 'var(--rule)' }}>·</span>
              <span>no ads · free</span>
            </div>
          </div>
          <div className="hero-phones">
            <div className="phone-wrap back">
              <Phone device="android" width={282} height={612}>
                <ExploreScreen neighborhood="hampstead" />
              </Phone>
            </div>
            <div className="phone-wrap front">
              <Phone device="ios" width={294} height={644}>
                <ExploreScreen />
              </Phone>
            </div>
            {/* annotation tag */}
            <div style={{
              position: 'absolute',
              top: 24, right: -12,
              transform: 'rotate(4deg)',
              fontFamily: 'var(--hand)',
              fontSize: 20,
              color: 'var(--accent)',
              maxWidth: 140,
              lineHeight: 1.05,
              textAlign: 'left',
            }}>
              27 things to do<br />in walking distance
              <svg width="60" height="40" viewBox="0 0 60 40" style={{ marginTop: -2, marginLeft: -22, transform: 'rotate(8deg)' }}>
                <path d="M5 8 Q 20 20, 32 32 M 32 32 l -4 -6 M 32 32 l -8 -2" stroke="var(--accent)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
              </svg>
            </div>
            <div style={{
              position: 'absolute',
              bottom: -10, left: -36,
              transform: 'rotate(-3deg)',
              fontFamily: 'var(--hand)',
              fontSize: 20,
              color: 'var(--accent)',
              maxWidth: 160,
              lineHeight: 1.05,
            }}>
              one tap. you're in.
              <svg width="80" height="40" viewBox="0 0 80 40" style={{ marginTop: -2, transform: 'rotate(-12deg)' }}>
                <path d="M70 8 Q 50 22, 20 30 M 20 30 l 8 -2 M 20 30 l 4 6" stroke="var(--accent)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Marquee (activities scroll)
// ─────────────────────────────────────────────────────────────
function Marquee() {
  const items = [
    'pickup hoops', 'catan night', 'life drawing', 'salsa social', 'sourdough workshop',
    'sunrise run', 'pub quiz', 'pottery', 'bouldering', 'spanish exchange',
    'open mic', 'tennis doubles', 'wild swim', 'pasta night', 'book club',
    'photography walk', 'chess club', 'foraging walk', 'pickleball', 'wine tasting',
  ];
  // Duplicate for seamless loop
  const track = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>
          {track.map((item, i) => (
            <React.Fragment key={i}>
              <span>{item}</span>
              <span className="dot">●</span>
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// How it works
// ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      num: '01',
      title: 'tell us what you\'re into.',
      body: 'pick from 600+ activities — sports, games, food, dance, anything. we don\'t care if it sounds niche. that\'s the point.',
      icon: 'tag',
    },
    {
      num: '02',
      title: 'we surface what\'s nearby.',
      body: 'no doomscroll. you see things you\'d actually go to, mapped to the streets you walk. tonight, tomorrow, this weekend.',
      icon: 'map',
    },
    {
      num: '03',
      title: 'you say "i\'m in".',
      body: 'one tap. you\'re in the group chat. the host knows you\'re coming. you show up. you meet people. that\'s it.',
      icon: 'arrow',
    },
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">how it works</div>
            <h2 className="title">three taps,<br />not three weeks.</h2>
          </div>
          <p className="lede">
            most apps want you to swipe forever. go is built to get you off the app —
            into a park, a pub, a studio — with people you'll actually like, in time
            you'd otherwise spend scrolling.
          </p>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={i} className="how-card">
              <span className="num">{s.num}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Screens gallery — 4 screens (welcome, event detail, chat, profile)
// ─────────────────────────────────────────────────────────────
function ScreensGallery() {
  return (
    <section className="section tight" id="screens">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">the app, end to end</div>
            <h2 className="title">quiet, fast,<br /><em className="italic-display">unpushy</em>.</h2>
          </div>
          <p className="lede">
            no swiping. no streaks. no "you have 3 likes!" notifications.
            just a map, a list, and a single button: <em>I'm in.</em>
          </p>
        </div>

        <div className="screens-row">
          <ScreenCell
            tone="ios"
            title="onboarding"
            kicker="600+ activities"
            body="tell us your activities. tap a category for hundreds more. we won't spam — we'll just stop showing you stuff you don't care about."
          >
            <Phone device="ios" width={270} height={580}><OnboardingScreen /></Phone>
          </ScreenCell>

          <ScreenCell
            tone="android"
            title="event detail"
            kicker="one big button"
            body="who's hosting. who's going. the warm fact ('most come solo'). one big button. the map only shows up once you're in."
          >
            <Phone device="android" width={264} height={566}>
              <EventDetailScreen />
            </Phone>
          </ScreenCell>

          <ScreenCell
            tone="ios"
            title="event chat"
            kicker="auto-archives"
            body="every event is a tiny group chat. it disappears when the event ends. no friend-request rituals — you just talk to the people you're meeting."
          >
            <Phone device="ios" width={270} height={580}><ChatScreen /></Phone>
          </ScreenCell>

          <ScreenCell
            tone="android"
            title="profile"
            kicker="no bio · just what you do"
            body="you're more than a bio. you're what you do. a quiet feed of where you've been, who you met, and what's coming up."
          >
            <Phone device="android" width={264} height={566}>
              <ProfileScreen />
            </Phone>
          </ScreenCell>
        </div>
      </div>
    </section>
  );
}

function ScreenCell({ tone, title, kicker, body, children }) {
  return (
    <div className="screen-cell">
      <div className="frame">{children}</div>
      <div className="caption">
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6,
          fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--on-page-mute)', fontFamily: 'var(--sans)',
        }}>
          <span>{tone === 'ios' ? 'iOS' : 'Android'}</span>
          <span style={{ color: 'var(--accent)' }}>●</span>
          <span>{kicker}</span>
        </div>
        <h4>{title}</h4>
        <p>{body}</p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// More screens — empty state, filter, create, map detail
// ─────────────────────────────────────────────────────────────
function MoreScreens() {
  return (
    <section className="section tight" id="more-screens" style={{ borderTop: '1px solid var(--rule)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">other moments</div>
            <h2 className="title">the bits<br />between<br /><em className="italic-display">the big tap.</em></h2>
          </div>
          <p className="lede">
            you'll spend most of your time deciding, filtering, planning. these
            screens get out of your way — single colour, single button, single
            decision per step.
          </p>
        </div>
        <div className="screens-row">
          <ScreenCell
            tone="ios"
            title="filters"
            kicker="four switches, not forty"
            body="when, how far, what kind, what mood. that's the whole screen. one slider for distance — no toggles you'll forget."
          >
            <Phone device="ios" width={270} height={580}><FilterScreen /></Phone>
          </ScreenCell>

          <ScreenCell
            tone="android"
            title="zoomed map"
            kicker="pin → peek → in"
            body="tap a pin, the sheet rises. one swipe up to read more, one tap to be in. the map never goes away unless you want it to."
          >
            <Phone device="android" width={264} height={566}><MapDetailScreen /></Phone>
          </ScreenCell>

          <ScreenCell
            tone="ios"
            title="empty state"
            kicker="be the spark"
            body="nothing nearby? we don't punish you for being early. we hand you the pencil and say — start something. people will come."
          >
            <Phone device="ios" width={270} height={580}><EmptyStateScreen /></Phone>
          </ScreenCell>

          <ScreenCell
            tone="android"
            title="plan something"
            kicker="four fields. no form."
            body="activity, when, where, who. no character minimums, no required fields. write three sentences and you've made an event."
          >
            <Phone device="android" width={264} height={566}><CreateEventScreen /></Phone>
          </ScreenCell>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Founder's note — the manifesto
// ─────────────────────────────────────────────────────────────
function FoundersNote() {
  return (
    <section className="section founder-section" id="why">
      <div className="container">
        <div className="founder-grid">
          <div className="founder-meta">
            <div className="eyebrow">a note from mark</div>
            <div className="founder-portrait">
              <div className="founder-avatar">
                <svg viewBox="0 0 80 80" width="100%" height="100%">
                  <defs>
                    <clipPath id="founder-clip"><circle cx="40" cy="40" r="40" /></clipPath>
                  </defs>
                  <g clipPath="url(#founder-clip)">
                    <rect width="80" height="80" fill="#C68A2B" />
                    <circle cx="40" cy="32" r="14" fill="#FBF6EC" opacity="0.92" />
                    <ellipse cx="40" cy="78" rx="28" ry="22" fill="#FBF6EC" opacity="0.92" />
                  </g>
                </svg>
              </div>
              <div>
                <div className="founder-name">mark salib</div>
                <div className="founder-role">founder, london</div>
              </div>
            </div>
          </div>
          <div className="founder-body">
            <p className="founder-pull">
              <em>"let's catch up soon"</em> is the most popular thing<br />nobody ever actually does.
            </p>
            <p>
              i have friends ten minutes away i haven't seen in a year. not because we don't like each other — because nobody picks the day, the place, the time. the message ends in "soon" and "soon" ends nowhere.
            </p>
            <p>
              i also have things i'd love to do more often — tennis on a sunday, a board game, a walk somewhere new — and the people i'd do them with aren't always the friends i already have. sometimes they're someone two streets over who happens to be free and into the same thing.
            </p>
            <p>
              <strong>go is for both of those.</strong> a tap to nudge a friend nearby into actually meeting up this week. and a quiet feed of what's happening within walking distance — pickup hoops, life-drawing, sourdough class — that you can join with one button.
            </p>
            <p>
              no swiping. no streaks. no &ldquo;you have 3 likes!&rdquo; theatre. just <em>i'm in</em>, and then you show up.
            </p>
            <p>
              we're starting in london because that's where i live and where i can show up when something goes wrong (which it will). if it works here, we'll bring it to the next city — same care, no rush.
            </p>
            <p className="founder-sign">
              — mark<span style={{ color: 'var(--accent)' }}>.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// Testimonials removed pre-launch — no real users yet, fake quotes don't
// fit the brand voice (friendly, warm, real). Bring back when there are
// actual people we can quote with permission.

// ─────────────────────────────────────────────────────────────
// Activities cloud
// ─────────────────────────────────────────────────────────────
function ActivitiesCloud() {
  // Mixed chips. Some featured (accent fill), some ink, most outline.
  const activities = [
    { label: 'pickup hoops', kind: 'featured' },
    { label: 'catan night', kind: 'serif' },
    { label: 'life drawing class', kind: 'outline' },
    { label: 'salsa social', kind: 'serif' },
    { label: 'sunday yoga', kind: 'outline' },
    { label: 'pottery wheel', kind: 'serif' },
    { label: 'sourdough workshop', kind: 'ink' },
    { label: 'sunrise run @ the heath', kind: 'outline' },
    { label: 'spanish exchange', kind: 'serif' },
    { label: 'pub quiz', kind: 'outline' },
    { label: 'wild swim, hampstead ponds', kind: 'featured' },
    { label: 'chess club', kind: 'outline' },
    { label: 'open mic', kind: 'serif' },
    { label: 'gravel ride, north downs', kind: 'outline' },
    { label: 'pickleball drop-in', kind: 'serif' },
    { label: 'tango milonga', kind: 'outline' },
    { label: 'natural wine pop-up', kind: 'ink' },
    { label: 'birding walk', kind: 'outline' },
    { label: 'urban sketching @ borough', kind: 'serif' },
    { label: 'darts league night', kind: 'outline' },
    { label: 'beginner bouldering', kind: 'featured' },
    { label: 'sound bath', kind: 'outline' },
    { label: 'cricket', kind: 'serif' },
    { label: 'forest bathing', kind: 'outline' },
    { label: 'crossfit wod', kind: 'serif' },
    { label: 'dnd one-shot', kind: 'outline' },
    { label: 'codenames bingo', kind: 'serif' },
    { label: 'pasta night', kind: 'ink' },
    { label: 'jam session · funk + soul', kind: 'outline' },
    { label: 'photography walk', kind: 'serif' },
    { label: 'choir rehearsal', kind: 'outline' },
    { label: 'paddleboarding @ surrey docks', kind: 'serif' },
    { label: 'beer tasting', kind: 'outline' },
    { label: 'tai chi at sunrise', kind: 'serif' },
    { label: 'philosophy in the pub', kind: 'outline' },
    { label: 'lindy hop beginners', kind: 'serif' },
    { label: 'london founders coffee', kind: 'outline' },
    { label: 'foraging walk', kind: 'serif' },
    { label: 'mahjong club', kind: 'outline' },
    { label: 'whisky tasting', kind: 'featured' },
    { label: 'meditation in the park', kind: 'outline' },
    { label: 'thames cleanup', kind: 'serif' },
    { label: 'mtg friday night magic', kind: 'outline' },
    { label: 'half marathon training', kind: 'serif' },
    { label: 'kayak intro session', kind: 'outline' },
    { label: '+ 600 more', kind: 'mute' },
  ];

  return (
    <section className="section" id="activities" style={{ borderTop: '1px solid var(--rule)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">the activity graph</div>
            <h2 className="title">whatever<br />you're into.</h2>
          </div>
          <p className="lede">
            we don't pre-pick eight categories for you. we hand-curated a graph of
            <strong style={{ color: 'var(--on-page)' }}> 600+ activities</strong> — chess and gloomhaven, padel and pickleball,
            tango and ceilidh — so what shows up actually fits.
          </p>
        </div>
        <div className="activities-cloud">
          {activities.map((a, i) => (
            <div key={i} className={`act-chip ${a.kind === 'serif' ? 'serif' : ''} ${a.kind === 'featured' ? 'featured' : ''} ${a.kind === 'ink' ? 'ink' : ''}`}
              style={a.kind === 'mute' ? {
                background: 'transparent',
                borderStyle: 'dashed',
                color: 'var(--on-page-mute)',
                fontStyle: 'italic',
                fontFamily: 'var(--display)',
                fontVariationSettings: '"opsz" 144, "SOFT" 100',
              } : {}}>
              {a.kind !== 'ink' && a.kind !== 'featured' && a.kind !== 'mute' && <span className="dot" />}
              {a.label}
            </div>
          ))}
        </div>
        {/* Sample categories row */}
        <div style={{
          marginTop: 40,
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gap: 0,
          borderTop: '1px solid var(--rule)',
          borderBottom: '1px solid var(--rule)',
        }}>
          {[
            { name: 'sports', n: 84, dot: '#C4502D' },
            { name: 'games', n: 96, dot: '#C68A2B' },
            { name: 'outdoor', n: 62, dot: '#7C8F6B' },
            { name: 'arts', n: 71, dot: '#6E4A6B' },
            { name: 'food', n: 58, dot: '#A85C3C' },
            { name: 'music', n: 89, dot: '#9A4A5A' },
          ].map((c, i) => (
            <div key={c.name} style={{
              padding: '24px 18px',
              borderLeft: i > 0 ? '1px solid var(--rule)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 4,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: c.dot, flexShrink: 0 }} />
                <div style={{ fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--on-page-mute)' }}>{c.name}</div>
              </div>
              <div style={{
                fontFamily: 'var(--display)',
                fontWeight: 700,
                fontVariationSettings: '"opsz" 144, "SOFT" 60',
                fontSize: 36,
                letterSpacing: '-0.03em',
                color: 'var(--on-page)',
                lineHeight: 1,
              }}>{c.n}</div>
              <div style={{ fontSize: 11, color: 'var(--on-page-mute)' }}>activities</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Stat band (dark)
// ─────────────────────────────────────────────────────────────
function PreLaunchBand() {
  return (
    <section className="stat-band">
      <div className="container">
        <div className="stat-grid">
          <h2>
            london first.<br />
            <em className="italic-display" style={{ color: 'var(--accent)' }}>because that's where we live.</em>
          </h2>
          <p style={{
            gridColumn: 'span 3',
            fontFamily: 'var(--display)', fontStyle: 'italic',
            fontVariationSettings: '"opsz" 144, "SOFT" 80',
            fontSize: 20, lineHeight: 1.5, color: 'var(--on-page-soft)',
            maxWidth: 640, margin: 0,
          }}>
            we'd rather start somewhere we can show up — to events, to fixes, to the first awkward few weeks — than launch everywhere at once and be everywhere a bit rubbish. once london feels right, we'll do the same in the next city, with the same care.
          </p>
        </div>
      </div>
    </section>
  );
}

// LogoPlayground + ClearspaceDiagram removed — internal brand-system
// reference, not user-facing content. Lives in /docs or a separate page
// if we ever need to share with collaborators.

// ─────────────────────────────────────────────────────────────
// CTA band — final waitlist
// ─────────────────────────────────────────────────────────────
function CTABand() {
  return (
    <section className="cta-band" id="waitlist">
      <div className="container">
        <div className="cta-inner">
          <div>
            <div className="eyebrow">don't catch up soon. go.</div>
            <h2 className="lead">
              save your spot.<br />
              <em className="italic-display">we'll come find you.</em>
            </h2>
            <p className="sub">
              we email when go opens in your city. usually monthly, never noisy.
              you can leave the list with one click and we promise we won't
              passive-aggressive you about it.
            </p>
          </div>
          <div className="cta-waitlist-wrap">
            <WaitlistForm />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <LogoWordmark size={36} color="var(--on-page)" />
            <p style={{ marginTop: 16, maxWidth: 320, color: 'var(--on-page-soft)', fontSize: 13.5, lineHeight: 1.55 }}>
              built in london by mark, because "let's catch up soon" never seemed to turn into anything.
            </p>
            <div style={{ marginTop: 16, display: 'flex', gap: 12 }}>
              <SocialIcon kind="x" />
              <SocialIcon kind="ig" />
              <SocialIcon kind="tt" />
            </div>
          </div>
          <div>
            <h5>about</h5>
            <ul>
              <li><a href="#why">why we're building this</a></li>
              <li><a href="#how">how it works</a></li>
              <li><a href="#screens">the app</a></li>
              <li><a href="mailto:hello@sleeb.co.uk">say hello</a></li>
            </ul>
          </div>
          <div>
            <h5>next up</h5>
            <ul style={{ color: 'var(--on-page-soft)' }}>
              <li>london — first</li>
              <li>then wherever you tell us</li>
              <li style={{ marginTop: 8 }}>
                <a href="#waitlist">save your spot &nbsp;→</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 go · made by mark in london</div>
          <div className="footer-strapline">catch up. and meet new people. nearby.</div>
          <div>
            <a href="/privacy" style={{ color: 'inherit', marginRight: 16 }}>privacy</a>
            <a href="/terms" style={{ color: 'inherit' }}>terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function SocialIcon({ kind }) {
  const paths = {
    x: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
    ig: 'M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.5 1s.7.9 1 1.5c.2.4.3 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-1 1.5s-.9.7-1.5 1c-.4.2-1 .3-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.5-1s-.7-.9-1-1.5c-.2-.4-.3-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 1-1.5s.9-.7 1.5-1c.4-.2 1-.3 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.2 0-3.5 0-4.8.1-1 0-1.6.2-2 .3-.5.2-.8.4-1.2.8s-.6.7-.8 1.2c-.1.4-.3 1-.3 2-.1 1.3-.1 1.6-.1 4.8s0 3.5.1 4.8c0 1 .2 1.6.3 2 .2.5.4.8.8 1.2s.7.6 1.2.8c.4.1 1 .3 2 .3 1.3.1 1.6.1 4.8.1s3.5 0 4.8-.1c1 0 1.6-.2 2-.3.5-.2.8-.4 1.2-.8s.6-.7.8-1.2c.1-.4.3-1 .3-2 .1-1.3.1-1.6.1-4.8s0-3.5-.1-4.8c0-1-.2-1.6-.3-2-.2-.5-.4-.8-.8-1.2s-.7-.6-1.2-.8c-.4-.1-1-.3-2-.3-1.3-.1-1.6-.1-4.8-.1zM12 6.9a5.1 5.1 0 110 10.2 5.1 5.1 0 010-10.2zm0 1.8a3.3 3.3 0 100 6.6 3.3 3.3 0 000-6.6zm5.4-2.1a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z',
    tt: 'M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005.8 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1.84-.1z',
  };
  return (
    <div style={{
      width: 32, height: 32, borderRadius: '50%',
      border: '1px solid var(--rule)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--on-page)', cursor: 'pointer',
    }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
        <path d={paths[kind]} />
      </svg>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
