// 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 }}>Loguetown</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 · Loguetown · 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 Loguetown 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 + picnic set', nota: 'Available from the start' },
          { tipo: 'Bar', req: '5000 berries · 25 affection · 20 trust + smart casual outfit', nota: 'Requires 1 picnic ending unlocked' },
          { tipo: 'Restaurant', req: '25000 berries · 40 affection · 35 trust + luxury suit', 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() {
  const [goal, setGoal] = React.useState('lustful');
  return (
    <div style={{ maxWidth: 800 }}>
      <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 and the gate to everything else. Two preparation choices, eight conversation rounds, and a banquet of six dishes and three drinks shared one item at a time. The Picnic Lustful ending is the only one not gated by a prior unlock — start here.</GP>

      <GoalSelector goal={goal} setGoal={setGoal} />

      <GH>How the ending is decided</GH>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 14 }}>
        <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 ≥ 55 → 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 ≥ 55 + chemistry ≥ 50 → Lustful</span>
        <span style={{ padding: '4px 10px', border: '1px solid rgba(255,255,255,.1)', fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'var(--beige)' }}>else → Friends</span>
      </div>

      <GH>The "Perfect Path" — the secret of the banquet</GH>
      <GP>The picnic tracks a hidden <GCode>romantic_choices_count</GCode>. Four of the eight rounds (Q5–Q8) have one option that adds <strong style={{ color: 'var(--gold)' }}>+1</strong> to that counter and gives a small <GCode>romance</GCode> boost. End-of-date bonuses are tiered:</GP>
      <div style={{ display: 'grid', gap: 6, marginBottom: 14 }}>
        {[
          ['2 romantic picks', '+15 romance, +8 chemistry — "Subtle warmth"'],
          ['3 romantic picks', '+30 romance, +15 chemistry — locks Romantic at minimum'],
          ['4 romantic picks (no special item)', '+35 romance, +15 chemistry'],
          ['4 romantic picks + Strawberries / Champagne as the last shared item', '+75 romance, +40 chemistry, +30 comfort, +40 fun — Lustful guaranteed'],
        ].map(([k, v], i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '230px 1fr', gap: 12, padding: '8px 14px', border: '1px solid rgba(212,175,55,.12)', background: i === 3 ? 'rgba(212,175,55,.06)' : 'transparent' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.12em', color: i === 3 ? 'var(--gold)' : 'var(--beige)' }}>{k}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 12, color: i === 3 ? 'var(--cream)' : 'var(--beige)' }}>{v}</span>
          </div>
        ))}
      </div>
      <GTip><strong>Save Strawberries with Chocolate or Champagne for the very last share.</strong> The banquet items are shuffled randomly but you choose which one to share each round. Whichever you pick after Q8 is the "closing item" — only Strawberries or Champagne trigger the Perfect Path bonus.</GTip>

      <GH>Conversation — 8 rounds</GH>
      <GP style={{ fontSize: 12, opacity: .8 }}>★ = ideal pick for the selected goal · ⚠ = trap (drops stats, raises awkwardness).</GP>

      <GConvRound num="Q1" goal={goal} question="Nami: Need a hand with the blanket?"
        choices={[
          { text: '"Yes, help me set up everything"',  pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'chemistry', value: '+5', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"Don\'t worry, I\'ll handle it"',   pick: ['friends'],                         stats: [{ label: 'comfort', value: '+5', good: true }] },
        ]}
      />

      <GConvRound num="Q2" goal={goal} question="Nami: Do you also enjoy these peaceful moments?"
        choices={[
          { text: '"Yes, they\'re my favorite"',                pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'comfort', value: '+4', good: true }, { label: 'chemistry', value: '+3', good: true }] },
          { text: '"Sometimes, but I prefer battles"',          stats: [{ label: 'fun', value: '+3', good: true }, { label: 'comfort', value: '−2', good: false }] },
          { text: '"Only when I\'m in good company"',           stats: [{ label: 'chemistry', value: '−5', good: false }, { label: 'comfort', value: '−3', good: false }] },
          { text: '"Not really, to be honest"', trap: true,     stats: [{ label: 'comfort', value: '−8', good: false }, { label: 'chemistry', value: '−5', good: false }, { label: 'awk', value: '+5', good: false }] },
        ]}
      />

      <GConvRound num="Q3" goal={goal} question="Nami: What do you value most in a person?"
        choices={[
          { text: '"Honesty"',          pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'chemistry', value: '+5', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"Sense of humor"',   pick: ['friends'],                         stats: [{ label: 'fun', value: '+5', good: true }, { label: 'chemistry', value: '+2', good: true }] },
          { text: '"Loyalty"',          pick: ['romantic', 'lustful'],             stats: [{ label: 'comfort', value: '+4', good: true }, { label: 'chemistry', value: '+4', good: true }] },
          { text: '"Good looks, obviously"', trap: true,                           stats: [{ label: 'chemistry', value: '−10', good: false }, { label: 'comfort', value: '−8', good: false }, { label: 'awk', value: '+8', good: false }] },
        ]}
      />

      <GConvRound num="Q4" goal={goal} question="Nami: What's your dream? What are you really chasing on this voyage?"
        choices={[
          { text: '"Absolute freedom"',                pick: ['romantic', 'lustful'],          stats: [{ label: 'chemistry', value: '+4', good: true }, { label: 'fun', value: '+3', good: true }] },
          { text: '"Protecting those I care about"',   pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'comfort', value: '+5', good: true }, { label: 'chemistry', value: '+3', good: true }] },
          { text: '"Treasures and adventures"',        pick: ['friends'],                       stats: [{ label: 'fun', value: '+5', good: true }, { label: 'chemistry', value: '+3', good: true }] },
          { text: '"I don\'t know yet"',                                                        stats: [{ label: 'comfort', value: '−3', good: false }, { label: 'chemistry', value: '−2', good: false }] },
        ]}
      />

      <GConvRound num="Q5" goal={goal} question="Nami: Can I ask something personal? What do you think of me — as a navigator?"
        note="★ This question counts toward the Romantic Counter."
        choices={[
          { text: '"You\'re indispensable to the crew"',           pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+3', good: true }, { label: 'comfort', value: '+5', good: true }, { label: '♥ count', value: '+1', good: true }] },
          { text: '"You\'re incredible at everything you do"', trap: true,                                  stats: [{ label: 'chemistry', value: '−8', good: false }, { label: 'comfort', value: '−6', good: false }, { label: 'awk', value: '+5', good: false }] },
          { text: '"You could improve with the money thing"',                                              stats: [{ label: 'fun', value: '+2', good: true }, { label: 'comfort', value: '−5', good: false }] },
          { text: '"You\'re the reason we\'re still alive"',       pick: ['friends'],                       stats: [{ label: 'comfort', value: '+5', good: true }, { label: 'chemistry', value: '+4', good: true }] },
        ]}
      />

      <GConvRound num="Q6" goal={goal} question="Nami: Do you have a special memory connected to the sea?"
        note="★ This question counts toward the Romantic Counter."
        choices={[
          { text: '"My childhood in the coastal village"',                       pick: ['romantic', 'lustful'], stats: [{ label: 'romance', value: '+3', good: true }, { label: 'comfort', value: '+5', good: true }, { label: '♥ count', value: '+1', good: true }] },
          { text: '"The first time I set sail as a pirate"',                     pick: ['friends'],             stats: [{ label: 'fun', value: '+4', good: true }, { label: 'chemistry', value: '+3', good: true }] },
          { text: '"Every day at sea is special"',                                                              stats: [{ label: 'comfort', value: '+3', good: true }, { label: 'fun', value: '+3', good: true }] },
          { text: '"I prefer creating new memories... like this one"', trap: true,                              stats: [{ label: 'chemistry', value: '−10', good: false }, { label: 'romance', value: '−8', good: false }, { label: 'awk', value: '+8', good: false }] },
        ]}
      />

      <GConvRound num="Q7" goal={goal} question="Nami: Why did you invite me on this date? What motivated you?"
        note="★ This question counts toward the Romantic Counter."
        choices={[
          { text: '"I wanted to get to know you better outside the ship"',     pick: ['romantic', 'lustful'], stats: [{ label: 'romance', value: '+5', good: true }, { label: 'chemistry', value: '+5', good: true }, { label: '♥ count', value: '+1', good: true }] },
          { text: '"I like you and wanted to show it"', trap: true,                                            stats: [{ label: 'chemistry', value: '−12', good: false }, { label: 'romance', value: '−12', good: false }, { label: 'awk', value: '+12', good: false }] },
          { text: '"I thought you deserved a break"',                          pick: ['friends'],              stats: [{ label: 'romance', value: '+4', good: true }, { label: 'comfort', value: '+5', good: true }] },
          { text: '"Do I need a reason to spend time with you?"',                                              stats: [{ label: 'chemistry', value: '−6', good: false }, { label: 'awk', value: '+3', good: false }] },
        ]}
      />

      <GConvRound num="Q8" goal={goal} question="Nami: Could this happen again? Another date someday?"
        note="★ This question counts toward the Romantic Counter."
        choices={[
          { text: '"Definitely. Whenever you want."',                  pick: ['romantic', 'lustful'], stats: [{ label: 'romance', value: '+6', good: true }, { label: 'chemistry', value: '+4', good: true }, { label: '♥ count', value: '+1', good: true }] },
          { text: '"Only if you want to, of course"',                  pick: ['friends'],             stats: [{ label: 'comfort', value: '+4', good: true }, { label: 'chemistry', value: '+3', good: true }] },
          { text: '"Are you kidding? This has to be a tradition"',                                    stats: [{ label: 'romance', value: '+5', good: true }, { label: 'fun', value: '+5', good: true }] },
          { text: '"Depends on how tonight ends..."', trap: true,                                     stats: [{ label: 'chemistry', value: '−15', good: false }, { label: 'romance', value: '−15', good: false }, { label: 'awk', value: '+18', good: false }] },
        ]}
      />

      <GH>The banquet — 6 dishes & 3 drinks</GH>
      <GP>Each round you pick one item to share. The order is randomised every playthrough, so plan around <em>what</em> you share, not <em>when</em>. The closing item (the one shared after Q8) is the only one that can trigger the Perfect Path bonus.</GP>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
        <div style={{ padding: '12px 14px', border: '1px solid rgba(212,175,55,.15)' }}>
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: 'var(--gold)', marginBottom: 8 }}>Dishes</div>
          {[
            ['Strawberries with Chocolate', '★ Perfect Path · romance +12, chemistry +8'],
            ['Apple Tart', 'romance +8, fun +5'],
            ['Smoked Fish', 'comfort +8, fun +3'],
            ['Goat Cheese', 'comfort +6, chemistry +2'],
            ['Seasonal Fruits', 'fun +5, romance +3'],
            ['Sea Bread', 'comfort +5'],
          ].map(([n, e], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, padding: '4px 0', fontFamily: 'var(--f-serif)', fontSize: 12 }}>
              <span style={{ color: i === 0 ? 'var(--gold)' : 'var(--cream)' }}>{n}</span>
              <span style={{ color: 'var(--beige)', opacity: .75, fontSize: 11 }}>{e}</span>
            </div>
          ))}
        </div>
        <div style={{ padding: '12px 14px', border: '1px solid rgba(212,175,55,.15)' }}>
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: 'var(--gold)', marginBottom: 8 }}>Drinks</div>
          {[
            ['Sparkling Champagne', '★ Perfect Path · romance +15, fun +8'],
            ['Red Wine', 'romance +10, chemistry +5'],
            ['Sailor\'s Herbal Tea', 'comfort +8, chemistry +3'],
          ].map(([n, e], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, padding: '4px 0', fontFamily: 'var(--f-serif)', fontSize: 12 }}>
              <span style={{ color: i === 0 ? 'var(--gold)' : 'var(--cream)' }}>{n}</span>
              <span style={{ color: 'var(--beige)', opacity: .75, fontSize: 11 }}>{e}</span>
            </div>
          ))}
        </div>
      </div>

      <GH>How to unlock each ending</GH>
      <GEnding num="1" title="Disappointing" stats={[{ label: 'mood <', value: '25', good: false }]}>
        <GP>Stack the ⚠ traps: Q2 "Not really", Q3 "Good looks", Q7 "I like you", Q8 "Depends on tonight". The mood will plummet well below 25.</GP>
      </GEnding>
      <GEnding num="2" title="Friends">
        <GP>Warm but not charged. Avoid the four romantic picks in Q5–Q8 — pick the warm-but-platonic alternatives (e.g. Q5 "the reason we\'re still alive", Q6 "first time I set sail", Q7 "deserved a break", Q8 "only if you want to").</GP>
      </GEnding>
      <GEnding num="3" title="Romantic" stats={[{ label: 'mood ≥', value: '60', good: true }, { label: 'romance ≥', value: '55', good: true }]}>
        <GP>Hit 2–3 romantic picks across Q5–Q8 without the Perfect Path item, OR run the full Lustful route and pick <GCode>No</GCode> at the final yes/no menu — the game routes you here instead.</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 }]}>
        <GRecipe steps={[
          { label: 'Q1', text: '"Yes, help me set up everything"' },
          { label: 'Q2', text: '"Yes, they\'re my favorite"' },
          { label: 'Q3', text: '"Honesty" (or "Loyalty")' },
          { label: 'Q4', text: '"Absolute freedom" (or "Protecting" / "Treasures")' },
          { label: 'Q5 ★', text: '"You\'re indispensable to the crew"' },
          { label: 'Q6 ★', text: '"My childhood in the coastal village"' },
          { label: 'Q7 ★', text: '"I wanted to get to know you better outside the ship"' },
          { label: 'Q8 ★', text: '"Definitely. Whenever you want."' },
          { label: 'Banquet', text: 'Share other dishes/drinks during the rounds — keep Strawberries with Chocolate OR Champagne for last.' },
          { label: 'Final ★', text: 'Share Strawberries with Chocolate or Champagne after Q8 — Perfect Path activates.' },
          { label: 'Menu', text: 'At the closing yes/no menu, choose Yes.' },
        ]} />
      </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>
  );
}

