// Members Area — Patreon OAuth, tier-gated content, with Guides tab.
// States: 'loading' → 'out' | 'free' | 'paid'

function MembersSection({ openLogin, setOpenLogin }) {
  const [authState, setAuthState] = React.useState('loading');
  const [user, setUser] = React.useState(null);

  // Check existing session on mount
  React.useEffect(() => {
    fetch('/api/auth/me')
      .then(r => r.json())
      .then(data => {
        if (data.authenticated) {
          setUser(data);
          setAuthState(data.tier);
        } else {
          setAuthState('out');
        }
      })
      .catch(() => setAuthState('out'));
  }, []);

  // Nav "Members" button → redirect to Patreon OAuth
  React.useEffect(() => {
    if (openLogin && authState === 'out') {
      setOpenLogin?.(false);
      window.location.href = '/api/auth/login';
    }
  }, [openLogin, authState]);

  const handleLogout = async () => {
    await fetch('/api/auth/logout');
    setAuthState('out');
    setUser(null);
  };

  const handleUpgrade = () => {
    window.open('https://www.patreon.com/cw/PiratePrivateLoot', '_blank', 'noreferrer');
  };

  return (
    <section id="members" style={{ background: 'linear-gradient(180deg, rgba(0,34,84,.15), transparent)' }}>
      <div className="wrap">
        <div className="eyebrow">✦  Ch. V · The Captain's Quarters</div>
        <h2 className="section-title">Members <em>area</em>.</h2>
        <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--beige)', maxWidth: 680, lineHeight: 1.5, marginBottom: 48 }}>
          Link your Patreon to unlock early chapters, the in-development
          Dating System, the art gallery, and the Navigator's Log — our
          in-world strategy guides.
        </p>

        {authState === 'loading' && <MembersLoading />}
        {authState === 'out' && <MembersLoggedOut />}
        {(authState === 'free' || authState === 'paid') && (
          <MembersDashboard tier={authState} user={user} onLogout={handleLogout} onUpgrade={handleUpgrade} />
        )}
      </div>
    </section>
  );
}

/* ---------- Loading ---------- */
function MembersLoading() {
  return (
    <div className="card" style={{ padding: 56, textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.3em', fontSize: 11, color: 'var(--gold)', opacity: .7 }}>
        ⚓ Verifying credentials...
      </div>
    </div>
  );
}

/* ---------- Logged-Out CTA ---------- */
function MembersLoggedOut() {
  return (
    <div className="card" style={{
      padding: '56px 48px',
      display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
      background: 'linear-gradient(135deg, rgba(0,34,84,.3), rgba(11,11,20,.6))',
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <Icon.Lock style={{ width: 18, height: 18, color: 'var(--gold)' }} />
          <span style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.25em', fontSize: 11, color: 'var(--gold)' }}>
            Members only · Patreon OAuth
          </span>
        </div>
        <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 900, fontSize: 36, color: 'var(--cream)', lineHeight: 1.1, marginBottom: 16 }}>
          The chart is locked.<br />
          <span style={{ color: 'var(--gold)' }}>Your patronage opens it.</span>
        </h3>
        <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--beige)', opacity: .9, lineHeight: 1.5, marginBottom: 28, maxWidth: 520 }}>
          We use Patreon's OAuth to verify your tier. Nothing is stored on
          our servers beyond your Patreon ID and tier status.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="/api/auth/login">
            <Icon.Patreon /> Log in with Patreon
          </a>
          <a className="btn btn-ghost" href="https://www.patreon.com/cw/PiratePrivateLoot" target="_blank" rel="noreferrer">
            Not a patron yet? <Icon.Arrow />
          </a>
        </div>
      </div>

      {/* Tier preview */}
      <div style={{ display: 'grid', gap: 12 }}>
        <TierPreview
          name="Free"
          perks={['Access to public builds', 'Public chapter releases']}
          color="var(--beige)"
          rim="rgba(212,196,168,.3)"
        />
        <TierPreview
          name="✦ Worst Generation · $3/mo"
          perks={['New builds before public release', 'Dating System early access', 'Weekly previews & upcoming features']}
          color="var(--gold)"
          rim="var(--gold)"
          highlighted
        />
      </div>
    </div>
  );
}

function TierPreview({ name, perks, color, rim, highlighted }) {
  return (
    <div style={{
      padding: 22,
      border: `1px solid ${rim}`,
      background: highlighted ? 'linear-gradient(135deg, rgba(212,175,55,.08), transparent)' : 'rgba(255,255,255,.02)',
      position: 'relative',
    }}>
      <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 10, color, marginBottom: 10 }}>
        {highlighted && '✦ '}{name}
      </div>
      <ul style={{ listStyle: 'none', display: 'grid', gap: 6 }}>
        {perks.map(p => (
          <li key={p} style={{ fontFamily: 'var(--f-serif)', fontSize: 14, color: 'var(--cream)', opacity: .85, display: 'flex', gap: 8 }}>
            <Icon.Check style={{ width: 13, height: 13, color, flexShrink: 0, marginTop: 3 }} /> {p}
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ---------- Members Dashboard ---------- */
function MembersDashboard({ tier, user, onLogout, onUpgrade }) {
  const [tab, setTab] = React.useState('home');
  const isPaid = tier === 'paid';

  const tabs = [
    { id: 'home',    label: 'Overview',     icon: Icon.Compass },
    { id: 'builds',  label: 'Early Builds', icon: Icon.Download },
    { id: 'guides',  label: 'Guides',       icon: Icon.Book, accent: true },
    { id: 'gallery', label: 'Art Gallery',  icon: Icon.Sparkle },
    { id: 'devlog',  label: 'Devlog',       icon: Icon.Chat },
  ];

  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      {/* User header bar */}
      <div style={{
        padding: '22px 28px',
        display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        background: 'linear-gradient(90deg, rgba(0,34,84,.6), rgba(11,11,20,.6))',
        borderBottom: '1px solid rgba(212,175,55,.2)',
      }}>
        <div style={{
          width: 54, height: 54, borderRadius: '50%',
          background: `conic-gradient(from 140deg, ${isPaid ? 'var(--gold), var(--orange), var(--gold)' : 'var(--beige), #807464, var(--beige)'})`,
          padding: 2,
        }}>
          <div style={{ width: '100%', height: '100%', borderRadius: '50%', background: '#0B0B14', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--f-display)', fontWeight: 900, color: isPaid ? 'var(--gold)' : 'var(--beige)' }}>
            {user?.name?.[0]?.toUpperCase() ?? 'P'}
          </div>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 10, color: 'var(--gold)' }}>
            ✦ Patreon ID · {user?.id ?? '—'}
          </div>
          <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, color: 'var(--cream)' }}>
            Welcome back, {user?.name?.split(' ')[0] ?? 'Patron'}
          </div>
        </div>
        <div style={{
          padding: '8px 14px',
          border: `1px solid ${isPaid ? 'var(--gold)' : 'var(--beige)'}`,
          color: isPaid ? 'var(--gold)' : 'var(--beige)',
          fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.2em',
          background: isPaid ? 'rgba(212,175,55,.08)' : 'transparent',
        }}>
          {isPaid ? `✦ ${user?.tierName ?? 'Worst Generation'} · $3` : 'Free'}
        </div>
        <button className="btn btn-ghost" onClick={onLogout} style={{ padding: '10px 16px', fontSize: 10 }}>
          Log out
        </button>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', borderBottom: '1px solid rgba(212,175,55,.15)', overflowX: 'auto' }}>
        {tabs.map(t => {
          const Ic = t.icon;
          const active = tab === t.id;
          return (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              style={{
                flexShrink: 0, padding: '16px 22px',
                background: active ? 'rgba(212,175,55,.06)' : 'transparent',
                border: 'none', borderBottom: active ? '2px solid var(--gold)' : '2px solid transparent',
                color: active ? 'var(--gold)' : 'var(--cream)',
                fontFamily: 'var(--f-caps)', letterSpacing: '.18em', fontSize: 11,
                cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
                textTransform: 'uppercase',
                opacity: active ? 1 : .7,
                transition: 'all .2s',
              }}>
              <Ic style={{ width: 14, height: 14 }} /> {t.label}
              {t.accent && !active && (
                <span style={{ marginLeft: 4, padding: '2px 6px', background: 'var(--orange)', color: '#fff', fontSize: 8, letterSpacing: '.15em' }}>NEW</span>
              )}
            </button>
          );
        })}
      </div>

      <div style={{ padding: 36 }}>
        {tab === 'home'    && <TabHome />}
        {tab === 'builds'  && <TabBuilds />}
        {tab === 'guides'  && <TabGuides isPaid={isPaid} onUpgrade={onUpgrade} />}
        {tab === 'gallery' && <TabGallery />}
        {tab === 'devlog'  && <TabDevlog />}
      </div>
    </div>
  );
}

