// itrymo — static content pages (About, Help, Privacy, Terms).
// Opened from footer links + the profile "About & support" rows.
// Web: centered modal. Mobile: full-screen sheet. Loaded after proto-shared.jsx.

const PAGE_ORDER = ['about', 'help', 'privacy', 'terms'];
const PAGE_TITLES = {
  about: 'About itrymo',
  help: 'Help & support',
  privacy: 'Privacy policy',
  terms: 'Terms of service',
};

// ── Small content primitives ─────────────────────────────────
function PageH({ children }) {
  return <h2 style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3, margin: '26px 0 8px', color: T.ink }}>{children}</h2>;
}
function PageP({ children }) {
  return <p style={{ fontSize: 14, lineHeight: 1.62, color: T.faintInk, margin: '0 0 12px' }}>{children}</p>;
}
function PageLead({ children }) {
  return <p style={{ fontSize: 16, lineHeight: 1.55, color: T.ink, margin: '0 0 8px', fontWeight: 500 }}>{children}</p>;
}
function LegalNote({ children }) {
  return (
    <div style={{
      background: T.accentBg, border: `1px solid ${T.accentBd}`, borderRadius: 10,
      padding: '10px 12px', fontSize: 12.5, color: T.faintInk, lineHeight: 1.5, margin: '0 0 4px',
    }}>{children}</div>
  );
}
function Steps({ items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '6px 0 12px' }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <div style={{
            width: 26, height: 26, borderRadius: 13, background: T.selBg, color: T.selFg, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700,
          }}>{i + 1}</div>
          <div style={{ fontSize: 14, lineHeight: 1.5, color: T.faintInk, paddingTop: 2 }}>
            <strong style={{ color: T.ink, fontWeight: 600 }}>{it.t}</strong> — {it.d}
          </div>
        </div>
      ))}
    </div>
  );
}
function Faq({ q, a }) {
  return (
    <div style={{ padding: '14px 0', borderBottom: `1px solid ${T.borderSoft}` }}>
      <div style={{ fontSize: 14.5, fontWeight: 700, color: T.ink, marginBottom: 5 }}>{q}</div>
      <div style={{ fontSize: 13.5, lineHeight: 1.55, color: T.faintInk }}>{a}</div>
    </div>
  );
}

// ── Page bodies ──────────────────────────────────────────────
function PageBody({ id, city = 'Tokyo' }) {
  if (id === 'about') {
    return (
      <React.Fragment>
        <PageLead>itrymo helps you find what's actually worth your time — where to eat, what to do, and where to stay — filtered by what matters to you, not by who paid the most.</PageLead>
        <PageP>Most travel apps bury the good stuff under ads and endless lists. itrymo flips that: you tell us what you're after — late-night ramen, a kid-friendly café, a quiet ryokan — and we narrow thousands of places down to the handful you'd actually choose.</PageP>
        <PageH>How it works</PageH>
        <Steps items={[
          { t: 'Tell us what you want', d: 'Pick Eat, Do, or Stay and add the tags that fit your trip.' },
          { t: 'We filter to real matches', d: 'Results are ranked by a blend of editorial picks and what the community loves — never by ad spend.' },
          { t: 'Save and go', d: 'Heart the places you like and find them again in your saved list.' },
        ]} />
        <PageH>Where we are</PageH>
        <PageP>itrymo is live in {city} today, with more cities on the way. Every place is reviewed before it appears, so the list stays trustworthy as we grow.</PageP>
      </React.Fragment>
    );
  }
  if (id === 'help') {
    return (
      <React.Fragment>
        <PageLead>Quick answers to the things people ask most.</PageLead>
        <div style={{ marginTop: 8 }}>
          <Faq q="How do I save a place?" a="Tap the heart on any place card or detail page. Your saved places appear under the heart icon in the top bar." />
          <Faq q="Do I need an account?" a="No. For now your saved places live on this device, so you can start right away. Accounts and cross-device sync are coming soon." />
          <Faq q="How are places ranked?" a="By a blend of editorial picks and community signals like ratings and saves — never by advertising. Use sort and filters to reorder for your needs." />
          <Faq q="What if I can't find something?" a="Type it into search. If we don't have a matching tag yet, you can suggest it — enough requests and we'll add it." />
          <Faq q="Which cities are covered?" a={`itrymo is in ${city} today, with more cities rolling out. Coverage notes appear in the footer and your settings.`} />
        </div>
        <PageH>Still stuck?</PageH>
        <PageP>Email us at <strong style={{ color: T.ink }}>help@itrymo.com</strong> and we'll get back to you.</PageP>
      </React.Fragment>
    );
  }
  if (id === 'privacy') {
    return (
      <React.Fragment>
        <LegalNote>This is a plain-language draft template, not legal advice. Have it reviewed by a lawyer before you publish.</LegalNote>
        <PageP style={{ marginTop: 10 }}>Last updated: 30 May 2026</PageP>
        <PageP>This policy explains what itrymo collects, why, and the choices you have. We aim to collect as little as possible.</PageP>
        <PageH>What we collect</PageH>
        <PageP>Information you give us (such as places you save and searches you make), and basic technical data your device sends automatically (such as device type and general location, if you allow it). We do not require an account to use itrymo.</PageP>
        <PageH>How we use it</PageH>
        <PageP>To show relevant places, remember your saved list, improve search and recommendations, and keep the service secure. Aggregated, anonymized search trends help us decide which places and tags to add.</PageP>
        <PageH>Storage on your device</PageH>
        <PageP>Your saved places and preferences are stored locally on your device using your browser's storage. Clearing your browser data will remove them.</PageP>
        <PageH>Sharing</PageH>
        <PageP>We do not sell your personal information. We share data only with service providers that help us operate itrymo, and only as needed to provide the service.</PageP>
        <PageH>Your choices</PageH>
        <PageP>You can clear your saved places and search history at any time from within the app. For questions or requests, contact <strong style={{ color: T.ink }}>privacy@itrymo.com</strong>.</PageP>
      </React.Fragment>
    );
  }
  if (id === 'terms') {
    return (
      <React.Fragment>
        <LegalNote>This is a plain-language draft template, not legal advice. Have it reviewed by a lawyer before you publish.</LegalNote>
        <PageP style={{ marginTop: 10 }}>Last updated: 30 May 2026</PageP>
        <PageP>By using itrymo, you agree to these terms. Please read them.</PageP>
        <PageH>Using itrymo</PageH>
        <PageP>itrymo is a discovery service that helps you find places to eat, things to do, and places to stay. You agree to use it lawfully and not to misuse, scrape, or disrupt the service.</PageP>
        <PageH>Content and listings</PageH>
        <PageP>We work to keep listings accurate, but details like hours, prices, and availability can change. Always confirm with the place directly before you rely on them. itrymo is not responsible for your experience at third-party venues.</PageP>
        <PageH>Accounts</PageH>
        <PageP>Accounts are not required today. When account features launch, additional terms may apply and will be presented at sign-up.</PageP>
        <PageH>Disclaimers</PageH>
        <PageP>itrymo is provided "as is," without warranties. To the extent permitted by law, we are not liable for indirect or incidental damages arising from your use of the service.</PageP>
        <PageH>Changes</PageH>
        <PageP>We may update these terms as itrymo evolves. We'll post the updated date above. Questions? Contact <strong style={{ color: T.ink }}>legal@itrymo.com</strong>.</PageP>
      </React.Fragment>
    );
  }
  return null;
}

