// tour.jsx — Phone-frame product tour (sticky scrollytelling) + Memory section
// As the user scrolls, the phone screen scrubs through the five tabs.
//
// The five mini-screens are condensed versions of the real app screens
// (see the 10-screen redesign reference). Same editorial system as the
// marketing site: Paper/Ink, Ultramarine accent, Instrument Serif + JetBrains
// Mono, loved-red reserved for the heart.

const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

// ─────────────────────────────────────────────────────────────
// Mini app screens — distilled versions of the real screens.
// Each one is ~320×620 inside the phone bezel.
// ─────────────────────────────────────────────────────────────

const ScreenHome = () => (
  <div className="screen-pad">
    <div className="screen-topline">
      <div className="screen-eyebrow">Mon · Apr 21 · 17:58 · München</div>
      <span className="screen-avatar">AM</span>
    </div>
    <div className="screen-h" style={{ marginTop: 4 }}>
      Good evening,<br/><em>Alexander</em>.
    </div>

    <div className="screen-ask">
      <span className="d">◆</span>
      <span className="t">Where to next? A dinner, a day…</span>
      <span className="screen-ask-go">ASK ↵</span>
    </div>

    <div className="screen-eyebrow" style={{ marginTop: 4 }}>Ongoing — day 2 of 4</div>
    <div className="screen-photo"/>
    <div className="screen-trip-line">
      <span className="serif" style={{ fontSize: 24 }}>München</span>
      <span className="row-t mono">4D</span>
    </div>
    <div className="screen-eyebrow" style={{ marginTop: 6 }}>Apr 19 → 22 · 10 places · 3 with Lena</div>

    <div className="screen-section-label">Today · Tue Apr 21</div>
    <div className="screen-row">
      <span className="row-t mono">09:30</span>
      <div>
        <div className="row-n">Viktualienmarkt</div>
        <div className="row-s">Breakfast · 180 m</div>
      </div>
    </div>
    <div className="screen-row">
      <span className="row-t mono">12:00</span>
      <div>
        <div className="row-n">Alte Pinakothek</div>
        <div className="row-s">Ticket in wallet</div>
      </div>
    </div>
    <div className="screen-row">
      <span className="row-t mono">19:00</span>
      <div>
        <div className="row-n">Tantris</div>
        <div className="row-s">Reserved · 2 guests</div>
      </div>
    </div>
  </div>
);

const ScreenTrips = () => (
  <div className="screen-pad">
    <div className="screen-h" style={{ marginBottom: 6 }}>Trips</div>
    <div className="screen-eyebrow">6 upcoming · 41 past · 127 saved</div>

    <div className="screen-ask" style={{ marginTop: 16 }}>
      <span className="d">◆</span>
      <span className="t">What are you planning?</span>
      <span className="screen-ask-go">COMPOSE ↵</span>
    </div>

    <div className="screen-chips" style={{ marginTop: 14 }}>
      <span className="chip on">Upcoming 6</span>
      <span className="chip">Ongoing 1</span>
      <span className="chip">Past 41</span>
    </div>

    <div className="screen-eyebrow">● Ongoing · day 2 / 4</div>
    <div className="screen-photo"/>
    <div className="screen-trip-line">
      <span className="serif" style={{ fontSize: 26 }}>München</span>
      <span className="row-t mono">4D</span>
    </div>
    <div className="screen-eyebrow" style={{ marginTop: 6 }}>Apr 19 → 22 · with Lena</div>

    <div className="screen-trip" style={{ marginTop: 14 }}>
      <div className="serif" style={{ fontSize: 22 }}><em>Plettenberg Bay</em></div>
      <div className="mono">In 6 days</div>
      <div className="screen-trip-meta">Apr 26 → 30 · 5 days · Lena + 2</div>
    </div>
  </div>
);