/* ---------- Tab: Coming Soon (shared) ---------- */
function TabComingSoon({ label }) {
  return (
    <div style={{ padding: '56px 0', textAlign: 'center' }}>
      <div style={{ marginBottom: 20, color: 'rgba(212,175,55,.25)' }}>
        <Icon.Lock style={{ width: 36, height: 36 }} />
      </div>
      <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.4em', fontSize: 10, color: 'var(--gold)', opacity: .6, marginBottom: 14 }}>
        ✦ In Development
      </div>
      <h4 style={{ fontFamily: 'var(--f-display)', fontWeight: 500, fontStyle: 'italic', fontSize: 28, color: 'var(--cream)', marginBottom: 12 }}>
        {label}
      </h4>
      <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 15, color: 'var(--beige)', opacity: .7, maxWidth: 440, margin: '0 auto' }}>
        This section is being prepared. Patrons will be the first to know when it opens.
      </p>
    </div>
  );
}

/* ---------- Tab: Home / Overview ---------- */
function TabHome() {
  return <TabComingSoon label="Overview & Activity" />;
}

/* ---------- Tab: Builds ---------- */
function TabBuilds() {
  return <TabComingSoon label="Early Builds" />;
}

/* ---------- Guide helpers ---------- */
function GCode({ children }) {
  return <code style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--gold)', background: 'rgba(212,175,55,.1)', padding: '1px 6px', borderRadius: 2 }}>{children}</code>;
}
function GStatRow({ stats }) {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '8px 0' }}>
      {stats.map(s => (
        <span key={s.label} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', background: s.good ? 'rgba(85,221,136,.07)' : 'rgba(255,85,85,.07)', border: `1px solid ${s.good ? 'rgba(85,221,136,.3)' : 'rgba(255,85,85,.3)'}`, fontFamily: 'ui-monospace, monospace', fontSize: 11, color: s.good ? 'var(--success)' : 'var(--danger)' }}>
          {s.label} {s.value}
        </span>
      ))}
    </div>
  );
}
function GTip({ children }) {
  return <div style={{ borderLeft: '3px solid var(--gold)', paddingLeft: 16, marginBottom: 12, fontFamily: 'var(--f-serif)', fontSize: 14, color: 'var(--beige)', lineHeight: 1.6 }}>{children}</div>;
}
function GAvoid({ children }) {
  return <div style={{ borderLeft: '3px solid var(--danger)', paddingLeft: 16, marginBottom: 12, fontFamily: 'var(--f-serif)', fontSize: 14, color: 'rgba(255,120,120,.85)', lineHeight: 1.6 }}>{children}</div>;
}
function GH({ children }) {
  return <h6 style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 10, color: 'var(--gold)', marginBottom: 8, marginTop: 20, textTransform: 'uppercase' }}>{children}</h6>;
}
function GP({ children }) {
  return <p style={{ fontFamily: 'var(--f-serif)', fontSize: 14, color: 'var(--beige)', lineHeight: 1.65, marginBottom: 10 }}>{children}</p>;
}
function GEnding({ num, title, stats, children }) {
  return (
    <div style={{ padding: '18px 20px', border: '1px solid rgba(212,175,55,.15)', marginBottom: 12, background: 'rgba(11,11,20,.4)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
        <span style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--gold)', minWidth: 28 }}>{num}</span>
        <span style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 11, color: 'var(--cream)' }}>{title}</span>
        {stats && <GStatRow stats={stats} />}
      </div>
      {children}
    </div>
  );
}

