// Vapor — premium tab.
// Dark website chrome (shares D tokens from views.jsx, VAPOR + badges from core.jsx).
// Voice: calm, plain, no hype, no clinical claims. No en/em dashes anywhere.

const PREMIUM_GROUPS = [
  {
    label: 'appearance',
    items: [
      { name: 'display typefaces', desc: 'a small set of display faces for your daily word. pick the one that feels right and it carries through every entry.' },
      { name: 'custom themes', desc: 'quiet color palettes beyond the default sand and ink. each one shifts the whole feel of the app, in light or dark.' },
      { name: 'weighted glow', desc: 'an optional soft glow behind your word, its color drawn from the word itself. present, never loud.' },
    ],
  },
  {
    label: 'looking back',
    items: [
      { name: 'monthly recap', desc: 'the month gathered into one short film. your words set to motion, to keep or to share.' },
      { name: 'year in review', desc: 'your whole year of words, collected once a year into a single look back.' },
    ],
  },
  {
    label: 'keepsakes',
    items: [
      { name: 'high-res printables', desc: 'export your words and calendar at print resolution, sized for framing or a photo lab.' },
      { name: 'encrypted backup', desc: 'an encrypted backup you export to your own storage. it stays yours and never reaches us.' },
    ],
  },
  {
    label: 'atmosphere',
    items: [
      { name: 'ritual soundscapes', desc: 'a few low ambient soundscapes for the minute you sit down to write. quiet enough to disappear.' },
    ],
  },
  {
    label: 'the long view',
    items: [
      { name: 'custom-date letters', desc: 'seal a letter to any future date you choose, then forget it until it arrives.' },
      { name: 'custom milestones', desc: 'set your own milestones to mark, not only the ones we count by default.' },
    ],
  },
];