/* Goal-aware conversation round. `choices[i].pick` is an array of goals this choice belongs to
   ('friends'|'romantic'|'lustful'). `choices[i].trap` flags catastrophic options. */
function GConvRound({ num, question, choices, goal = 'all', note }) {
  const isPick = (c) => goal !== 'all' && c.pick && c.pick.includes(goal);
  const dimmed = (c) => goal !== 'all' && !isPick(c) && !c.trap;
  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 pick = isPick(c);
          const dim = dimmed(c);
          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',
              background: pick ? 'rgba(212,175,55,.07)' : c.trap ? 'rgba(255,85,85,.04)' : 'transparent',
              borderLeft: pick ? '3px solid var(--gold)' : c.trap ? '3px solid rgba(255,85,85,.5)' : '3px solid transparent',
              opacity: dim ? .35 : 1,
              transition: 'opacity .15s, background .15s',
            }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--f-serif)', fontSize: 13, color: c.trap ? 'rgba(255,140,140,.95)' : pick ? 'var(--cream)' : 'var(--beige)' }}>
                {pick && <span style={{ color: 'var(--gold)', fontSize: 11 }}>★</span>}
                {c.trap && <span title="Trap — penalizes heavily" style={{ color: 'var(--danger)', fontSize: 11 }}>⚠</span>}
                {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>
      {note && (
        <div style={{ padding: '8px 16px', borderTop: '1px solid rgba(255,255,255,.04)', fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 12, color: 'var(--beige)', opacity: .75 }}>
          {note}
        </div>
      )}
    </div>
  );
}

