/* NearAway Pricing — sections. Exported to window. */

function Logo({ light }) {
  return <img src={light ? '/assets/logo-nearaway-linen.svg' : '/assets/logo-nearaway-ink.svg'} alt="near away" />;
}

function PricingNav() {
  return (
    <nav className="hp-nav">
      <div className="hp-wrap hp-nav-inner">
        <a className="hp-nav-logo" href="/"><Logo /></a>
        <div className="hp-nav-links">
          <a href="/#object">The frame</a>
          <a href="/#how">How it works</a>
          <a href="#">Pricing</a>
        </div>
        <div className="hp-nav-right">
          <a className="hp-nav-signin" href="/account.html">Sign in</a>
          <a className="hp-btn hp-btn-primary" href="#tiers">Choose your plan</a>
        </div>
      </div>
    </nav>
  );
}

/* ── Tier cards ────────────────────────────────────────────── */
const TIERS = [
  {
    id: 'connection',
    name: 'The Connection',
    tagline: 'Bring your own screen',
    price: '3.99',
    unit: '/month',
    annual: '39',
    annualNote: '€39/year — save 18%',
    highlight: false,
    badge: null,
    description: 'Turn any tablet, old phone or TV into a NearAway display. All the warmth, on a screen you already have.',
    includes: [
      'Works on any device — tablet, TV, phone',
      'Destination photos & in-the-air map',
      'Automatic roster parsing',
      'Free 14-day trial',
    ],
    cta: 'Start free trial',
    ctaStyle: 'hp-btn hp-btn-line',
  },
  {
    id: 'gift',
    name: 'The Gift',
    tagline: 'A beautiful box to give',
    price: '50',
    unit: ' one-time',
    annual: null,
    annualNote: null,
    highlight: true,
    badge: 'Perfect gift',
    description: 'A warm welcome box with an activation card and 6 months of NearAway included. Give someone you love a quiet sense of presence.',
    includes: [
      'Premium gift box with activation card',
      '6 months of NearAway included',
      'Works on any device',
      'Destination photos & in-the-air map',
      'Automatic roster parsing',
      'After 6 months: €3.99/month or €39/year',
    ],
    cta: 'Order The Gift',
    ctaStyle: 'hp-btn hp-btn-primary',
  },
  {
    id: 'frame',
    name: 'The Frame',
    tagline: 'The complete experience',
    price: '199',
    unit: ' one-time',
    annual: null,
    annualNote: null,
    highlight: false,
    badge: null,
    description: 'The NearAway frame — pale oak, matte ceramic, made to feel like home. With 6 months of service and everything you need.',
    includes: [
      'The NearAway frame (oak & ceramic)',
      'Magnetic USB-C charger',
      'Welcome card',
      '6 months of NearAway included',
      'Destination photos & in-the-air map',
      'Automatic roster parsing',
      'After 6 months: €3.99/month or €39/year',
    ],
    cta: 'Get The Frame',
    ctaStyle: 'hp-btn hp-btn-line',
  },
];