/* ---------- Tab: Guides ---------- */
function TabGuides({ isPaid, onUpgrade }) {
  const [section, setSection] = React.useState('overview');

  if (!isPaid) {
    return (
      <div>
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.3em', fontSize: 10, color: 'var(--gold)', marginBottom: 6 }}>✦ The Navigator's Log</div>
          <h4 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 26, color: 'var(--cream)' }}>In-world strategy guides</h4>
        </div>
        <div style={{ padding: 36, border: '1px dashed rgba(255,85,85,.3)', background: 'rgba(255,85,85,.04)', textAlign: 'center' }}>
          <Icon.Lock style={{ width: 34, height: 34, color: 'var(--danger)', marginBottom: 14 }} />
          <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, color: 'var(--cream)', marginBottom: 10 }}>Worst Generation only</div>
          <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--beige)', opacity: .85, maxWidth: 400, margin: '0 auto 20px' }}>
            Affinity is a vector, not a score. Trust, desire, and debt move independently — and the game never shows you the numbers.
          </p>
          <button className="btn btn-primary" onClick={onUpgrade}><Icon.Sparkle /> Become a patron</button>
        </div>
      </div>
    );
  }

  const tabs = [
    { id: 'overview',    label: 'Overview' },
    { id: 'picnic',      label: 'Picnic' },
    { id: 'bar',         label: 'Bar' },
    { id: 'restaurant',  label: 'Restaurant' },
    { id: 'summary',     label: 'Summary' },
  ];

  return (
    <div>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          <span className="chip" style={{ fontSize: 9 }}>Dating</span>
          <span className="chip" style={{ fontSize: 9 }}>System</span>
          <span className="chip" style={{ fontSize: 9 }}>Nami</span>
          <span className="chip" style={{ fontSize: 9 }}>Shellstown</span>
        </div>
        <h5 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 26, color: 'var(--cream)', marginBottom: 6 }}>
          Dating System — Complete Endings Guide
        </h5>
        <div style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.25em', color: 'var(--gold)' }}>
          ✦ Based on the real game logic · Shellstown · Nami · 12 endings
        </div>
      </div>

      {/* Sub-nav */}
      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 28, borderBottom: '1px solid rgba(212,175,55,.12)', paddingBottom: 16 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setSection(t.id)} style={{
            padding: '6px 14px', border: `1px solid ${section === t.id ? 'var(--gold)' : 'rgba(212,175,55,.2)'}`,
            background: section === t.id ? 'rgba(212,175,55,.1)' : 'transparent',
            color: section === t.id ? 'var(--gold)' : 'var(--beige)',
            fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.18em', cursor: 'pointer',
          }}>{t.label}</button>
        ))}
      </div>

      {section === 'overview'   && <GuideOverview />}
      {section === 'picnic'     && <GuidePicnic />}
      {section === 'bar'        && <GuideBar />}
      {section === 'restaurant' && <GuideRestaurant />}
      {section === 'summary'    && <GuideSummary />}
    </div>
  );
}