/* Goal route selector — local state per guide. */
function GoalSelector({ goal, setGoal }) {
  const goals = [
    { id: 'all',      label: 'All Choices', color: 'var(--beige)' },
    { id: 'friends',  label: 'Friends',     color: 'var(--success)' },
    { id: 'romantic', label: 'Romantic',    color: '#ff69b4' },
    { id: 'lustful',  label: 'Lustful ★',   color: 'var(--gold)' },
  ];
  return (
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center', marginBottom: 20, padding: '10px 14px', border: '1px solid rgba(212,175,55,.18)', background: 'rgba(11,11,20,.4)' }}>
      <span style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 10, color: 'var(--gold)', marginRight: 8 }}>Plan a route ›</span>
      {goals.map(g => {
        const on = goal === g.id;
        return (
          <button key={g.id} onClick={() => setGoal(g.id)} style={{
            padding: '5px 12px', border: `1px solid ${on ? g.color : 'rgba(212,175,55,.2)'}`,
            background: on ? `rgba(212,175,55,${g.id === 'lustful' ? '.12' : '.04'})` : 'transparent',
            color: on ? g.color : 'var(--beige)', cursor: 'pointer',
            fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.15em',
          }}>{g.label}</button>
        );
      })}
    </div>
  );
}

/* Chain-unlock warning for Bar and Restaurant. */
function GChainWarning({ requires, fallback }) {
  return (
    <div style={{ display: 'flex', gap: 12, padding: '14px 18px', border: '1px solid rgba(212,175,55,.4)', background: 'rgba(212,175,55,.06)', marginBottom: 22 }}>
      <div style={{ fontSize: 22, color: 'var(--gold)', lineHeight: 1 }}>⛓</div>
      <div>
        <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 10, color: 'var(--gold)', marginBottom: 6 }}>Chained Lustful unlock</div>
        <p style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--cream)', lineHeight: 1.55, margin: 0 }}>
          The <strong>Lustful</strong> ending for this date will only trigger if you have already unlocked <strong style={{ color: 'var(--gold)' }}>{requires}</strong>. If you max out the stats here without that unlock, the game gives you <strong style={{ color: '#ff69b4' }}>{fallback}</strong> instead — even with a perfect playthrough.
        </p>
      </div>
    </div>
  );
}