const ScreenMap = () => (
  <div className="screen-map">
    <svg className="screen-map-bg" viewBox="0 0 320 620" preserveAspectRatio="none">
      <defs>
        <pattern id="sg" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M32 0H0V32" fill="none" stroke="rgba(15,15,15,0.05)" strokeWidth="0.5"/>
        </pattern>
      </defs>
      <rect width="320" height="620" fill="#EEEBE2"/>
      <rect width="320" height="620" fill="url(#sg)"/>
      <path d="M0 360 C 80 320, 180 380, 260 350 S 320 350, 320 380 L 320 620 L 0 620 Z" fill="#FAFAF7" stroke="rgba(15,15,15,0.12)" strokeWidth="0.8"/>
      {[...Array(7)].map((_, i) => (
        <line key={i} x1="-20" y1={90 + i * 70} x2="340" y2={104 + i * 70} stroke="rgba(15,15,15,0.07)" strokeWidth="1"/>
      ))}
    </svg>

    <div className="screen-map-search">
      <span className="d">◆</span>
      <span className="t">coffee my friends liked, near here</span>
      <span className="mono" style={{ fontSize: 8, letterSpacing: '1px', color: 'var(--mute)' }}>3 MATCH</span>
    </div>

    <div className="screen-pin" style={{ left: '48%', top: '30%' }}>
      <div className="screen-flag" style={{ left: '50%', right: 'auto', transform: 'translate(-50%, -120%)', background: 'var(--ink)', borderColor: 'var(--ink)' }}>
        <div className="screen-flag-cat" style={{ color: 'rgba(250,250,247,0.7)' }}>MARKET</div>
        <div className="screen-flag-name" style={{ color: 'var(--paper)' }}>Viktualienmarkt</div>
      </div>
      <span className="screen-pin-dot" style={{ background: 'var(--accent)', width: 12, height: 12, borderRadius: 999, border: '2px solid var(--paper)' }}/>
    </div>
    <div className="screen-pin" style={{ left: '36%', top: '44%' }}>
      <span className="screen-pin-dot saved"/>
    </div>
    <div className="screen-pin" style={{ left: '64%', top: '50%' }}>
      <span className="screen-pin-dot saved"/>
    </div>
    <div className="screen-pin" style={{ left: '28%', top: '58%' }}>
      <span className="screen-pin-dot discovery"/>
    </div>
    <div className="screen-pin" style={{ left: '52%', top: '64%' }}>
      <div className="screen-flag" style={{ left: '50%', right: 'auto', transform: 'translate(-50%, -120%)' }}>
        <div className="screen-flag-cat">RESTAURANT</div>
        <div className="screen-flag-name"><em>Tantris</em></div>
      </div>
      <span className="screen-pin-dot saved"/>
    </div>

    <div className="screen-peek">
      <div className="screen-peek-top">
        <span className="mono accent" style={{ fontSize: 9, fontWeight: 600 }}>● Selected</span>
        <span className="mono" style={{ fontSize: 9 }}>180 m</span>
      </div>
      <div className="serif" style={{ fontSize: 22 }}>Viktualienmarkt</div>
      <div className="mono" style={{ marginTop: 6, fontSize: 8 }}>Market · Open · 48.135°N 11.576°E</div>
    </div>
  </div>
);

const ScreenSaved = () => (
  <div className="screen-pad">
    <div className="screen-h">Saved</div>

    <div className="screen-chips">
      <span className="chip on">All 127</span>
      <span className="chip"><span className="chip-dot loved"/>Loved 12</span>
      <span className="chip">Restaurants 38</span>
    </div>

    {[
      { n: 'La Cucina Trattoria',  c: 'Restaurant · Munich · 0.4 km', l: true  },
      { n: '25hours Hotel Bikini', c: 'Hotel · Berlin',               l: true  },
      { n: 'Apple Fifth Avenue',   c: 'Shopping · New York',          l: false },
      { n: 'Zeitz MOCAA',          c: 'Museum · Cape Town',           l: true  },
      { n: 'Tantris',              c: 'Restaurant · Munich · 2.1 km', l: false },
    ].map((r, i) => (
      <div key={i} className="screen-saved-row">
        <span className={`heart-svg ${r.l ? 'loved' : ''}`}>
          <svg viewBox="0 0 24 22" width="12" height="12">
            <path d="M12 21.5 L1.5 11.5 a5.5 5.5 0 0 1 7.5 -7.5 L12 5.5 L14.5 4 A5.5 5.5 0 0 1 22.5 11.5 Z"
              fill={r.l ? 'var(--loved)' : 'none'}
              stroke={r.l ? 'none' : 'rgba(15,15,15,0.35)'}
              strokeWidth="1"/>
          </svg>
        </span>
        <div>
          <div className="row-n">{r.n}</div>
          <div className="row-s">{r.c}</div>
        </div>
      </div>
    ))}
  </div>
);

