// compare.jsx — compare.html (Wirecutter-style pick comparison)

const PICKS = [
  { role: "Our pick", badge: "fg-circuit", id: "agent-context-engine" },
  { role: "Budget", badge: "fg-muted", id: "skill-deep-research" },
  { role: "Upgrade", badge: "fg-red", id: "bundle-builder-starter" },
];

function PickCard({ role, badgeClass, item }) {
  return (
    <article className={"pick-card glass" + (role === "Our pick" ? " our-pick" : "")}>
      <span className={`label-overline pick-badge ${badgeClass}`}>{role}</span>
      <ModeChip mode={item.mode} />
      <h3 className="h3">{item.name}</h3>
      <p className="body-sm fg-muted">Best for {item.bestFor.slice(0, 2).join(", ")}</p>
      <PriceBlock item={item} />
      <ProviderReputation item={item} />
      <CTABlock item={item} />
      <a className="compare-link" href={`pdp-${item.mode}.html?item=${item.id}`}>Full listing <Icon name="chevron-right" size={13} /></a>
    </article>
  );
}

function AllSpecTable({ items }) {
  const keys = [];
  items.forEach((i) => Object.keys(i.specs).forEach((k) => { if (!keys.includes(k)) keys.push(k); }));
  return (
    <div className="spec-table-wrap">
      <table className="spec-table spec-sticky">
        <thead>
          <tr>
            <th></th>
            {items.map((i) => <th key={i.id}>{i.name}</th>)}
          </tr>
        </thead>
        <tbody>
          {keys.map((k) => (
            <tr key={k}>
              <th scope="row">{k}</th>
              {items.map((i) => <td key={i.id}>{i.specs[k] || "—"}</td>)}
            </tr>
          ))}
          <tr>
            <th scope="row">Price</th>
            {items.map((i) => <td key={i.id}>{i.price != null ? `$${i.price}` : "Quoted"}</td>)}
          </tr>
          <tr>
            <th scope="row">Reputation</th>
            {items.map((i) => <td key={i.id}><Stars score={i.provider.reputationScore} size={11} /> {i.provider.reputationScore.toFixed(1)} ({i.provider.reviewCount})</td>)}
          </tr>
        </tbody>
      </table>
    </div>
  );
}

function ComparePage() {
  const items = PICKS.map((p) => ({ ...p, item: getItem(p.id) }));
  return (
    <>
      <Section id="compare-hd">
        <span className="topic label-overline">Comparison</span>
        <h1 className="h1">Three picks, one call.</h1>
        <p className="lead">
          Research and context tooling, compared the way we'd want it compared to us: same job, three
          budgets, full spec table below.
        </p>
      </Section>

      <Section id="picks">
        <div className="pick-grid">
          {items.map((p) => <PickCard key={p.id} role={p.role} badgeClass={p.badge} item={p.item} />)}
        </div>
      </Section>

      <Section id="spec-compare">
        <h2 className="h2">Full spec table<span className="dot">.</span></h2>
        <AllSpecTable items={items.map((p) => p.item)} />
      </Section>

      <Section id="methodology">
        <h2 className="h2">Why trust us<span className="dot">.</span></h2>
        <p className="lead">
          Every comparison on this page runs the same checklist before it's published.
        </p>
        <div className="method-list">
          <div className="method-item"><Icon name="clipboard-check" size={18} className="fg-circuit" /><p className="body-sm">We read every spec sheet ourselves and re-key it into one table — no relying on marketing copy.</p></div>
          <div className="method-item"><Icon name="message-square" size={18} className="fg-circuit" /><p className="body-sm">We check the review history, including the staff replies, before a listing earns a pick badge.</p></div>
          <div className="method-item"><Icon name="badge-info" size={18} className="fg-circuit" /><p className="body-sm">Any partner or provider relationship on a picked item is disclosed on the pick card, not just the PDP.</p></div>
          <div className="method-item"><Icon name="receipt" size={18} className="fg-circuit" /><p className="body-sm">Total cost — tax and fees included — is priced next to the CTA, not revealed at checkout.</p></div>
        </div>
      </Section>
    </>
  );
}

window.__PAGE__ = ComparePage;