/* Recipe — the step-by-step path to the Lustful ending. */
function GRecipe({ steps }) {
  return (
    <div style={{ padding: '18px 20px', border: '1px solid rgba(212,175,55,.35)', background: 'rgba(212,175,55,.04)', marginTop: 8 }}>
      <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.25em', fontSize: 10, color: 'var(--gold)', marginBottom: 14 }}>★ Lustful Recipe — step by step</div>
      <div style={{ display: 'grid', gap: 8 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '46px 1fr', gap: 12, alignItems: 'start' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.15em', color: 'var(--gold)', paddingTop: 2 }}>{s.label}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--cream)', lineHeight: 1.55 }}>{s.text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function GuideBar() {
  const [goal, setGoal] = React.useState('lustful');
  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 round combines a conversation question and one or more drink/food orders. The order system actively modifies your stats every time — what you pick for her matters as much as what you say.</GP>

      <GChainWarning requires="Picnic Lustful" fallback="Bar Romantic" />

      <GoalSelector goal={goal} setGoal={setGoal} />

      <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 <strong>for her or shared</strong> is scored by two multipliers: <strong style={{ color: 'var(--cream)' }}>category</strong> × <strong style={{ color: 'var(--cream)' }}>Nami's preference</strong>. Drinks ordered only for yourself don't move date stats.</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 = <strong style={{ color: 'var(--gold)' }}>×3.0</strong> — the highest possible multiplier per round.</GTip>
      <GAvoid><strong>Soft drink trap:</strong> Each soft drink adds to a hidden counter. From the 3rd soft drink onward, every subsequent <em>alcoholic</em> order suffers heavy dampening AND triggers a flat penalty across chemistry/comfort/romance/fun (−15 to −35 per stat). Ordering alcohol redeems 2 points of the counter. Stay on Normal or Premium from your first round.</GAvoid>

      <GH>Nami's drink preferences (Bar)</GH>
      <GPrefTable rows={[
        ['Grand Line Storm', 'Loves', '(Premium · tormenta_grandline)'],
        ['Nami\'s Fantasy', 'Loves', '(Premium · fantasia_nami · tangerines)'],
        ['Sunset Cocktail', 'Likes', '(Normal · coctel_sunset)'],
        ['Orangeade', 'Likes', '(Soft · naranjada)'],
        ['Red Wine / White Wine', 'Neutral', '(Normal)'],
        ['Premium Sake / Champagne', 'Neutral', '(Premium · still respectable on category alone)'],
        ['Cola / Fruit Water', 'Neutral', '(Soft — count toward the soft trap)'],
        ['Beer / Common Sake', 'Neutral', '(Economy)'],
        ['Lemonade', 'Dislikes', '(Soft)'],
        ['Sailor Cocktail', 'Dislikes', '(Normal)'],
        ['Mermaid\'s Kiss / Pirate Night', 'Dislikes', '(Premium — premium category does NOT save it, the negative preference wins)'],
      ]} />

      <GH>Food — Round 2 (optional)</GH>
      <GP>After the first drinks, the bartender asks if you'd like something to eat. Skipping has no stat cost. Ordering applies the same preference multiplier as drinks.</GP>
      <GPrefTable rows={[
        ['Garlic Shrimp', 'Loves', '(gambas_ajillo)'],
        ['Cheese Board', 'Likes', '(tabla_quesos)'],
        ['Fried Calamari', 'Likes', '(calamares_fritos)'],
        ['Galician Octopus', 'Likes', '(pulpo_gallega)'],
        ['Mixed Nuts / Garlic Bread / Spicy Potatoes', 'Neutral'],
        ['Marinated Olives', 'Dislikes', '(aceitunas)'],
        ['Tuna Turnovers', 'Dislikes', '(empanadillas)'],
      ]} />

      <GH>Conversation — 5 rounds (Q5 through Q9 in script)</GH>

      <GConvRound num="R1" goal={goal} question="Nami: This place is nice. How did you find it?"
        choices={[
          { text: '"I asked around for the best bar in the area"',     pick: ['romantic', 'lustful'],          stats: [{ label: 'chemistry', value: '+3', good: true }, { label: 'comfort', value: '+4', good: true }] },
          { text: '"It was just luck"',                                                                       stats: [{ label: 'romance', value: '−2', good: false }, { label: 'chemistry', value: '−2', good: false }, { label: 'awk', value: '+2', good: false }] },
          { text: '"The bartender got me a special reservation"',      pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+4', good: true }, { label: 'chemistry', value: '+2', good: true }, { label: 'comfort', value: '+2', good: true }] },
          { text: '"Someone recommended it to me"',                    pick: ['friends'],                       stats: [{ label: 'comfort', value: '+1', good: true }, { label: 'chemistry', value: '−2', good: false }] },
        ]}
      />

      <GConvRound num="R2" goal={goal} question="Nami: How do you see yourself in five years?"
        choices={[
          { text: '"As the King of Pirates"',                pick: ['romantic', 'lustful'],          stats: [{ label: 'fun', value: '+5', good: true }, { label: 'chemistry', value: '+3', good: true }, { label: 'comfort', value: '+2', good: true }] },
          { text: '"With an even stronger crew"',            pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'comfort', value: '+5', good: true }, { label: 'romance', value: '+3', good: true }] },
          { text: '"Rich and carefree"',                                                              stats: [{ label: 'romance', value: '−2', good: false }, { label: 'chemistry', value: '−2', good: false }, { label: 'awk', value: '+2', good: false }] },
          { text: '"I don\'t like planning too much"', trap: true,                                    stats: [{ label: 'comfort', value: '−3', good: false }, { label: 'chemistry', value: '−2', good: false }, { label: 'awk', value: '+3', good: false }] },
        ]}
      />

      <GConvRound num="R3" goal={goal} question="Nami: Can I be honest? Sometimes I wonder why you invited ME specifically."
        choices={[
          { text: '"Because I enjoy your company"',                                pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+5', good: true }, { label: 'chemistry', value: '+3', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"You\'re the most interesting person in the crew"',                                                     stats: [{ label: 'romance', value: '−2', good: false }, { label: 'comfort', value: '−1', good: false }] },
          { text: '"I wanted to get to know you better outside the ship"',         pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'romance', value: '+3', good: true }, { label: 'comfort', value: '+5', good: true }] },
          { text: '"Why not?"', trap: true,                                                                                  stats: [{ label: 'romance', value: '−5', good: false }, { label: 'comfort', value: '−4', good: false }, { label: 'awk', value: '+5', good: false }] },
        ]}
      />

      <GConvRound num="R4" goal={goal} question="Nami: I like this place more and more... or maybe it's the company. What do you think?"
        choices={[
          { text: '"Definitely the company"',                pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+5', good: true }, { label: 'chemistry', value: '+3', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"The bar\'s atmosphere is great"', trap: true,                                    stats: [{ label: 'romance', value: '−4', good: false }, { label: 'comfort', value: '−3', good: false }, { label: 'awk', value: '+3', good: false }] },
          { text: '"A combination of both"',                 pick: ['friends'],                       stats: [{ label: 'comfort', value: '+4', good: true }, { label: 'romance', value: '+2', good: true }] },
          { text: '"The drinks, obviously"', trap: true,                                              stats: [{ label: 'romance', value: '−3', good: false }, { label: 'chemistry', value: '−3', good: false }, { label: 'awk', value: '+3', good: false }] },
        ]}
      />

      <GConvRound num="R5" goal={goal} question="Nami: This was a nice night. What would you like to do after?"
        choices={[
          { text: '"Walk by the harbor under the stars"',          pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+6', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"Go back to the ship and rest"', trap: true,                                            stats: [{ label: 'romance', value: '−5', good: false }, { label: 'chemistry', value: '−4', good: false }, { label: 'awk', value: '+4', good: false }] },
          { text: '"Whatever you want"',                            pick: ['friends'],                       stats: [{ label: 'comfort', value: '+4', good: true }, { label: 'chemistry', value: '+2', good: true }] },
          { text: '"Find another place to keep the party going"',                                          stats: [{ label: 'romance', value: '−3', good: false }, { label: 'chemistry', value: '−2', good: false }, { label: 'awk', value: '+2', good: false }] },
        ]}
      />

      <GH>How to unlock each ending</GH>
      <GEnding num="5" title="Disappointing" stats={[{ label: 'mood <', value: '25', good: false }]}>
        <GP>Stack the ⚠ traps and order 3+ soft drinks early. R2 "I don\'t like planning", R3 "Why not?", R4 "The drinks", R5 "Go back to the ship". The compounded penalties drop mood well under 25.</GP>
      </GEnding>
      <GEnding num="6" title="Friends">
        <GP>Warm but not charged. R1 "Someone recommended it", R2 "stronger crew", R3 "get to know you", R4 "combination of both", R5 "whatever you want". Mid-tier drinks; food doesn\'t need to be her Loves.</GP>
      </GEnding>
      <GEnding num="7" title="Romantic" stats={[{ label: 'mood ≥', value: '60', good: true }, { label: 'romance ≥', value: '60', good: true }]}>
        <GP>Pick the ★ options listed below but you can miss one or two and still land here. Or run the full Lustful route without Picnic Lustful unlocked — the game will give you Romantic as a fallback regardless of stats.</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><strong style={{ color: 'var(--gold)' }}>Requires Picnic Lustful unlocked first.</strong></GP>
        <GRecipe steps={[
          { label: 'Order 1', text: 'For your first drink and her first drink: Grand Line Storm or Nami\'s Fantasy (Premium × Loves = ×3.0). Order "the same for both" — chemistry +5 bonus.' },
          { label: 'Food', text: 'When asked if you want food, order Garlic Shrimp (Loves) for the strongest stat block of the round.' },
          { label: 'R1 ★', text: '"I asked around for the best bar in the area" — or "The bartender got me a special reservation".' },
          { label: 'R2 ★', text: '"As the King of Pirates" or "With an even stronger crew".' },
          { label: 'R3 ★', text: '"Because I enjoy your company".' },
          { label: 'R4 ★', text: '"Definitely the company".' },
          { label: 'R5 ★', text: '"Walk by the harbor under the stars".' },
          { label: 'Refills', text: 'Each refill round: order for both, keep picking her Loves. Never let her soft-drink counter pass 2.' },
          { label: 'Menu', text: 'After closing, an inn appears with the light on. Choose Yes to enter — picking "Not tonight" routes you to Romantic.' },
        ]} />
      </GEnding>
    </div>
  );
}