const ScreenProfile = () => (
  <div className="screen-pad">
    <div className="screen-profile-top">
      <span className="screen-avatar lg">A</span>
      <div>
        <div className="serif" style={{ fontSize: 30, lineHeight: 1 }}>Alexander</div>
        <div className="screen-eyebrow" style={{ marginTop: 6 }}>Member since Apr 2026 · Munich</div>
      </div>
    </div>

    <div className="screen-stats" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
      <div><div className="serif" style={{ fontSize: 26, letterSpacing: '-0.6px' }}>177</div><div className="mono">Places</div></div>
      <div><div className="serif" style={{ fontSize: 26, letterSpacing: '-0.6px' }}>10</div><div className="mono">Trips</div></div>
      <div><div className="serif" style={{ fontSize: 26, letterSpacing: '-0.6px' }}>9</div><div className="mono">Coll.</div></div>
      <div><div className="serif" style={{ fontSize: 26, letterSpacing: '-0.6px', color: 'var(--loved)' }}><em>12</em></div><div className="mono">Loved</div></div>
    </div>

    <div className="screen-section-label">Your taste</div>
    <div style={{ paddingTop: 6 }}>
      <div className="serif" style={{ fontSize: 24 }}>The Foodie Explorer</div>
      <div className="row-s" style={{ marginTop: 6 }}>
        Neighbourhood joints to creative fusion — if it's good, you're there.
      </div>
    </div>

    <div className="screen-section-label">Friends · 4 connected</div>
    <div style={{ paddingTop: 8 }}>
      <span className="serif" style={{ fontSize: 16, fontStyle: 'italic' }}>Lena</span>
      <span className="row-s" style={{ marginLeft: 6 }}>saved 3 places in Lisbon · 2h</span>
    </div>
  </div>
);

const SCREENS = [
  { key: 'home',    el: <ScreenHome/>,    label: 'Home',
    eyebrow: 'tab · 01',
    title: 'It opens to <em>your day</em>.',
    body: 'Plinn greets you by name and shows the trip you\'re on, today\'s plan, and the places nearby from your own collections — plus a single line to ask for whatever\'s next. No stranger\'s feed.',
    meta: ['Greeting + Ask line', 'Ongoing trip', 'Today · your plan'] },
  { key: 'trips',   el: <ScreenTrips/>,   label: 'Trips',
    eyebrow: 'tab · 02',
    title: 'Trips, kept <em>plainly</em>.',
    body: 'Upcoming on top, past below — each one a list of places, not a feed. Type one sentence into the composer and Plinn drafts the days; you edit anything that doesn\'t feel right.',
    meta: ['Composer', 'Ongoing · Upcoming · Past', 'Notes per trip'] },
  { key: 'map',     el: <ScreenMap/>,     label: 'Map',
    eyebrow: 'tab · 03',
    title: 'Where things <em>are</em>.',
    body: 'Your loved places are labelled first, saved next, discoveries quiet until you ask. Filter the map in plain language — "coffee my friends liked, walkable from here" — and tap a pin for the place sheet.',
    meta: ['Three pin tiers', 'Natural-language filter', 'Place peek card'] },
  { key: 'saved',   el: <ScreenSaved/>,   label: 'Saved',
    eyebrow: 'tab · 04',
    title: 'The list, by <em>hand</em>.',
    body: 'Every place here was put there by you, or shared by someone you trust. Search, sort by name or distance, and filter to the heart-marked ones — the loved places are the only red on screen.',
    meta: ['Search + sort', 'Loved (red, reserved)', 'Group into a trip'] },
  { key: 'profile', el: <ScreenProfile/>, label: 'Profile',
    eyebrow: 'tab · 05',
    title: 'Your <em>taste</em>, your people.',
    body: 'A few honest numbers, the taste profile Plinn has learned from what you save, and the friends whose lists you trust. Quiet by default — what Plinn remembers is one tap to read, and one tap to forget.',
    meta: ['Places · Trips · Collections · Loved', 'Taste profile', 'Friends'] },
];

