/* cards.jsx — six lever cards, each with its own micro-identity */

const LEVERS = [
  {
    id: "prompts",
    num: "01",
    name: "Prompt Library",
    italic: "Library",
    job: "Skip the trial-and-error. Prompts that already work for stores doing 7-figures.",
    tag: "Cheap entry",
    tone: "cheap",
    cta: "Browse the library",
  },
  {
    id: "reel",
    num: "02",
    name: "Reel-Stack",
    italic: "Stack",
    job: "Vetted talent for e-commerce brands. Editors, performance creatives, founders.",
    tag: "Mid",
    tone: "mid",
    cta: "Meet the roster",
  },
  {
    id: "creative",
    num: "03",
    name: "Creative Engine",
    italic: "Engine",
    job: "AI-generated creative at studio quality. Drop a product photo, get a campaign.",
    tag: "Mid",
    tone: "mid",
    cta: "Generate a sample",
  },
  {
    id: "catalog",
    num: "04",
    name: "Product Catalog",
    italic: "Catalog",
    job: "AI-powered catalog system. Enrichment, taxonomy, variants — set once.",
    tag: "Premium · Soon",
    tone: "soon",
    cta: "Join the waitlist",
  },
  {
    id: "airtable",
    num: "05",
    name: "Airtable Build",
    italic: "Build",
    job: "Custom ops backbone for your store. Orders, returns, talent, content — one base.",
    tag: "Premium · Soon",
    tone: "soon",
    cta: "Request a build",
  },
  {
    id: "drop",
    num: "06",
    name: "The Drop",
    italic: "Drop",
    job: "Monthly intel from the trenches. One operator letter. No fluff.",
    tag: "Free",
    tone: "free",
    cta: "Read last month",
  },
];

const Arrow = () => (
  <svg className="lever-cta-arrow" width="12" height="10" viewBox="0 0 12 10" fill="none" aria-hidden="true">
    <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
  </svg>
);

/* per-card interiors */

function PromptsInterior() {
  const rows = [
    { k: "01 / hooks", v: "Cold open / scroll-stop" },
    { k: "02 / angles", v: "Founder vs. influencer voice" },
    { k: "03 / catalog", v: "Bundle / cross-sell copy" },
    { k: "04 / retention", v: "Win-back & loyalty flows" },
  ];
  return (
    <div className="prompt-stack">
      {rows.map((r, i) => (
        <div key={i} className="prompt-row">
          <span className="pk">{r.k}</span>
          <span className="pv">{r.v}</span>
        </div>
      ))}
    </div>
  );
}