function GuideRestaurant() {
  const [goal, setGoal] = React.useState('lustful');
  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 (entrée, main, dessert), three between-course conversations, and a fixed opening exchange about price. The thresholds are tighter than the Bar — and one careless answer can sink the route. The Restaurant punishes coldness harder: a refusal at the final menu sends you straight to Disappointing instead of Romantic.</GP>

      <GChainWarning requires="Bar Lustful" fallback="Restaurant Romantic" />

      <GoalSelector goal={goal} setGoal={setGoal} />

      <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>Right after the price exchange, the waiter asks how you want to order. This is one of the most consequential choices of the date:</GP>
      <div style={{ display: 'grid', gap: 8, marginBottom: 14 }}>
        {[
          { mode: '"Order the same for both"',  note: '+4 chemistry — works if you know her Loves.', tone: 'good' },
          { mode: '"Ask her what she wants"',    note: '+2 comfort. Opens a sub-menu: ★ "Yes, I trust you" gives +3 romance +4 chemistry +2 comfort +3 fun. ⚠ "I prefer to choose myself" → −5/−4/−3 +4 awk.', tone: 'good' },
          { mode: '"Order for me first"',        note: 'Neutral. You then get the option ★ "I\'ll order for her" (+3 romance) vs Nami ordering her favourites by herself (−2/−1).', tone: 'neutral' },
          { mode: '"I don\'t know, whatever"',   note: '⚠⚠ DEVASTATING — stats are force-reset to romance=0 awk=25, and the chef\'s tasting menu burns 15,000 berries. Single worst input in the dating system.', tone: 'trap' },
        ].map(r => (
          <div key={r.mode} style={{
            display: 'grid', gridTemplateColumns: '240px 1fr', gap: 12, padding: '10px 14px',
            border: `1px solid ${r.tone === 'trap' ? 'rgba(255,85,85,.4)' : 'rgba(212,175,55,.12)'}`,
            background: r.tone === 'trap' ? 'rgba(255,85,85,.05)' : 'transparent',
            alignItems: 'start',
          }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.12em', color: r.tone === 'trap' ? 'var(--danger)' : 'var(--gold)' }}>{r.mode}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 12, color: r.tone === 'trap' ? 'rgba(255,140,140,.95)' : 'var(--beige)' }}>{r.note}</span>
          </div>
        ))}
      </div>

      <GH>Nami's preferences (Restaurant)</GH>
      <GP style={{ fontSize: 12, opacity: .85 }}>Citrus and seafood premium are her strongest pulls. Lemon, beef, and overly refined dishes underperform.</GP>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
        <div>
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: 'var(--gold)', marginBottom: 6 }}>Drinks</div>
          <GPrefTable rows={[
            ['Mimosa', 'Loves', '(Premium · citrus + champagne)'],
            ['Fresh Orange Juice', 'Loves', '(Soft)'],
            ['Iced Tea', 'Likes'],
            ['Rosé Wine / Sangria', 'Likes'],
            ['Reserve Wine', 'Likes'],
            ['Brut / Premium Champagne', 'Likes'],
            ['Still / Sparkling Water', 'Neutral'],
            ['House Red / White Wine', 'Neutral'],
            ['Gourmet Lemonade', 'Dislikes', '(citrus too sharp)'],
          ]} />
        </div>
        <div>
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: 'var(--gold)', marginBottom: 6 }}>Starters</div>
          <GPrefTable rows={[
            ['Tuna Carpaccio', 'Loves'],
            ['Seafood Soup', 'Likes'],
            ['Sea Salad', 'Neutral'],
          ]} />
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: 'var(--gold)', marginTop: 14, marginBottom: 6 }}>Main</div>
          <GPrefTable rows={[
            ['Grilled Lobster', 'Loves', '★ flagged for final dialogue'],
            ['Salt-crusted Sea Bass', 'Likes'],
            ['Seafood Paella', 'Likes'],
            ['Beef Filet', 'Neutral'],
          ]} />
          <div style={{ fontFamily: 'var(--f-caps)', fontSize: 9, letterSpacing: '.18em', color: 'var(--gold)', marginTop: 14, marginBottom: 6 }}>Dessert</div>
          <GPrefTable rows={[
            ['Flambéed Fruits', 'Loves'],
            ['Chocolate Tart', 'Likes'],
            ['Crème Brûlée', 'Neutral'],
          ]} />
        </div>
      </div>
      <GTip style={{ marginTop: 14 }}>The <strong>main course</strong> preference is stored in a separate flag and surfaces in the closing dialogue. Picking a Loves main makes Nami praise it specifically at the end; picking a dislike makes her openly complain even in the Friends ending.</GTip>

      <GH>Conversation — 4 rounds</GH>

      <GConvRound num="Q1" goal={goal} question="Nami: This looks amazing... but also pretty expensive."
        choices={[
          { text: '"Don\'t worry about the price"',          pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'romance', value: '+4', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"I chose this place for you"',            pick: ['romantic', 'lustful'],            stats: [{ label: 'romance', value: '+6', good: true }, { label: 'chemistry', value: '+3', good: true }, { label: 'comfort', value: '+2', good: true }] },
          { text: '"It\'s an investment in our navigator"',  pick: ['friends'],                         stats: [{ label: 'fun', value: '+3', good: true }, { label: 'chemistry', value: '+2', good: true }] },
          { text: '"I just wanted to try this place"',                                                  stats: [{ label: 'romance', value: '−3', good: false }, { label: 'chemistry', value: '−2', good: false }, { label: 'awk', value: '+2', good: false }] },
        ]}
      />

      <GConvRound num="Q2" goal={goal} question="Waiter: Are you ready to order?"
        choices={[
          { text: '"Yes, we\'re ready"',         pick: ['friends', 'romantic', 'lustful'], stats: [{ label: '—', value: 'neutral', good: true }] },
          { text: '"Give me a moment more"',                                                stats: [{ label: 'romance', value: '−2', good: false }, { label: 'chemistry', value: '−1', good: false }, { label: 'awk', value: '+2', good: false }] },
        ]}
      />

      <GConvRound num="Q3" goal={goal} question="(Between starter and main) Nami: I thought this would be uncomfortable. Too formal. But... I like it. Why is that?"
        choices={[
          { text: '"I\'m glad you feel comfortable"',          pick: ['romantic', 'lustful'],          stats: [{ label: 'comfort', value: '+5', good: true }, { label: 'romance', value: '+3', good: true }] },
          { text: '"This place has a great atmosphere"',       pick: ['friends', 'romantic', 'lustful'], stats: [{ label: 'chemistry', value: '+4', good: true }, { label: 'comfort', value: '+3', good: true }, { label: 'romance', value: '+2', good: true }] },
          { text: '"You make any place special"', trap: true,                                            stats: [{ label: 'romance', value: '−2', good: false }, { label: 'comfort', value: '−3', good: false }, { label: 'awk', value: '+4', good: false }] },
          { text: '"It\'s just a restaurant"',                                                            stats: [{ label: 'comfort', value: '−4', good: false }, { label: 'romance', value: '−3', good: false }, { label: 'awk', value: '+3', good: false }] },
        ]}
      />

      <GConvRound num="Q4" goal={goal} question="(After the main) Nami: Why did you invite ME tonight? You could have asked anyone."
        choices={[
          { text: '"I wanted to get to know you better outside the ship"',  pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+5', good: true }, { label: 'chemistry', value: '+4', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"You\'re good company"',                                  pick: ['friends'],                       stats: [{ label: 'chemistry', value: '+5', good: true }, { label: 'comfort', value: '+4', good: true }, { label: 'romance', value: '−2', good: false }] },
          { text: '"You\'re the most special person I know"', trap: true,                                              stats: [{ label: 'romance', value: '−3', good: false }, { label: 'comfort', value: '−4', good: false }, { label: 'awk', value: '+5', good: false }] },
          { text: '"Why not?"', trap: true,                                                                            stats: [{ label: 'romance', value: '−5', good: false }, { label: 'chemistry', value: '−4', good: false }, { label: 'awk', value: '+5', good: false }] },
        ]}
      />

      <GConvRound num="Q5" goal={goal} question="(After dessert) Nami: This whole night has been... incredible. Thank you. Really."
        choices={[
          { text: '"We should do this again sometime"',                pick: ['romantic', 'lustful'],          stats: [{ label: 'romance', value: '+5', good: true }, { label: 'chemistry', value: '+4', good: true }, { label: 'comfort', value: '+3', good: true }] },
          { text: '"I had a great time too"',                          pick: ['friends'],                       stats: [{ label: 'romance', value: '+4', good: true }, { label: 'comfort', value: '+5', good: true }] },
          { text: '"This is just the beginning of something beautiful"', trap: true,                            stats: [{ label: 'romance', value: '−4', good: false }, { label: 'comfort', value: '−5', good: false }, { label: 'awk', value: '+6', good: false }] },
          { text: '"You\'re welcome"',                                                                           stats: [{ label: 'comfort', value: '−2', good: false }, { label: 'romance', value: '−3', good: false }, { label: 'awk', value: '+2', good: false }] },
        ]}
      />

      <GTip>Between the main and the dessert the waiter offers extra drinks. Ordering a <strong>Mimosa or Orange Juice for her</strong> in those rounds is a clean +romance injection (Loves × Premium or Loves × Soft). The waiter also brings a rose at the end of the meal — it gives a flat +5 romance and triggers Nami\'s warmest reactions if mood is already high.</GTip>

      <GH>How to unlock each ending</GH>
      <GEnding num="9" title="Disappointing" stats={[{ label: 'mood <', value: '25', good: false }]}>
        <GP>Pick "I don\'t know, whatever" at the ordering screen — that alone almost guarantees this ending. Or stack traps in Q3/Q4/Q5.</GP>
      </GEnding>
      <GEnding num="10" title="Friends">
        <GP>Q1 "Don\'t worry about the price" · order "for both" with neutral-to-likes picks · Q3 "great atmosphere" · Q4 "You\'re good company" · Q5 "I had a great time too". Skip the extra drinks if budget is tight.</GP>
      </GEnding>
      <GEnding num="11" title="Romantic" stats={[{ label: 'mood ≥', value: '60', good: true }, { label: 'romance ≥', value: '65', good: true }]}>
        <GP>Run the Lustful path with 1–2 deviations. Or run it perfectly without Bar Lustful unlocked — the game routes you here as a fallback regardless of stats.</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><strong style={{ color: 'var(--gold)' }}>Requires Bar Lustful unlocked first.</strong></GP>
        <GRecipe steps={[
          { label: 'Q1 ★', text: '"I chose this place for you"' },
          { label: 'Q2', text: '"Yes, we\'re ready"' },
          { label: 'Order', text: '"Order the same for both" — or "Ask her what she wants" then "Yes, I trust you" (she picks her own favourites = guaranteed Loves on every course).' },
          { label: 'Drinks ★', text: 'Mimosa for both, or Fresh Orange Juice if budget is tight. Order Mimosa for her again at each extra-drinks prompt.' },
          { label: 'Starter ★', text: 'Tuna Carpaccio' },
          { label: 'Main ★', text: 'Grilled Lobster — flagged in the closing dialogue, makes Nami praise it specifically' },
          { label: 'Dessert ★', text: 'Flambéed Fruits' },
          { label: 'Q3 ★', text: '"I\'m glad you feel comfortable"' },
          { label: 'Q4 ★', text: '"I wanted to get to know you better outside the ship"' },
          { label: 'Q5 ★', text: '"We should do this again sometime"' },
          { label: 'Rose', text: 'Always send the rose — flat +5 romance.' },
          { label: 'Menu ★', text: 'Outside, Nami proposes a love hotel. Choose "Sí" (Yes). Picking "No, esta noche no" routes you to DISAPPOINTING here — not Romantic. The Restaurant punishes the cold refusal.' },
        ]} />
      </GEnding>
    </div>
  );
}

