// Premium features — shared by the consumer homepage (Standard vs Premium
// comparison) and the business page (Premium-only list). One source of truth
// for the feature copy so the two pages can't drift. Load AFTER sections.jsx /
// sections-business.jsx (needs Reveal / SectionHead / Icon on window).
const { Reveal: PReveal, SectionHead: PSectionHead, Icon: PIcon } = window;
(function () {
  if (document.getElementById('wa-prem-styles')) return;
  const s = document.createElement('style');
  s.id = 'wa-prem-styles';
  s.textContent = `
  .prem-wrap{margin-top:64px;}
  .prem-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px;}
  .prem-head h3{font-size:clamp(24px,3vw,32px);color:var(--lt-text);letter-spacing:-.01em;}
  .prem-head p{color:var(--lt-muted);font-size:16px;margin-top:8px;max-width:560px;line-height:1.5;}
  .prem-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);background:rgba(45,140,255,.1);border:1px solid rgba(45,140,255,.28);border-radius:999px;padding:7px 13px;}
  .prem-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--pink);}

  /* comparison table */
  .prem-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--lt-surface);border:1px solid var(--lt-border);border-radius:var(--radius);overflow:hidden;}
  .prem-table th,.prem-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--lt-border);vertical-align:middle;}
  .prem-table tr:last-child td{border-bottom:none;}
  .prem-table th{font-family:'JetBrains Mono';font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:var(--lt-bg);}
  .prem-table th.col{width:150px;text-align:center;}
  .prem-table th.col.prem{color:var(--pink);background:rgba(45,140,255,.08);}
  .prem-table td.col{text-align:center;width:150px;}
  .prem-table td.col.prem{background:rgba(45,140,255,.04);}
  .prem-table tr:hover td{background:rgba(12,20,36,.015);}
  .prem-table tr:hover td.col.prem{background:rgba(45,140,255,.07);}
  .prem-feat{display:flex;align-items:center;gap:16px;}
  .prem-feat .ico{width:40px;height:40px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,rgba(45,140,255,.14),rgba(29,78,216,.14));display:grid;place-items:center;color:var(--pink);}
  .prem-feat .ico svg{width:19px;height:19px;}
  .prem-feat h4{font-size:16.5px;font-weight:700;color:var(--lt-text);line-height:1.3;}
  .prem-feat p{font-size:14px;color:var(--lt-muted);margin-top:3px;line-height:1.45;}
  .yes,.no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;}
  .yes{background:var(--pink);color:#fff;}
  .no{background:rgba(12,20,36,.06);color:var(--dim);}
  .no::before{content:'';width:10px;height:2px;background:currentColor;border-radius:1px;}
  .prem-table .stdhint{font-size:12.5px;color:var(--dim);font-family:'JetBrains Mono';}

  /* meeting-platform logos row */
  .plat{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
  .plat .pl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--lt-text);background:var(--lt-bg);border:1px solid var(--lt-border);border-radius:999px;padding:4px 10px 4px 5px;white-space:nowrap;}
  .plat .pl .lg{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex-shrink:0;}
  .plat .pl .lg svg{width:18px;height:18px;display:block;}
  .plat .more{font-size:12.5px;color:var(--dim);}

  /* business list variant */
  .prem-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px;}
  .prem-list .feat{align-items:flex-start;}
  .prem-list .feat .ico{width:44px;height:44px;border-radius:12px;}
  .prem-list .feat h3{font-size:18px;}
  .prem-list .feat p{font-size:14.5px;}
  .prem-list .feat.wide{grid-column:1 / -1;}
  .prem-included{display:flex;align-items:center;gap:12px;margin-top:22px;padding:16px 20px;background:var(--lt-bg);border:1px solid var(--lt-border);border-radius:14px;color:var(--lt-muted);font-size:14.5px;line-height:1.45;}
  .prem-included .yes{flex-shrink:0;}
  .prem-included b{color:var(--lt-text);}

  @media(max-width:760px){
    .prem-table th.col,.prem-table td.col{width:70px;padding-left:8px;padding-right:8px;}
    .prem-table th,.prem-table td{padding:14px 14px;}
    .prem-table th.col span{display:none;}
    .prem-table th.col::after{content:attr(data-short);}
    .prem-feat .ico{display:none;}
    .prem-list{grid-template-columns:1fr;}
  }
  `;
  document.head.appendChild(s);
})();

// Brand marks for the three named platforms — simplified geometric logos in
// each product's brand colour, drawn small so they read as chips not artwork.
function PlatLogo({ name }) {
  if (name === 'Zoom') return (
    <span className="lg" style={{ background: '#0b5cff' }}>
      <svg viewBox="0 0 18 18"><rect x="3.2" y="5.6" width="7.6" height="6.8" rx="1.4" fill="#fff" /><path d="M11.6 8.1l3.2-1.9v5.6l-3.2-1.9z" fill="#fff" /></svg>
    </span>);
  if (name === 'Teams') return (
    <span className="lg" style={{ background: '#5059c9' }}>
      <svg viewBox="0 0 18 18"><rect x="3" y="5.5" width="7.4" height="7.4" rx="1.3" fill="#fff" /><path d="M5.2 7.6h3.2M6.8 7.6v3.8" stroke="#5059c9" strokeWidth="1.1" strokeLinecap="round" /><circle cx="13.2" cy="6.4" r="1.6" fill="#fff" /><path d="M11.2 9.2h3.6v3.2a1.6 1.6 0 0 1-1.6 1.6h-2z" fill="#fff" opacity=".85" /></svg>
    </span>);
  // Google Meet
  return (
    <span className="lg" style={{ background: '#fff', border: '1px solid rgba(12,20,36,.12)' }}>
      <svg viewBox="0 0 18 18"><path d="M3 6.5h6.6v5H3z" fill="#00832d" /><path d="M9.6 6.5H12v5H9.6z" fill="#0066da" /><path d="M12 9l3.4-2.4v4.8L12 9z" fill="#00ac47" /><path d="M3 6.5l2.3-2.3h4.3v2.3z" fill="#ffba00" /><path d="M3 11.5h6.6v2.3H5.3z" fill="#2684fc" /></svg>
    </span>);
}