function TierCard({ tier }) {
  return (
    <div className={`pr-card ${tier.highlight ? 'pr-card--highlight' : ''}`}>
      {tier.badge && <div className="pr-badge">{tier.badge}</div>}
      <div className="pr-card-head">
        <h3 className="pr-tier-name">{tier.name}</h3>
        <p className="pr-tier-tag">{tier.tagline}</p>
      </div>
      <div className="pr-price-block">
        <span className="pr-currency">€</span>
        <span className="pr-amount">{tier.price}</span>
        <span className="pr-unit">{tier.unit}</span>
      </div>
      {tier.annualNote && <div className="pr-annual">{tier.annualNote}</div>}
      <p className="pr-desc">{tier.description}</p>
      <a className={tier.ctaStyle} href="#">{tier.cta}</a>
      <ul className="pr-includes">
        {tier.includes.map((item, i) => (
          <li key={i}>
            <svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5 6.5 11.5 12.5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"></path></svg>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

function PricingHero() {
  return (
    <section className="pr-hero" id="tiers">
      <div className="hp-wrap">
        <div className="pr-hero-copy">
          <div className="hp-eyebrow terra">Choose how to feel near</div>
          <h1>A plan for every kind of<br/><span className="soft">connection.</span></h1>
          <p className="pr-hero-sub">
            Start with just the app on a screen you already own, give someone a beautiful
            welcome box, or go all in with the handcrafted NearAway frame.
          </p>
        </div>
        <div className="pr-grid">
          {TIERS.map(t => <TierCard key={t.id} tier={t} />)}
        </div>
      </div>
    </section>
  );
}

/* ── Comparison table ──────────────────────────────────────── */
const COMPARE_ROWS = [
  { feature: 'Destination photos',       connection: true,  gift: true,  frame: true },
  { feature: 'In-the-air map',           connection: true,  gift: true,  frame: true },
  { feature: 'Automatic roster parsing', connection: true,  gift: true,  frame: true },
  { feature: 'Works on your own device', connection: true,  gift: true,  frame: true },
  { feature: 'Gift box & activation card', connection: false, gift: true, frame: false },
  { feature: 'The NearAway frame',       connection: false, gift: false, frame: true },
  { feature: 'Charger & welcome card',   connection: false, gift: false, frame: true },
  { feature: 'Service included',         connection: '14 days free', gift: '6 months', frame: '6 months' },
];

function Check() {
  return <svg className="pr-check" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5 6.5 11.5 12.5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
}
function Cross() {
  return <svg className="pr-cross" viewBox="0 0 16 16" fill="none"><path d="M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"></path></svg>;
}

function CellVal({ val }) {
  if (val === true) return <Check />;
  if (val === false) return <Cross />;
  return <span className="pr-cell-text">{val}</span>;
}

function CompareTable() {
  return (
    <section className="hp-section paper">
      <div className="hp-wrap">
        <div className="hp-sec-head center">
          <div className="hp-eyebrow">Compare plans</div>
          <h2>What's in each plan</h2>
        </div>
        <div className="pr-table-wrap">
          <table className="pr-table">
            <thead>
              <tr>
                <th></th>
                <th>The Connection</th>
                <th className="pr-th-hl">The Gift</th>
                <th>The Frame</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map((row, i) => (
                <tr key={i}>
                  <td className="pr-feat-name">{row.feature}</td>
                  <td><CellVal val={row.connection} /></td>
                  <td className="pr-col-hl"><CellVal val={row.gift} /></td>
                  <td><CellVal val={row.frame} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ───────────────────────────────────────────────────── */
const FAQS = [
  {
    q: 'Can I switch plans later?',
    a: "Absolutely. Start with The Connection on your own device, and upgrade to The Frame whenever you're ready. Your data carries over.",
  },
  {
    q: 'What happens after the 6 months included with The Gift or The Frame?',
    a: "The service continues at €3.99/month or €39/year. You'll get a reminder before the included period ends — no surprises.",
  },
  {
    q: 'Which devices does The Connection work on?',
    a: 'Any screen with a modern browser: an iPad on the counter, an old tablet on the shelf, a TV in the living room. Whatever feels like home.',
  },
  {
    q: 'How do I upload my schedule?',
    a: 'Upload your roster as a PDF whenever it changes. NearAway reads every flight automatically — no manual entry, no fuss.',
  },
  {
    q: 'Is this a subscription I have to cancel?',
    a: "You can cancel any time from your dashboard. The frame still works as a beautiful photo display — it just won't follow flights anymore.",
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(null);
  return (
    <section className="hp-section" id="faq">
      <div className="hp-wrap">
        <div className="hp-sec-head">
          <div className="hp-eyebrow">Questions</div>
          <h2>Good to know.</h2>
        </div>
        <div className="pr-faq-list">
          {FAQS.map((f, i) => (
            <div className={`pr-faq ${open === i ? 'open' : ''}`} key={i}>
              <button className="pr-faq-q" onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <svg className="pr-faq-chevron" viewBox="0 0 16 16" fill="none"><path d="M4 6 8 10 12 6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"></path></svg>
              </button>
              <div className="pr-faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Closing + Footer ──────────────────────────────────────── */
function PricingClosing() {
  return (
    <section className="hp-section ember">
      <div className="hp-wrap" style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto' }}>
        <div className="hp-eyebrow" style={{ color: 'var(--terracotta-soft)' }}>For the ones who wait</div>
        <h2 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(34px, 5vw, 56px)', lineHeight: 1.05, color: 'var(--paper-1)', marginTop: 16, letterSpacing: '-0.02em' }}>
          Near. Even when away.
        </h2>
        <p style={{ fontWeight: 300, fontSize: 17, lineHeight: 1.6, color: 'var(--paper-2)', marginTop: 20, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto' }}>
          However you start, the feeling is the same — a quiet warmth on the shelf, all day long.
        </p>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
          <a className="hp-btn hp-btn-onember" href="#tiers">Choose your plan</a>
          <a className="hp-btn hp-btn-glass" href="/">Back to home</a>
        </div>
      </div>
    </section>
  );
}

function PricingFooter() {
  const cols = [
    { h: 'Explore', links: [{ l: 'The frame', href: 'NearAway Homepage.html#object' }, { l: 'How it works', href: 'NearAway Homepage.html#how' }, { l: 'Pricing', href: '#tiers' }] },
    { h: 'Account', links: [{ l: 'Sign in', href: '/account.html' }, { l: 'Your dashboard', href: '/login.html' }] },
    { h: 'Company', links: [{ l: 'Our story', href: '#' }, { l: 'Contact', href: '#' }, { l: 'Press', href: '#' }] },
  ];
  return (
    <footer className="hp-footer">
      <div className="hp-wrap">
        <div className="hp-footer-top">
          <div className="hp-footer-brand">
            <Logo light />
            <div className="tag">Near. Even when away.</div>
          </div>
          {cols.map(c => (
            <div className="hp-footer-col" key={c.h}>
              <h5>{c.h}</h5>
              {c.links.map(lk => <a href={lk.href} key={lk.l}>{lk.l}</a>)}
            </div>
          ))}
        </div>
        <div className="hp-footer-base">
          <span>© 2026 NearAway</span>
          <span>For the ones who wait</span>
        </div>
      </div>
    </footer>
  );
}

function PricingSections(props) { return <PricingHero {...props} />; }

Object.assign(window, { PricingNav, PricingHero, CompareTable, FAQ, PricingClosing, PricingFooter, PricingSections });