function PhoneTour() {
  const wrapRef = useRefT(null);
  const [active, setActive] = useStateT(0);

  useEffectT(() => {
    const onScroll = () => {
      if (!wrapRef.current) return;
      const beats = wrapRef.current.querySelectorAll('.tour-beat');
      // Trigger line at 35% from viewport top — as soon as a beat's top crosses it,
      // that beat activates. Snappier than "closest-to-center" and matches the
      // expectation that the screen flips when the beat enters the upper-middle.
      const triggerY = window.innerHeight * 0.35;
      let bestI = 0;
      beats.forEach((b, i) => {
        if (b.getBoundingClientRect().top <= triggerY) bestI = i;
      });
      setActive(bestI);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="section" id="how">
      <div className="section-head">
        <div>
          <div className="eyebrow">04 · The app, in five tabs</div>
          <h2>Five screens. <em>One</em> shape.</h2>
        </div>
        <div className="lede">
          The whole app is five places. Home, Trips, Map, Saved, Profile. Scroll through them — the phone keeps up.
        </div>
      </div>

      <div className="tour" ref={wrapRef}>
        <div className="tour-phone-col">
          <div className="tour-phone-sticky">
            <div className="phone">
              <div className="notch"/>
              <div className="screen">
                {SCREENS.map((s, i) => (
                  <div
                    key={s.key}
                    className={`tour-screen ${i === active ? 'on' : ''}`}
                  >
                    {s.el}
                  </div>
                ))}
              </div>
            </div>
            <div className="tour-tabs">
              {SCREENS.map((s, i) => (
                <span key={s.key} className={`tour-tab ${i === active ? 'on' : ''}`}>
                  {s.label}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div className="tour-beats">
          {SCREENS.map((s, i) => (
            <div key={s.key} className={`tour-beat ${i === active ? 'on' : ''}`}>
              <div className="mono">{s.eyebrow}</div>
              <h3 className="tour-beat-h" dangerouslySetInnerHTML={{ __html: s.title }}/>
              <p className="tour-beat-b">{s.body}</p>
              <ul className="tour-beat-meta">
                {s.meta.map((m, j) => (
                  <li key={j}><span className="mono">·</span> {m}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Memory section
// ─────────────────────────────────────────────────────────────

function MemorySection() {
  return (
    <section className="section dark-block" id="memory" style={{
      maxWidth: 'none',
      padding: '120px var(--gutter)',
      borderTop: '0.5px solid var(--faint)',
      borderBottom: '0.5px solid var(--faint)',
    }}>
      <div className="shell">
        <div className="section-head" style={{ borderBottom: '0.5px solid rgba(250,250,247,0.15)' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(250,250,247,0.55)' }}>05 · Memory</div>
            <h2 style={{ color: 'var(--paper)' }}>What Plinn <em>remembers</em>.</h2>
          </div>
          <div className="lede" style={{ color: 'rgba(250,250,247,0.7)' }}>
            And what it doesn't. We thought about this a lot. The honest answer is below — no asterisks, no "may include."
          </div>
        </div>

        <div className="mem-grid">
          <div className="mem-col">
            <div className="mono" style={{ color: 'var(--paper)', borderBottom: '0.5px solid rgba(250,250,247,0.2)', paddingBottom: 14, marginBottom: 14 }}>Plinn remembers</div>
            {[
              ['Places you saved',          'Every one. Sorted by when, where, who shared.'],
              ['Places you loved',          'Marked with the heart. A subset of saved.'],
              ['Trips you took',            'The plan and any edits you made on the way.'],
              ['Your taste',                'Walking pace, dinner timing, "art-leaning" — built from your behaviour, not a quiz.'],
              ['Friends you share with',    'Their handles. Not their lists, unless they share them with you.'],
            ].map(([k, v], i) => (
              <div key={i} className="mem-row">
                <div className="serif" style={{ fontSize: 20 }}><em>{k}</em></div>
                <div className="mem-row-sub">{v}</div>
              </div>
            ))}
          </div>

          <div className="mem-col not">
            <div className="mono" style={{ color: 'var(--loved)', borderBottom: '0.5px solid rgba(250,250,247,0.2)', paddingBottom: 14, marginBottom: 14 }}>Plinn does not remember</div>
            {[
              ['What you searched and didn\'t save', 'It never reaches our servers.'],
              ['What time of day you open the app',  'No engagement clock. Not used, not stored.'],
              ['Who saw your list',                  'Public lists are public; private ones are not logged on view.'],
              ['Your location, when the app is closed', 'Foreground only. Background access is off by default and we don\'t ask.'],
              ['Ad identifiers',                     'No IDFA. No GAID. No third-party SDK that wants them.'],
            ].map(([k, v], i) => (
              <div key={i} className="mem-row">
                <div className="serif" style={{ fontSize: 20 }}><em>{k}</em></div>
                <div className="mem-row-sub">{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mem-foot">
          <div className="mem-foot-l">
            <div className="serif" style={{ fontSize: 32, letterSpacing: '-0.5px', maxWidth: '32ch' }}>
              "Forget everything" is <em>one tap</em>. We keep no copy.
            </div>
          </div>
          <a className="btn-line" style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }} href="privacy.html">
            Read the privacy stance <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PhoneTour, MemorySection });