function Platforms() {
  return (
    <div className="plat">
      {['Zoom', 'Meet', 'Teams'].map(n => <span key={n} className="pl"><PlatLogo name={n} />{n === 'Meet' ? 'Google Meet' : n}</span>)}
      <span className="more">& more</span>
    </div>);
}

// The five Premium features. `icon` keys come from the Icon set in sections.jsx.
const PREMIUM_FEATURES = [
  { icon: 'sliders', title: 'Filter by meeting platform', desc: 'Target only the video calls — clear old Zoom, Google Meet or Teams meetings and leave everything else alone.', platforms: true },
  { icon: 'layers', title: 'Filter by response, organiser, recurring & more', desc: 'Narrow by who organised it, whether you accepted, or whether it repeats. Delete exactly the set you mean.' },
  { icon: 'gauge', title: 'Live match count & full preview', desc: 'See every event that matches your filters, and the total, before anything is deleted. No surprises.' },
  { icon: 'shield', title: 'Keep individual events', desc: 'Untick the ones that matter and exclude just the rest. The wedding stays; the 400 stand-ups go.' },
  { icon: 'clock', title: 'Cancel or resume mid-cleanup', desc: 'Stop a cleanup in progress and pick it up later, exactly where it left off.' }
];

// What Standard already does — these rows show a tick in both columns so the
// table reads "here's everything you get, and here's what Premium adds".
const STANDARD_FEATURES = [
  { icon: 'calendar', title: 'Delete everything before a cut-off date', desc: 'Pick a date and clear all events before it, across any calendar you own.' },
  { icon: 'repeat', title: 'Recurring events handled', desc: 'Every instance of a repeating series up to your date — future ones untouched.' },
  { icon: 'hd', title: 'Thousands of events, unattended', desc: 'Years of history cleared in one run. Picks itself back up if interrupted.' }
];

function Yes() { return <span className="yes"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>; }
function No() { return <span className="no"></span>; }

// ---- Consumer: Standard vs Premium comparison table ----
function PremiumCompare() {
  const rows = [...STANDARD_FEATURES.map(f => ({ ...f, std: true })), ...PREMIUM_FEATURES.map(f => ({ ...f, std: false }))];
  return (
    <div className="prem-wrap">
      <PReveal className="prem-head">
        <div>
          <h3>Standard clears the calendar. <span className="grad-text">Premium clears it precisely.</span></h3>
          <p>Standard removes everything before a date. Premium lets you choose what goes — by platform, by organiser, by response — and shows you exactly what will be deleted first.</p>
        </div>
        <span className="prem-badge"><span className="dot"></span>Compare tiers</span>
      </PReveal>
      <PReveal delay={90}>
        <table className="prem-table">
          <thead>
            <tr>
              <th>Feature</th>
              <th className="col" data-short="Std"><span>Standard</span></th>
              <th className="col prem" data-short="Prem"><span>Premium</span></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r =>
              <tr key={r.title}>
                <td>
                  <div className="prem-feat">
                    <div className="ico"><PIcon name={r.icon} /></div>
                    <div><h4>{r.title}</h4><p>{r.desc}</p>{r.platforms && <Platforms />}</div>
                  </div>
                </td>
                <td className="col">{r.std ? <Yes /> : <No />}</td>
                <td className="col prem"><Yes /></td>
              </tr>
            )}
          </tbody>
        </table>
      </PReveal>
    </div>);
}

// ---- Business: Premium-only feature list (Premium is the default tier) ----
function PremiumFeatures() {
  return (
    <section className="section" id="biz-features">
      <div className="wrap">
        <PSectionHead lt eyebrow="Features" title={<>Built to remove the right events. <span className="grad-text">Not just all of them.</span></>} sub="Every business licence includes Premium filtering — so you can clear a departed colleague's Zoom calls, or last term's timetable, and leave the rest of the calendar intact." />
        <div className="prem-list" style={{ marginTop: 54 }}>
          {PREMIUM_FEATURES.map((f, i) =>
            <PReveal key={f.title} delay={i * 70} className={'feat' + (i === PREMIUM_FEATURES.length - 1 ? ' wide' : '')}>
              <div className="ico"><PIcon name={f.icon} /></div>
              <div><h3>{f.title}</h3><p>{f.desc}</p>{f.platforms && <Platforms />}</div>
            </PReveal>
          )}
        </div>
        <PReveal delay={400} className="prem-included">
          <Yes />
          <span><b>Included on every tier.</b> Solopreneur, Small Team and Organisation all ship with the full Premium feature set — no add-ons, no upgrade path to manage.</span>
        </PReveal>
      </div>
    </section>);
}

Object.assign(window, { PremiumCompare, PremiumFeatures, PREMIUM_FEATURES });