// index.jsx — index.html (Discover home)

const ENTRY_TAGS = ["solo builders", "agencies", "regulated deployments", "ops teams", "sales teams already on Ledgerline"];

function Hero() {
  return (
    <Section id="hero" className="hero-sec">
      <span className="topic cy label-overline">store.aaas.love</span>
      <h1 className="h1">Agents, skills and services.<br />One vocabulary for how you get them.</h1>
      <p className="lead">
        Every listing tells you the mode before you click: buy it outright, go to a partner
        we've vetted, or let us hand you to a provider who does the work. No listing hides which one it is.
      </p>
      <div className="pdp-cta-row" style={{ marginTop: 22 }}>
        <a className="btn btn-primary" href="plp.html">Browse the catalog</a>
        <a className="btn btn-outline" href="compare.html">See how we compare picks</a>
      </div>
      <div className="finder-entry-chips">
        {ENTRY_TAGS.map((t) => (
          <a key={t} className="finder-entry-chip" href={`plp.html?bestFor=${encodeURIComponent(t)}`}>Best for {t}</a>
        ))}
      </div>
    </Section>
  );
}

function FeaturedByMode() {
  const cols = [
    { mode: "buy", label: "Buy it here", items: [getItem("agent-context-engine"), getItem("agent-ops-autopilot")] },
    { mode: "partner", label: "Go to a partner", items: [getItem("agent-crm-copilot"), getItem("saas-ledger-sync")] },
    { mode: "provider", label: "We hand you off", items: [getItem("provider-compliance-review"), getItem("provider-fine-tune-lab")] },
  ];
  return (
    <Section id="featured">
      <span className="topic label-overline">Featured picks</span>
      <h2 className="h2">Three modes<span className="dot">.</span> One page each<span className="dot">.</span></h2>
      <p className="lead" style={{ marginBottom: 24 }}>
        The mode is on the card, not buried at checkout. Pick the column that matches how you want to work with us.
      </p>
      <div className="featured-modes">
        {cols.map((c) => (
          <div key={c.mode} className="featured-col">
            <div className="featured-col-hd">
              <ModeChip mode={c.mode} />
              <span className="label-nav fg-muted">{c.label}</span>
            </div>
            {c.items.map((item) => <ProductCard key={item.id} item={item} />)}
          </div>
        ))}
      </div>
    </Section>
  );
}

function CompareTeaser() {
  return (
    <Section id="compare-teaser">
      <div className="glass" style={{ padding: "2rem", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
        <div>
          <span className="topic label-overline">Not sure which one</span>
          <h3 className="h3" style={{ marginTop: 6 }}>We ran the comparison so you don't have to.</h3>
          <p className="body-sm fg-muted" style={{ maxWidth: 480, marginTop: 6 }}>
            Our pick, the budget option, and the upgrade — with the full spec table and the methodology behind the call.
          </p>
        </div>
        <a className="btn btn-outline" href="compare.html">Open the comparison <Icon name="arrow-right" size={15} /></a>
      </div>
    </Section>
  );
}

function IndexPage() {
  return (
    <>
      <Hero />
      <Section id="finder-entry" className="finder-entry-sec">
        <FinderPanel defaultOpen={false} />
      </Section>
      <FeaturedByMode />
      <Section id="trust">
        <span className="topic label-overline">Why trust the mode</span>
        <h2 className="h2">Trust stack<span className="dot">.</span></h2>
        <div style={{ marginTop: 20 }}><TrustStrip /></div>
      </Section>
      <CompareTeaser />
    </>
  );
}

window.__PAGE__ = IndexPage;