function GuideOverview() {
  return (
    <div style={{ maxWidth: 760 }}>
      <GH>Overview</GH>
      <GP>The dating system currently covers Shellstown and Nami's routes. There are three date types: a beach picnic (casual), a bar night (normal), and a restaurant dinner (luxury). Future updates will add dates in other cities and with other crew members — same city, different girl, different feeling.</GP>
      <div style={{ padding: '14px 18px', background: 'rgba(212,175,55,.06)', border: '1px solid rgba(212,175,55,.2)', marginBottom: 20 }}>
        <div style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.2em', color: 'var(--gold)', marginBottom: 8 }}>Current build</div>
        <GP><strong style={{ color: 'var(--cream)' }}>12 endings total across all three date types</strong> — 4 per date. Each ending is shaped by the internal stats you accumulate through your choices.</GP>
      </div>

      <GH>Internal variables</GH>
      <div style={{ display: 'grid', gap: 8, marginBottom: 20 }}>
        {[
          ['mood', 'Overall atmosphere of the date'],
          ['romance', 'Romantic tension'],
          ['chemistry', 'Chemistry between you'],
          ['comfort', 'Comfort and trust'],
          ['fun', 'Enjoyment'],
          ['awkwardness', 'Discomfort — drags mood down'],
        ].map(([v, d]) => (
          <div key={v} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <GCode>{v}</GCode>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)' }}>{d}</span>
          </div>
        ))}
      </div>

      <GTip>Empathetic, calm answers focused on her tend to raise <GCode>romance</GCode>, <GCode>chemistry</GCode>, or <GCode>comfort</GCode>.</GTip>
      <GAvoid>Blunt, too-direct, or self-interested answers lower stats and raise <GCode>awkwardness</GCode>. For a romantic or better ending, avoid anything that reads as impatient, clumsy, or sexual too soon.</GAvoid>

      <GH>Progression requirements</GH>
      <div style={{ display: 'grid', gap: 10, marginBottom: 16 }}>
        {[
          { tipo: 'Picnic', req: '1000 berries · 10 affection · 10 trust + set_picnic', nota: 'Available from the start' },
          { tipo: 'Bar', req: '5000 berries · 25 affection · 20 trust + atuendo_casual', nota: 'Requires 1 picnic ending unlocked' },
          { tipo: 'Restaurant', req: '25000 berries · 40 affection · 35 trust + traje_lujo', nota: 'Requires 1 bar ending unlocked' },
        ].map(c => (
          <div key={c.tipo} style={{ padding: '12px 16px', border: '1px solid rgba(212,175,55,.15)', display: 'grid', gridTemplateColumns: '100px 1fr auto', gap: 16, alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.2em', color: 'var(--gold)' }}>{c.tipo}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)' }}>{c.req}</span>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.15em', color: 'var(--beige)', opacity: .6 }}>{c.nota}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function GuidePicnic() {
  return (
    <div style={{ maxWidth: 760 }}>
      <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--cream)', marginBottom: 6 }}>Casual Date — Beach Picnic</div>
      <GP>The foundation of the system. Every other date type unlocks through this one, and it's the first place where your choices carry real weight.</GP>

      <GH>How the ending is decided</GH>
      <GStatRow stats={[{ label: 'mood <', value: '25 → Disappointing', good: false }]} />
      <GStatRow stats={[{ label: 'mood ≥ 90 + romance ≥ 55 + chemistry ≥', value: '50 → Lustful', good: true }]} />
      <GP>High mood with high romance but below the lustful threshold → Romantic. Correct but not charged → Friends.</GP>

      <GH>Key choices</GH>
      <div style={{ display: 'grid', gap: 10, marginBottom: 16 }}>
        {[
          { p: 'Q1', tip: 'Help her with the blanket', effect: 'Raises chemistry and comfort.' },
          { p: 'Q2', tip: 'Quiet moments / Her company', effect: 'Best options. Saying you\'re bored carries a heavy penalty.' },
          { p: 'Q3', tip: 'Honesty · Loyalty · Humour', effect: 'The physical answer drops chemistry and comfort and raises awkwardness.' },
          { p: 'Q4', tip: 'Freedom · Protecting the crew', effect: 'Treasure also works for a lighter, more playful route.' },
          { p: 'Q5', tip: 'That she\'s indispensable', effect: 'Golden answer. Adds romance. Her skill also works. Avoid reducing her to money.' },
          { p: 'Q6', tip: 'Wanted to get to know her · Wanted to give her a break', effect: 'Saying you like her directly on this first date causes a sharp drop across chemistry, comfort, romance, and fun, plus awkwardness.' },
          { p: 'Q7', tip: 'Whenever you want · Let\'s make this a tradition', effect: '"Depends" or any direct hint about continuing the night destroys the route.' },
        ].map(r => (
          <div key={r.p} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 12, padding: '10px 14px', border: '1px solid rgba(212,175,55,.12)' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, color: 'var(--gold)', letterSpacing: '.15em' }}>{r.p}</span>
            <div>
              <div style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--cream)', marginBottom: 3 }}><strong>{r.tip}</strong></div>
              <div style={{ fontFamily: 'var(--f-serif)', fontSize: 12, color: 'var(--beige)', opacity: .8 }}>{r.effect}</div>
            </div>
          </div>
        ))}
      </div>

      <GTip><strong>Special item:</strong> Strawberries with chocolate or Champagne trigger a unique moment and push the ending toward a perfect connection.</GTip>

      <GH>How to unlock each ending</GH>
      <GEnding num="1" title="Disappointing" stats={[{ label: 'mood <', value: '25', good: false }]}>
        <GP>Q2: bored · Q3: physical · Q6: I like you · Q7: depends.</GP>
      </GEnding>
      <GEnding num="2" title="Friends">
        <GP>Play warm but not romantic. Avoid the charged options in Q5, Q6, and Q7.</GP>
        <GP>Q2: quiet moments · Q3: humour or loyalty · Q5: her skill · Q6: her company or a break · Q7: if you want to.</GP>
      </GEnding>
      <GEnding num="3" title="Romantic">
        <GP>A good, tender route without hitting the lustful threshold. <strong style={{ color: 'var(--gold)' }}>Shortcut:</strong> reach the lustful route and choose <GCode>No</GCode> at the final menu — the game gives you this ending instead.</GP>
        <GP>Q5: indispensable · Q6: a break or get to know her · Q7: whenever you want.</GP>
      </GEnding>
      <GEnding num="4" title="Lustful" stats={[{ label: 'mood ≥', value: '90', good: true }, { label: 'romance ≥', value: '55', good: true }, { label: 'chemistry ≥', value: '50', good: true }]}>
        <GP>Q2: quiet moments · Q3: honesty or loyalty · Q4: freedom or crew · Q5: indispensable · Q6: get to know her or a break · Q7: whenever you want or tradition.</GP>
        <GTip>Special item: strawberries with chocolate or champagne. Final menu: <GCode>Yes</GCode>.</GTip>
      </GEnding>
    </div>
  );
}

/* Preference badge colours */
const PREF_COLOR = {
  Loves:   { bg: 'rgba(212,175,55,.12)',  border: 'rgba(212,175,55,.5)',  text: 'var(--gold)' },
  Likes:   { bg: 'rgba(85,221,136,.07)',  border: 'rgba(85,221,136,.35)', text: 'var(--success)' },
  Neutral: { bg: 'rgba(255,255,255,.04)', border: 'rgba(255,255,255,.12)',text: 'var(--beige)' },
  Dislikes:{ bg: 'rgba(255,85,85,.07)',   border: 'rgba(255,85,85,.3)',   text: 'var(--danger)' },
};

function GPrefBadge({ pref }) {
  const c = PREF_COLOR[pref] ?? PREF_COLOR.Neutral;
  return (
    <span style={{ padding: '2px 8px', background: c.bg, border: `1px solid ${c.border}`, fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: c.text }}>
      {pref}
    </span>
  );
}