function PremiumGroup({ label, items }) {
  return (
    <div className="prem-group" style={{
      display: 'grid', gridTemplateColumns: '180px 1fr', gap: 'clamp(20px, 4vw, 56px)',
      padding: '34px 0', borderTop: `0.5px solid ${D.rule}`, alignItems: 'start',
    }}>
      <div style={{ fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: D.sage, fontWeight: 500, paddingTop: 6 }}>{label}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {items.map((it) => (
          <div key={it.name} style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
            <div style={{ fontFamily: VAPOR.serif, fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(22px, 2.5vw, 28px)', color: D.ink, lineHeight: 1.15 }}>{it.name}</div>
            <div style={{ fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 14.5, lineHeight: 1.7, color: D.inkSoft, maxWidth: '46ch' }}>{it.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PriceLine({ plan, price, per, note }) {
  return (
    <div className="prem-priceline" style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
      <span style={{ minWidth: 150, fontFamily: VAPOR.sans, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: D.inkMid, fontWeight: 500 }}>{plan}</span>
      <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 7 }}>
        <span style={{ fontFamily: VAPOR.serif, fontStyle: 'italic', fontWeight: 400, fontSize: 27, color: D.ink, lineHeight: 1, letterSpacing: '-0.01em' }}>{price}</span>
        <span style={{ fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 13, color: D.inkMid }}>{per}</span>
      </span>
      <span style={{ fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 12, color: D.inkFaint }}>{note}</span>
    </div>
  );
}

function ViewPremium() {
  return (
    <section style={{ padding: '60px 40px 120px', minHeight: 'calc(100vh - 64px)' }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>

        {/* header bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingBottom: 18, marginBottom: 44, borderBottom: `0.5px solid ${D.rule}` }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: D.sage }} />
          <span style={{ fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: D.inkMid, fontWeight: 500 }}>Premium</span>
          <span style={{ flex: 1 }} />
        </div>

        {/* hero */}
        <div style={{ marginBottom: 16 }}>
          <h1 style={{
            fontFamily: VAPOR.serif, fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(48px, 7vw, 92px)', lineHeight: 1.06, color: D.ink,
            letterSpacing: '-0.01em', marginBottom: 30,
          }}>depth, for when<br/>you want it.</h1>
          <p style={{
            fontFamily: VAPOR.serif, fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(19px, 2.1vw, 25px)', lineHeight: 1.45, color: D.inkSoft,
            maxWidth: '34ch', marginBottom: 24,
          }}>the one word a day stays free, always. premium is for people who have kept showing up and want a little more to hold.</p>
        </div>

        {/* features */}
        <div style={{ marginTop: 56, marginBottom: 80 }}>
          {PREMIUM_GROUPS.map((g) => <PremiumGroup key={g.label} label={g.label} items={g.items} />)}
        </div>

        {/* pricing */}
        <div style={{ paddingTop: 8 }}>
          <div style={{ fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: D.sage, fontWeight: 500, marginBottom: 22 }}>pricing</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <PriceLine plan="Premium Monthly" price="$3.89" per="/ month" note="7 day free trial" />
            <PriceLine plan="Premium Annual" price="$38.00" per="/ year" note="about two months less than monthly" />
          </div>

          <div style={{ marginTop: 30, display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'center' }}>
            <AppStoreBadge height={52} />
            <span style={{ fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 12.5, lineHeight: 1.6, color: D.inkMid, maxWidth: '40ch' }}>
              prices shown in your local currency at checkout, and may vary by region.
            </span>
          </div>

          {/* auto-renew disclosure */}
          <p style={{ marginTop: 26, fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 12, lineHeight: 1.75, color: D.inkFaint, maxWidth: '74ch' }}>
            Premium is an auto-renewable subscription. Payment is charged to your Apple Account, or your Google Play account, at confirmation of purchase. It renews automatically for the same period unless you turn off auto-renew at least 24 hours before the current period ends, and your account is charged for renewal within 24 hours before that. Any unused portion of a free trial is forfeited when you buy a subscription.
          </p>
        </div>

        {/* manage / restore */}
        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(24px, 4vw, 56px)', paddingTop: 34, borderTop: `0.5px solid ${D.rule}` }} className="prem-manage">
          <div>
            <div style={{ fontFamily: VAPOR.serif, fontStyle: 'italic', fontSize: 24, color: D.ink, marginBottom: 12 }}>manage or cancel</div>
            <p style={{ fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 14, lineHeight: 1.7, color: D.inkSoft, maxWidth: '42ch' }}>
              cancel anytime in your App Store or Google Play account settings, under Subscriptions. cancel before the period ends and you keep premium until it does.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: VAPOR.serif, fontStyle: 'italic', fontSize: 24, color: D.ink, marginBottom: 12 }}>already subscribed</div>
            <p style={{ fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 14, lineHeight: 1.7, color: D.inkSoft, maxWidth: '42ch' }}>
              new phone, or reinstalled the app? open Settings inside Vapor and tap Restore Purchases to bring premium back.
            </p>
          </div>
        </div>

        {/* support + legal */}
        <div style={{ marginTop: 56, paddingTop: 34, borderTop: `0.5px solid ${D.rule}`, display: 'flex', flexWrap: 'wrap', gap: 30, justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase', color: D.inkMid, fontWeight: 500, marginBottom: 10 }}>support</div>
            <a href="mailto:hello@vaporjournal.app" style={{ fontFamily: VAPOR.serif, fontStyle: 'italic', fontSize: 22, color: D.ink, textDecoration: 'none', borderBottom: `0.5px solid ${D.ruleStrong}` }}>hello@vaporjournal.app</a>
            <div style={{ marginTop: 10, fontFamily: VAPOR.sans, fontWeight: 300, fontSize: 12.5, color: D.inkMid }}>one person reads every email.</div>
          </div>
          <div style={{ display: 'flex', gap: 22 }}>
            <a href="privacy.html" style={{ fontFamily: VAPOR.sans, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: D.inkMid, textDecoration: 'none', borderBottom: `0.5px solid ${D.rule}`, paddingBottom: 3 }}>privacy policy</a>
            <a href="terms.html" style={{ fontFamily: VAPOR.sans, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: D.inkMid, textDecoration: 'none', borderBottom: `0.5px solid ${D.rule}`, paddingBottom: 3 }}>terms of use</a>
          </div>
        </div>

      </div>

      <style>{`
        @media (max-width: 640px) {
          .prem-group { grid-template-columns: 1fr !important; gap: 16px !important; }
          .prem-manage { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ViewPremium, PREMIUM_GROUPS });