function GuideSummary() {
  return (
    <div style={{ maxWidth: 760 }}>
      <GH>The Lustful chain</GH>
      <div style={{ padding: '18px 22px', border: '1px solid rgba(212,175,55,.35)', background: 'rgba(212,175,55,.05)', marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', fontFamily: 'var(--f-caps)', fontSize: 11, letterSpacing: '.18em', color: 'var(--gold)' }}>
          <span style={{ padding: '6px 12px', border: '1px solid var(--gold)', background: 'rgba(212,175,55,.08)' }}>Picnic Lustful</span>
          <span style={{ fontSize: 14 }}>→ unlocks →</span>
          <span style={{ padding: '6px 12px', border: '1px solid var(--gold)', background: 'rgba(212,175,55,.08)' }}>Bar Lustful</span>
          <span style={{ fontSize: 14 }}>→ unlocks →</span>
          <span style={{ padding: '6px 12px', border: '1px solid var(--gold)', background: 'rgba(212,175,55,.08)' }}>Restaurant Lustful</span>
        </div>
        <p style={{ fontFamily: 'var(--f-serif)', fontSize: 13, color: 'var(--beige)', marginTop: 14, marginBottom: 0, textAlign: 'center', opacity: .9 }}>
          You cannot reach a later Lustful ending without the previous one. Maxing stats without the unlock falls back to Romantic — or, on the Restaurant, to Disappointing if you decline the love hotel.
        </p>
      </div>

      <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>Six universal traps</GH>
      <GP>These mistakes break any date regardless of which one you're on:</GP>
      <div style={{ display: 'grid', gap: 6, marginBottom: 24 }}>
        {[
          ['Declaring attraction directly', 'On the first date, "I like you", "You\'re amazing", "You\'re the most special person I know" all spike awkwardness +5 to +12 and crash romance.'],
          ['Hinting at sex before the closing menu', '"Depends on how tonight ends...", "We still have the night ahead" → catastrophic. The game has dedicated traps for these.'],
          ['"Why not?" / "You were available"', 'Single most punished answer in the system — −5 to −15 romance, +5 to +18 awkwardness.'],
          ['Praising the place over her', '"The atmosphere is great", "The drinks, obviously" — Nami reads it as not being about her.'],
          ['Soft drinks in a chain (Bar only)', 'Three or more soft drinks trigger heavy dampening and direct stat penalties on every following alcohol order.'],
          ['"Whatever" when ordering (Restaurant)', 'Force-resets romance to 0 and awkwardness to 25. Never use.'],
        ].map(([t, d], i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 12, padding: '10px 14px', border: '1px solid rgba(255,85,85,.18)', background: 'rgba(255,85,85,.04)' }}>
            <span style={{ fontFamily: 'var(--f-caps)', fontSize: 10, letterSpacing: '.12em', color: 'rgba(255,140,140,.95)', display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--danger)' }}>⚠</span> {t}</span>
            <span style={{ fontFamily: 'var(--f-serif)', fontSize: 12, color: 'var(--beige)', lineHeight: 1.55 }}>{d}</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. The Restaurant "Whatever" alone is enough.' },
          { goal: 'Friends', how: 'Play warm but without romantic charge. A correct night, not an electric one — pick the empathetic-but-platonic options on Q5/Q6/Q7/Q8 of the Picnic, equivalents on Bar/Restaurant.' },
          { goal: 'Romantic', how: 'Empathetic answers · genuine interest in her · nothing sexual too soon. Also the default fallback when you run the Lustful route without the previous unlock.' },
          { goal: 'Lustful', how: 'Near-perfect route across all questions, her Loves at every order, and the chain prerequisite unlocked. Picnic\'s Perfect Path (4 romantic picks + Strawberries/Champagne last) is the only way in.' },
        ].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;