function GPrefTable({ rows }) {
  return (
    <div style={{ display: 'grid', gap: 6, marginBottom: 16 }}>
      {rows.map(([item, pref, note]) => (
        <div key={item} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center', padding: '8px 12px', border: '1px solid rgba(212,175,55,.1)', background: 'rgba(11,11,20,.3)' }}>
          <div>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--cream)' }}>{item}</span>
            {note && <span style={{ fontFamily: 'var(--f-serif)', fontSize: 11, color: 'var(--beige)', opacity: .65, marginLeft: 8 }}>{note}</span>}
          </div>
          <GPrefBadge pref={pref} />
        </div>
      ))}
    </div>
  );
}

function GConvRound({ num, question, choices }) {
  return (
    <div style={{ marginBottom: 18, border: '1px solid rgba(212,175,55,.15)', background: 'rgba(11,11,20,.35)' }}>
      <div style={{ padding: '10px 16px', borderBottom: '1px solid rgba(212,175,55,.12)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, color: 'var(--gold)', minWidth: 22 }}>{num}</span>
        <span style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--cream)' }}>{question}</span>
      </div>
      <div style={{ display: 'grid', gap: 0 }}>
        {choices.map((c, i) => {
          const hasPos = c.stats.some(s => s.good);
          const hasNeg = c.stats.some(s => !s.good);
          const isOnly = c.stats.length > 0 && !hasPos && hasNeg;
          return (
            <div key={i} style={{ padding: '8px 16px', borderBottom: i < choices.length - 1 ? '1px solid rgba(255,255,255,.04)' : 'none', display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: isOnly ? 'rgba(255,120,120,.85)' : 'var(--beige)' }}>
                {c.text}
              </span>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                {c.stats.map((s, j) => (
                  <span key={j} style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, padding: '1px 6px', background: s.good ? 'rgba(85,221,136,.08)' : 'rgba(255,85,85,.08)', border: `1px solid ${s.good ? 'rgba(85,221,136,.3)' : 'rgba(255,85,85,.3)'}`, color: s.good ? 'var(--success)' : 'var(--danger)', whiteSpace: 'nowrap' }}>
                    {s.label} {s.value}
                  </span>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function GuideBar() {
  return (
    <div style={{ maxWidth: 800 }}>
      <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--cream)', marginBottom: 6 }}>Normal Date — Bar Night</div>
      <GP>Five rounds inside the bar. Each one involves conversation and drink or food orders. The drink system actively modifies your stats every time you order — choosing what Nami enjoys makes a measurable difference.</GP>

      <GH>How the ending is decided</GH>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(255,85,85,.35)', background: 'rgba(255,85,85,.07)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--danger)' }}>mood &lt; 25 → Disappointing</span>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(85,221,136,.3)', background: 'rgba(85,221,136,.06)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--success)' }}>mood ≥ 60 + romance ≥ 60 → Romantic</span>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(212,175,55,.35)', background: 'rgba(212,175,55,.07)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--gold)' }}>mood ≥ 90 + romance ≥ 60 + chemistry ≥ 55 → Lustful</span>
      </div>

      <GH>Drink system</GH>
      <GP>Every drink you order is scored by two multipliers multiplied together: <strong style={{ color: 'var(--cream)' }}>category</strong> × <strong style={{ color: 'var(--cream)' }}>Nami's preference</strong>. The result adds directly to <GCode>mood</GCode> and <GCode>chemistry</GCode>.</GP>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
        <div style={{ padding: '14px 16px', border: '1px solid rgba(212,175,55,.2)', background: 'rgba(212,175,55,.04)' }}>
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.2em', color: 'var(--gold)', marginBottom: 10 }}>Category multiplier</div>
          {[['Soft drink', '×0.3'], ['Economy', '×0.6'], ['Normal', '×1.0'], ['Premium', '×1.5']].map(([cat, mul]) => (
            <div key={cat} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)' }}>{cat}</span>
              <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--cream)' }}>{mul}</span>
            </div>
          ))}
        </div>
        <div style={{ padding: '14px 16px', border: '1px solid rgba(212,175,55,.2)', background: 'rgba(212,175,55,.04)' }}>
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.2em', color: 'var(--gold)', marginBottom: 10 }}>Preference multiplier</div>
          {[['Loves', '×2.0'], ['Likes', '×1.5'], ['Neutral', '×1.0'], ['Dislikes', '×−0.8']].map(([pref, mul]) => (
            <div key={pref} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)' }}>{pref}</span>
              <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--cream)' }}>{mul}</span>
            </div>
          ))}
        </div>
      </div>

      <GTip><strong>Best pick:</strong> A Premium drink Nami loves scores ×1.5 × ×2.0 = ×3.0 — the highest possible multiplier per round.</GTip>
      <GAvoid><strong>Soft drink dampening:</strong> After 3 or more soft drinks in a session, mood and chemistry gains from all subsequent orders are halved regardless of preference.</GAvoid>

      <GH>Nami's drink preferences</GH>
      <GPrefTable rows={[
        ['Tangerine Fantasy', 'Loves', 'Premium · her signature'],
        ['Grand Line Storm', 'Loves', 'Premium'],
        ['Tropical Breeze', 'Likes', 'Normal'],
        ["Sea King's Blood", 'Likes', 'Normal'],
        ['Sparkling water', 'Neutral', 'Soft'],
        ['House wine', 'Neutral', 'Economy'],
        ['Kombucha Seaweed', 'Dislikes', 'Soft'],
        ["Sailor's Grog", 'Dislikes', 'Economy'],
      ]} />

      <GH>Food — Round 2</GH>
      <GP>The bartender asks if you'd like something to eat. You can skip with no stat loss, or order a dish. Preference multiplier works the same as drinks.</GP>
      <div style={{ display: 'grid', gap: 6, marginBottom: 16 }}>
        {[
          { pref: 'Loves', item: 'Garlic Shrimp', sub: 'Gambas al Ajillo · 450  berry', stats: 'comfort +10 · romance +12 · chemistry +6' },
          { pref: 'Likes', item: 'Galician Octopus', sub: 'Pulpo a la Gallega · 500 berry', stats: 'comfort & romance boost' },
          { pref: 'Likes', item: 'Cheese Board', sub: 'Tabla de Quesos · 400 berry', stats: 'comfort & romance' },
          { pref: 'Likes', item: 'Fried Calamari', sub: 'Calamares Fritos · 350 berry', stats: 'comfort & fun' },
          { pref: 'Neutral', item: 'Mixed Nuts / Garlic Bread / Spicy Potatoes', sub: null, stats: 'minor comfort, no penalty' },
          { pref: 'Dislikes', item: 'Marinated Olives', sub: 'Aceitunas', stats: 'stat penalty' },
          { pref: 'Dislikes', item: 'Tuna Turnovers', sub: 'Empanadillas', stats: 'stat penalty' },
        ].map(r => {
          const c = PREF_COLOR[r.pref] ?? PREF_COLOR.Neutral;
          return (
            <div key={r.item} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center', padding: '8px 12px', border: '1px solid rgba(212,175,55,.1)', background: 'rgba(11,11,20,.3)' }}>
              <div>
                <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--cream)' }}>{r.item}</span>
                {r.sub && <span style={{ fontFamily: 'var(--f-serif)', fontSize: 11, color: 'var(--beige)', opacity: .6, marginLeft: 8 }}>{r.sub}</span>}
                <span style={{ display: 'block', fontFamily: 'ui-monospace, monospace', fontSize: 10, color: r.pref === 'Dislikes' ? 'var(--danger)' : 'var(--beige)', opacity: .75, marginTop: 2 }}>{r.stats}</span>
              </div>
              <GPrefBadge pref={r.pref} />
            </div>
          );
        })}
      </div>

      <GH>Conversation — 5 rounds</GH>

      <GConvRound num="1" question="How did you find this place?"
        choices={[
          { text: '"I reserved it weeks ago"',            stats: [{ label: 'romance', value: '+8', good: true }, { label: 'chemistry', value: '+3', good: true }] },
          { text: '"I found it by chance"',               stats: [{ label: 'romance', value: '+2', good: true }] },
          { text: '"A crew mate told me"',                stats: [{ label: 'mood', value: '+3', good: true }] },
          { text: '"I had no idea if it was good"',       stats: [{ label: 'awkwardness', value: '+5', good: false }] },
        ]}
      />

      <GConvRound num="2" question="What do you picture for the future?"
        choices={[
          { text: '"Seeing the crew free"',              stats: [{ label: 'romance', value: '+7', good: true }, { label: 'comfort', value: '+5', good: true }] },
          { text: '"Being King of the World"',           stats: [{ label: 'romance', value: '+5', good: true }, { label: 'fun', value: '+4', good: true }] },
          { text: '"Earning enough to retire"',          stats: [{ label: 'chemistry', value: '−3', good: false }, { label: 'comfort', value: '−2', good: false }] },
          { text: '"I haven\'t thought about it"',       stats: [{ label: 'awkwardness', value: '+8', good: false }, { label: 'romance', value: '−5', good: false }] },
        ]}
      />

      <GConvRound num="3" question="Why did you invite me specifically?"
        choices={[
          { text: '"Your company makes everything better"',   stats: [{ label: 'romance', value: '+10', good: true }, { label: 'chemistry', value: '+5', good: true }] },
          { text: '"I wanted to get to know you better"',    stats: [{ label: 'romance', value: '+8', good: true }, { label: 'comfort', value: '+6', good: true }] },
          { text: '"You were free tonight"',                 stats: [{ label: 'romance', value: '−12', good: false }, { label: 'awkwardness', value: '+15', good: false }] },
          { text: '"I felt like going out with someone"',    stats: [{ label: 'romance', value: '−8', good: false }, { label: 'awkwardness', value: '+10', good: false }] },
        ]}
      />

      <GConvRound num="4" question="What do you enjoy most right now — the place or being with me?"
        choices={[
          { text: '"Being with you, no question"',                          stats: [{ label: 'romance', value: '+9', good: true }, { label: 'chemistry', value: '+6', good: true }] },
          { text: '"Both. The place wouldn\'t be the same without you"',   stats: [{ label: 'romance', value: '+7', good: true }, { label: 'chemistry', value: '+5', good: true }] },
          { text: '"The atmosphere — it puts me in a good mood"',          stats: [{ label: 'romance', value: '−4', good: false }, { label: 'comfort', value: '−3', good: false }] },
          { text: '"The drinks, honestly"',                                 stats: [{ label: 'romance', value: '−10', good: false }, { label: 'fun', value: '−5', good: false }] },
        ]}
      />

      <GConvRound num="5" question="What should we do after this?"
        choices={[
          { text: '"Walk along the harbour"',                  stats: [{ label: 'romance', value: '+8', good: true }, { label: 'comfort', value: '+6', good: true }, { label: 'fun', value: '+5', good: true }] },
          { text: '"I know a quieter place"',                  stats: [{ label: 'romance', value: '+6', good: true }, { label: 'chemistry', value: '+5', good: true }] },
          { text: '"Head back — early start tomorrow"',        stats: [{ label: 'romance', value: '−8', good: false }, { label: 'chemistry', value: '−5', good: false }] },
          { text: '"Party — find the next spot"',              stats: [{ label: 'fun', value: '+3', good: true }, { label: 'romance', value: '−5', good: false }, { label: 'awkwardness', value: '+4', good: false }] },
        ]}
      />

      <GH>How to unlock each ending</GH>
      <GEnding num="5" title="Disappointing" stats={[{ label: 'mood <', value: '25', good: false }]}>
        <GP>Round 1: "had no idea" · Round 2: "haven't thought about it" · Round 3: "you were free" or "going out with someone" · Round 4: "the drinks" · Round 5: "head back". Skip the Premium drinks Nami loves.</GP>
      </GEnding>
      <GEnding num="6" title="Friends">
        <GP>Play warm but don't stack romance. Round 1: "crew mate told me" · Round 2: "crew free" or "King" without follow-through · Round 3: "get to know you" · Round 4: "both" · Round 5: let the night end naturally. Keep drinks in the Neutral or Likes range.</GP>
      </GEnding>
      <GEnding num="7" title="Romantic" stats={[{ label: 'mood ≥', value: '60', good: true }, { label: 'romance ≥', value: '60', good: true }]}>
        <GP>Round 1: "reserved it weeks ago" · Round 2: "seeing the crew free" · Round 3: "get to know you better" or "your company" · Round 4: "being with you" · Round 5: "walk along the harbour". Order Tangerine Fantasy or Grand Line Storm at least twice.</GP>
      </GEnding>
      <GEnding num="8" title="Lustful" stats={[{ label: 'mood ≥', value: '90', good: true }, { label: 'romance ≥', value: '60', good: true }, { label: 'chemistry ≥', value: '55', good: true }]}>
        <GP>Run the full romantic route above with no deviations. Order Tangerine Fantasy or Grand Line Storm every round you have a drink choice. Hit all five top choices in conversations and pair them with her favourite foods.</GP>
      </GEnding>
    </div>
  );
}