function ReelInterior() {
  const roster = [
    { initials: "MK", name: "Mira K.", role: "Performance editor", g1: "#3a5fc4", g2: "#7a9ce0" },
    { initials: "JT", name: "Jonas T.", role: "Founder voice", g1: "#c4633a", g2: "#e0a07a" },
    { initials: "AR", name: "Ana R.", role: "DTC strategist", g1: "#2a8a5b", g2: "#7ac4a0" },
    { initials: "SL", name: "Sam L.", role: "Motion / 3D", g1: "#6b4dd6", g2: "#a890e0" },
  ];
  return (
    <div className="reel-roster">
      {roster.map((p, i) => (
        <div key={i} className="reel-row">
          <div className="reel-avatar" style={{ "--g1": p.g1, "--g2": p.g2 }}>{p.initials}</div>
          <div>
            <div className="reel-name">{p.name}</div>
            <div className="reel-role">{p.role}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function CreativeInterior() {
  return (
    <>
      <div className="creative-grid">
        <div className="creative-tile" />
        <div className="creative-tile" />
        <div className="creative-tile" />
        <div className="creative-tile" />
      </div>
      <div className="creative-caption">
        <span>4 variants · 12s</span>
        <span>· model v3</span>
      </div>
    </>
  );
}

function CatalogInterior() {
  return (
    <div className="catalog-schema">
      <div className="catalog-row catalog-head">
        <span>field</span>
        <span>value</span>
        <span>type</span>
      </div>
      <div className="catalog-row">
        <span className="ct-field">title</span>
        <span className="ct-val">Linen Stripe Tee</span>
        <span className="ct-type">str</span>
      </div>
      <div className="catalog-row">
        <span className="ct-field">tags</span>
        <span className="ct-val">summer, linen, unisex</span>
        <span className="ct-type">[]</span>
      </div>
      <div className="catalog-row">
        <span className="ct-field">variants</span>
        <span className="ct-val">XS · S · M · L · XL</span>
        <span className="ct-type">enum</span>
      </div>
      <div className="catalog-row">
        <span className="ct-field">enriched</span>
        <span className="ct-val">+ alt-text, seo, schema.org</span>
        <span className="ct-type">ai</span>
      </div>
    </div>
  );
}

function AirtableInterior() {
  return (
    <div className="nodes-diagram">
      <svg viewBox="0 0 280 110" preserveAspectRatio="none">
        {/* lines */}
        <path className="nd-line" d="M62 22 H 110" />
        <path className="nd-line" d="M62 22 Q 100 22 100 55 H 110" />
        <path className="nd-line" d="M62 22 Q 100 22 100 88 H 110" />
        <path className="nd-line" d="M174 22 H 218" />
        <path className="nd-line" d="M174 55 H 218" />
        <path className="nd-line" d="M174 88 H 218" />

        {/* source */}
        <rect className="nd-box nd-box-accent" x="6" y="10" width="56" height="24" rx="2" />
        <text className="nd-text nd-text-inverse" x="34" y="26" textAnchor="middle">shopify</text>

        {/* tables */}
        <rect className="nd-box" x="110" y="10" width="64" height="24" rx="2" />
        <text className="nd-text" x="142" y="26" textAnchor="middle">orders</text>
        <rect className="nd-box" x="110" y="43" width="64" height="24" rx="2" />
        <text className="nd-text" x="142" y="59" textAnchor="middle">returns</text>
        <rect className="nd-box" x="110" y="76" width="64" height="24" rx="2" />
        <text className="nd-text" x="142" y="92" textAnchor="middle">talent</text>

        {/* actions */}
        <rect className="nd-box" x="218" y="10" width="56" height="24" rx="2" />
        <text className="nd-text" x="246" y="26" textAnchor="middle">slack</text>
        <rect className="nd-box" x="218" y="43" width="56" height="24" rx="2" />
        <text className="nd-text" x="246" y="59" textAnchor="middle">notify</text>
        <rect className="nd-box" x="218" y="76" width="56" height="24" rx="2" />
        <text className="nd-text" x="246" y="92" textAnchor="middle">sheet</text>
      </svg>
    </div>
  );
}

function DropInterior() {
  const issues = [
    { meta: ["№ 07", "May"], title: "Why your top-of-funnel CPM doubled this quarter." },
    { meta: ["№ 06", "Apr"], title: "The two-creative test that beats split-testing." },
  ];
  return (
    <div className="drop-list">
      {issues.map((iss, i) => (
        <div key={i} className="drop-issue">
          <div className="di-meta">
            {iss.meta.map((m, j) => <span key={j}>{m}</span>)}
          </div>
          <div className="di-title">{iss.title}</div>
        </div>
      ))}
    </div>
  );
}

const INTERIORS = {
  prompts: PromptsInterior,
  reel: ReelInterior,
  creative: CreativeInterior,
  catalog: CatalogInterior,
  airtable: AirtableInterior,
  drop: DropInterior,
};

function LeverCard({ lever, onHover, onLeave, onSelect }) {
  const Interior = INTERIORS[lever.id];
  const tone = lever.tone;
  const display = lever.name.replace(lever.italic, "");
  return (
    <div
      className={`lever lever--${lever.id}`}
      onMouseEnter={() => onHover && onHover(lever.id)}
      onMouseLeave={() => onLeave && onLeave()}
      onClick={() => onSelect && onSelect(lever)}
      data-screen-label={`Lever ${lever.num} ${lever.name}`}
    >
      <div className="lever-num">{lever.num} / 06</div>
      <div className="lever-tag" data-tone={tone}>{lever.tag}</div>

      <h3 className="lever-name">
        {display}<em>{lever.italic}</em>
      </h3>
      <p className="lever-job">{lever.job}</p>

      <div className="lever-body">
        <Interior />
        <span className="lever-cta">
          {lever.cta} <Arrow />
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { LEVERS, LeverCard });