// ── Overlay shell ────────────────────────────────────────────
function StaticPage({ id, surface = 'web', city = 'Tokyo', onClose }) {
  useEscClose(onClose);
  if (!id) return null;
  const title = PAGE_TITLES[id] || '';

  const header = (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: surface === 'mobile' ? '14px 18px' : '16px 24px',
      background: '#fff', borderBottom: `1px solid ${T.borderSoft}`, flexShrink: 0,
    }}>
      {surface === 'mobile' && (
        <button onClick={onClose} title="Back" style={{
          all: 'unset', cursor: 'pointer', width: 34, height: 34, borderRadius: 17,
          background: T.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="chevR" size={16} style={{ transform: 'rotate(180deg)' }} />
        </button>
      )}
      <h2 style={{ fontSize: surface === 'mobile' ? 17 : 19, fontWeight: 700, letterSpacing: -0.4, flex: 1, margin: 0 }}>{title}</h2>
      {surface === 'web' && (
        <button onClick={onClose} title="Close" style={{
          all: 'unset', cursor: 'pointer', width: 30, height: 30, borderRadius: 15,
          background: '#F4EFE6', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon name="close" size={13} /></button>
      )}
    </div>
  );

  const body = (
    <div style={{ padding: surface === 'mobile' ? '4px 20px 32px' : '8px 28px 32px', maxWidth: 680, margin: '0 auto' }}>
      <PageBody id={id} city={city} />
    </div>
  );

  if (surface === 'mobile') {
    return (
      <div role="dialog" aria-modal="true" aria-label={title} style={{
        position: 'absolute', inset: 0, background: '#fff', zIndex: 80,
        display: 'flex', flexDirection: 'column', animation: 'itrymo-slideup .22s ease',
      }}>
        {header}
        <div style={{ flex: 1, overflowY: 'auto', background: '#fff' }}>{body}</div>
      </div>
    );
  }

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 80, background: 'rgba(20,18,14,0.45)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
      animation: 'itrymo-fade .18s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={title} style={{
        width: '100%', maxWidth: 760, maxHeight: '88vh', background: '#fff',
        borderRadius: 18, overflow: 'hidden', display: 'flex', flexDirection: 'column',
        boxShadow: '0 30px 80px rgba(0,0,0,0.30)', animation: 'itrymo-pop .2s ease',
      }}>
        {header}
        <div style={{ flex: 1, overflowY: 'auto' }}>{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, { StaticPage, PAGE_TITLES, PAGE_ORDER });