function GuideRestaurant() {
  return (
    <div style={{ maxWidth: 800 }}>
      <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--cream)', marginBottom: 6 }}>Luxury Date — Restaurant Dinner</div>
      <GP>Three courses, three conversations. The thresholds are tighter here and one careless answer at the wrong moment can sink the route. The ordering system runs through every course — what you pick for her matters as much as what you say.</GP>

      <GH>How the ending is decided</GH>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(255,85,85,.35)', background: 'rgba(255,85,85,.07)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--danger)' }}>mood &lt; 25 → Disappointing</span>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(85,221,136,.3)', background: 'rgba(85,221,136,.06)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--success)' }}>mood ≥ 60 + romance ≥ 65 → Romantic</span>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(212,175,55,.35)', background: 'rgba(212,175,55,.07)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--gold)' }}>mood ≥ 90 + romance ≥ 65 + chemistry ≥ 60 → Lustful</span>
      </div>

      <GH>Ordering system</GH>
      <GP>When ordering, you choose the mode first, then the specific item. Available modes:</GP>
      <div style={{ display: 'grid', gap: 8, marginBottom: 14 }}>
        {[
          { mode: 'Order the same as her', note: 'Safe and neutral — no penalty, small comfort gain.' },
          { mode: 'Order for both of you', note: 'High reward if you pick what she loves; penalised if you guess wrong.' },
          { mode: 'Ask her recommendation', note: 'Small romance gain from attentiveness, regardless of what she picks.' },
        ].map(r => (
          <div key={r.mode} style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 12, padding: '10px 14px', border: '1px solid rgba(212,175,55,.12)', alignItems: 'start' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.15em', color: 'var(--gold)' }}>{r.mode}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)' }}>{r.note}</span>
          </div>
        ))}
      </div>
      <GAvoid><strong>"Whatever" as the ordering answer is an instant date-killer:</strong> romance is set to 0 and awkwardness jumps to 25. The single worst input in the entire dating system. Never use it.</GAvoid>

      <GH>Drinks</GH>
      <GPrefTable rows={[
        ['Mimosa', 'Loves'],
        ['Fresh orange juice', 'Loves'],
        ['Sparkling water', 'Likes'],
        ['Rosé wine', 'Likes'],
        ['Still water', 'Neutral'],
        ['House white', 'Neutral'],
        ['Any spirit', 'Dislikes', '(whisky, rum, gin, etc.)'],
      ]} />

      <GH>Starters</GH>
      <GPrefTable rows={[
        ['Tuna Carpaccio', 'Loves'],
        ['Burrata with heirloom tomatoes', 'Likes'],
        ['Smoked Salmon', 'Likes'],
        ['French Onion Soup', 'Dislikes'],
        ['Caesar Salad', 'Dislikes'],
      ]} />

      <GH>Mains</GH>
      <GPrefTable rows={[
        ['Grilled Lobster', 'Loves'],
        ['Duck Confit', 'Likes'],
        ['Sea Bass en papillote', 'Likes'],
        ['Beef Steak', 'Dislikes'],
        ['Truffle Pasta', 'Dislikes'],
      ]} />

      <GH>Desserts</GH>
      <GPrefTable rows={[
        ['Flambéed Fruits', 'Loves'],
        ['Chocolate Fondant', 'Likes'],
        ['Crème Brûlée', 'Likes'],
        ['Fruit Salad', 'Dislikes'],
        ['Lemon Sorbet', 'Dislikes'],
      ]} />

      <GH>Conversations — 3 rounds (between courses)</GH>

      <GConvRound num="After starters" question="Why did you choose somewhere like this?"
        choices={[
          { text: '"I wanted you to be comfortable"',         stats: [{ label: 'romance', value: '+8', good: true }, { label: 'comfort', value: '+7', good: true }] },
          { text: '"The atmosphere called for it"',           stats: [{ label: 'romance', value: '+5', good: true }, { label: 'chemistry', value: '+4', good: true }] },
          { text: '"It seemed like the right thing"',        stats: [{ label: 'comfort', value: '+4', good: true }] },
          { text: '"I don\'t know, impulse"',                 stats: [{ label: 'awkwardness', value: '+8', good: false }, { label: 'romance', value: '−5', good: false }] },
        ]}
      />

      <GConvRound num="After main" question="Why did you invite me tonight?"
        choices={[
          { text: '"Getting to know you better"',             stats: [{ label: 'romance', value: '+10', good: true }, { label: 'comfort', value: '+6', good: true }] },
          { text: '"Your company"',                          stats: [{ label: 'romance', value: '+8', good: true }, { label: 'chemistry', value: '+5', good: true }] },
          { text: '"You seemed like you\'d appreciate it"',  stats: [{ label: 'romance', value: '+5', good: true }, { label: 'comfort', value: '+4', good: true }] },
          { text: '"You were available"',                    stats: [{ label: 'romance', value: '−15', good: false }, { label: 'awkwardness', value: '+18', good: false }] },
        ]}
      />

      <GConvRound num="After dessert" question="How was tonight for you?"
        choices={[
          { text: '"I\'d like to do this again"',            stats: [{ label: 'romance', value: '+9', good: true }, { label: 'chemistry', value: '+6', good: true }] },
          { text: '"It was good"',                           stats: [{ label: 'romance', value: '+5', good: true }, { label: 'comfort', value: '+4', good: true }] },
          { text: '"I\'m glad it worked out"',               stats: [{ label: 'chemistry', value: '+4', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"It was nothing special"',                stats: [{ label: 'romance', value: '−10', good: false }, { label: 'chemistry', value: '−5', good: false }] },
        ]}
      />

      <GTip>At the end of the night there is an option to give her a rose. It adds a flat bonus to <GCode>romance</GCode> — always take it.</GTip>

      <GH>How to unlock each ending</GH>
      <GEnding num="9" title="Disappointing" stats={[{ label: 'mood <', value: '25', good: false }]}>
        <GP>Use "Whatever" when ordering (sets romance to 0), pick her dislikes across all courses, answer "impulse" after starters and "you were available" after the main.</GP>
      </GEnding>
      <GEnding num="10" title="Friends">
        <GP>Opener: "It seemed like the right thing" · Order the same as her each course (safe neutral) · After starters: "the atmosphere" · After main: "your company" · After dessert: "it was good". Keep the tone warm but unhurried.</GP>
      </GEnding>
      <GEnding num="11" title="Romantic" stats={[{ label: 'mood ≥', value: '60', good: true }, { label: 'romance ≥', value: '65', good: true }]}>
        <GP>Order for both of you and pick Tuna Carpaccio → Grilled Lobster → Flambéed Fruits. Drinks: Mimosa or OJ every round. Conversations: "comfortable" · "getting to know you" · "I'd like to do this again". Give the rose.</GP>
      </GEnding>
      <GEnding num="12" title="Lustful" stats={[{ label: 'mood ≥', value: '90', good: true }, { label: 'romance ≥', value: '65', good: true }, { label: 'chemistry ≥', value: '60', good: true }]}>
        <GP>Run the full romantic route above with no deviations. Hit her Loves on every course, top conversations throughout, and give the rose. Includes the love hotel sequence.</GP>
      </GEnding>
    </div>
  );
}

function GuideSummary() {
  return (
    <div style={{ maxWidth: 760 }}>
      <GH>All endings at a glance</GH>
      <div style={{ display: 'grid', gap: 8, marginBottom: 24 }}>
        {[
          { date: 'Picnic', endings: 'Disappointing · Friends · Romantic · Lustful', count: 4 },
          { date: 'Bar', endings: 'Disappointing · Friends · Romantic · Lustful', count: 4 },
          { date: 'Restaurant', endings: 'Disappointing · Friends · Romantic · Lustful', count: 4 },
        ].map(r => (
          <div key={r.date} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 50px', gap: 16, alignItems: 'center', padding: '10px 14px', border: 'rgba(85,221,136,.2) 1px solid', background: 'rgba(85,221,136,.03)' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.15em', color: 'var(--success)' }}>{r.date}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)' }}>{r.endings}</span>
            <span style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, color: 'var(--gold)', textAlign: 'right' }}>{r.count}</span>
          </div>
        ))}
        <div style={{ padding: '12px 14px', background: 'rgba(212,175,55,.06)', border: '1px solid rgba(212,175,55,.2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.2em', color: 'var(--gold)' }}>Total endings</span>
          <span style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 22, color: 'var(--gold)' }}>12</span>
        </div>
      </div>

      <GH>Quick reference by goal</GH>
      <div style={{ display: 'grid', gap: 10 }}>
        {[
          { goal: 'Disappointing', how: 'Blunt answers · force awkwardness · too fast or too cold throughout.' },
          { goal: 'Friends', how: 'Play warm but without romantic charge. A correct night, not an electric one.' },
          { goal: 'Romantic', how: 'Empathetic answers · genuine interest in her · nothing sexual too soon · consistent mood and romance.' },
          { goal: 'Lustful', how: 'Near-perfect route across all questions. Picnic: hit the stat thresholds. Bar and Restaurant: requires the previous lustful ending unlocked first.' },
        ].map(r => (
          <div key={r.goal} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16, padding: '12px 16px', border: '1px solid rgba(212,175,55,.12)' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.15em', color: 'var(--gold)' }}>{r.goal}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)', lineHeight: 1.5 }}>{r.how}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Tab: Gallery ---------- */
function TabGallery() {
  return <TabComingSoon label="Art Gallery" />;
}

/* ---------- Tab: Devlog ---------- */
function TabDevlog() {
  return <TabComingSoon label="Devlog" />;
}

// Inject responsive behaviour for members area
if (!document.getElementById('members-rs')) {
  const s = document.createElement('style'); s.id = 'members-rs';
  s.textContent = `
    @media (max-width: 900px) {
      #members .card > div[style*="grid-template-columns: 1.4fr 1fr"],
      #members .card > div[style*="grid-template-columns: 2fr 1fr"],
      #members .card > div[style*="grid-template-columns: 360px 1fr"],
      #members div[style*="grid-template-columns: 180px 1fr auto"] {
        grid-template-columns: 1fr !important;
      }
    }
  `;
  document.head.appendChild(s);
}

window.MembersSection = MembersSection;