/* Algora — AI Visibility SaaS — case study (route: case/algora).
   Same editorial structure & component patterns as the Stablex V2 / Morpara
   pages, re-themed to the deep teal-green surface #004C33 to signal a
   builder/technical register. Imagery uses labelled placeholders until
   real dashboard screens are supplied.
   Site fonts (Clash Display / Cabinet Grotesk). */

const AG_DARK = "#002E1F";          /* hero / dark surfaces */
const AG_HL = "#5FE6AC";            /* hero highlight (bright mint) */
const AG_MID = "#0E8C63";           /* medium-green labels & accents */
const AG_TINT = "rgba(0,76,51,.05)";
const AG_SCAN_FORM_SRC =
  (typeof window !== "undefined" && window.__resources && window.__resources.algoraScanForm) ||
  "assets/algora-scan-form.png";
const AG_SCAN_SIGNUP_SRC =
  (typeof window !== "undefined" && window.__resources && window.__resources.algoraScanSignup) ||
  "assets/algora-scan-signup.png";
const AG_TINT2 = "rgba(0,76,51,.08)";
const AG_CARD = "#EAF3EE";          /* pale-green light card */
const __agRes = (n, f) => (typeof window !== "undefined" && window.__resources && window.__resources[n]) || f;
const AG_LOGO_CLAUDE_DESIGN = __agRes("agLogoClaudeDesign", "assets/logo-claude-design.png");
const AG_LOGO_CLAUDE_CODE   = __agRes("agLogoClaudeCode",   "assets/logo-claude-code.png");
const AG_LOGO_NEXT     = __agRes("agLogoNext",     "assets/logo-nextjs.png");
const AG_LOGO_SUPABASE = __agRes("agLogoSupabase", "assets/logo-supabase.png");
const AG_LOGO_VERCEL   = __agRes("agLogoVercel",   "assets/logo-vercel.png");
const AG_LOGO_TRIGGER  = __agRes("agLogoTrigger",  "assets/logo-trigger.png");
const AG_LOGO_LLM      = __agRes("agLogoLlm",      "assets/logo-openai.png");

/* ---------- local building blocks ---------- */

function AGPill({ children, dark = false }) {
  return (
    <span className="inline-flex items-center whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[14px] uppercase tracking-[0.18em]"
          style={dark ? { borderColor: "rgba(255,255,255,.3)", color: "rgba(255,255,255,.7)" } : { borderColor: "rgba(15,26,22,.25)", color: "rgba(15,26,22,.6)" }}>
      {children}
    </span>
  );
}

function AGCol({ children, className = "" }) {
  return <div className={`mx-auto px-6 max-w-[680px] ${className}`}>{children}</div>;
}

/* wide tinted panel that breaks out of the text column */
function AGPanel({ children, caption, tint = "#F4F4F5", className = "", maxW = "1080px", pad = "p-0", dark = false }) {
  return (
    <figure className={`mx-auto px-6 ${className}`} style={{ maxWidth: maxW }}>
      <div className={`rounded-2xl overflow-hidden ${pad}`} style={{ background: tint }}>
        {children}
      </div>
      {caption && <figcaption className="mt-3 text-[14px]" style={{ color: dark ? "rgba(255,255,255,.55)" : "rgba(15,26,22,.5)" }}>{caption}</figcaption>}
    </figure>
  );
}

/* browser-chrome frame for desktop/dashboard shots (or a labelled placeholder) */
function AGBrowser({ src, label, url = "app.algora.io", className = "", dark = false, aspect = "16 / 10", fit = "cover", children }) {
  return (
    <div className={`relative w-full ${className}`}>
      <div className="rounded-xl overflow-hidden" style={{ background: dark ? "#0B1F18" : "#FFFFFF", border: `1px solid ${dark ? "rgba(255,255,255,.1)" : "rgba(15,26,22,.1)"}`, boxShadow: "0 40px 90px -45px rgba(0,0,0,.5)" }}>
        <div className="flex items-center gap-2 px-4 py-3" style={{ background: dark ? "#0E2A20" : "#F2F5F3", borderBottom: `1px solid ${dark ? "rgba(255,255,255,.08)" : "rgba(15,26,22,.07)"}` }}>
          <span className="w-3 h-3 rounded-full" style={{ background: "#ff5f57" }}></span>
          <span className="w-3 h-3 rounded-full" style={{ background: "#febc2e" }}></span>
          <span className="w-3 h-3 rounded-full" style={{ background: "#28c840" }}></span>
          <div className="ml-3 flex-1 rounded-md px-3 py-1 text-[12px] truncate" style={{ background: dark ? "rgba(255,255,255,.06)" : "#FFFFFF", color: dark ? "rgba(255,255,255,.5)" : "rgba(15,26,22,.5)" }}>{url}</div>
        </div>
        {children ? (
          <div className="relative">{children}</div>
        ) : (
          <div className="relative" style={{ aspectRatio: aspect }}>
            {src ? (
              <img src={src} alt={label} draggable="false" className={`absolute inset-0 w-full h-full object-top select-none ${fit === "contain" ? "object-contain" : "object-cover"}`} />
            ) : (
              <div className="absolute inset-0 grid place-items-center"
                   style={{ backgroundImage: `repeating-linear-gradient(45deg, ${dark ? "rgba(255,255,255,.05)" : "rgba(0,76,51,.05)"} 0 10px, transparent 10px 20px)`, background: dark ? "rgba(255,255,255,.02)" : "rgba(0,76,51,.03)" }}>
                <span className="text-[12px] uppercase tracking-[0.2em] px-4 text-center" style={{ color: dark ? "rgba(255,255,255,.4)" : "rgba(0,76,51,.45)" }}>{label}</span>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---- compact recreation of the Results page mechanic ----
   In-page section nav + action cards that collapse to a one-line summary and
   expand on demand. Real audit data (Five Guys Utrecht), trimmed to a few rows. */
function AGPriorityTag({ kind }) {
  const map = {
    CRITICAL: { c: "#C0341D", bg: "rgba(192,52,29,.1)" },
    HIGH:     { c: "#B5650E", bg: "rgba(181,101,14,.1)" },
    MEDIUM:   { c: "#0E8C63", bg: "rgba(14,140,99,.12)" },
  };
  const s = map[kind] || map.MEDIUM;
  return <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-semibold tracking-wide" style={{ color: s.c, background: s.bg, border: `1px solid ${s.c}40` }}>{kind}</span>;
}
function AGChip({ children }) {
  return <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-medium" style={{ background: "rgba(15,26,22,.06)", color: "rgba(15,26,22,.55)" }}>{children}</span>;
}
function AGActionRow({ data, open, onToggle }) {
  return (
    <div className="border-b" style={{ borderColor: "rgba(15,26,22,.08)" }}>
      <button onClick={onToggle} className="w-full text-left px-4 py-3 flex items-start gap-3">
        <div className="flex-1 min-w-0">
          <div className="text-[9px] uppercase tracking-[0.16em]" style={{ color: "rgba(15,26,22,.4)" }}>Action {data.n}</div>
          <div className="mt-1 flex flex-wrap items-center gap-1.5">
            <span className="text-[13px] font-semibold" style={{ color: "#0f1a16" }}>{data.title}</span>
            <AGPriorityTag kind={data.priority} />
            {data.chips.map((c) => <AGChip key={c}>{c}</AGChip>)}
            {data.ready && <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-medium" style={{ color: "#0E8C63", background: "rgba(14,140,99,.1)" }}>Ready to Publish</span>}
          </div>
        </div>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(15,26,22,.4)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
             className="shrink-0 mt-1 transition-transform duration-300" style={{ transform: open ? "rotate(180deg)" : "none" }}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      <div className="overflow-hidden transition-all duration-300" style={{ maxHeight: open ? 200 : 0, opacity: open ? 1 : 0 }}>
        <div className="px-4 pb-4 pt-1">
          <div className="rounded-lg p-3" style={{ background: "rgba(14,140,99,.05)", border: "1px solid rgba(14,140,99,.14)" }}>
            <div className="flex items-center justify-between">
              <div className="text-[10px] uppercase tracking-[0.14em]" style={{ color: "#0E8C63" }}>What to do</div>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(15,26,22,.35)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
            </div>
            <p className="mt-1 text-[12px] leading-[1.5]" style={{ color: "rgba(15,26,22,.7)" }}>{data.detail}</p>
            <div className="mt-2.5 flex flex-wrap gap-4 text-[10px]" style={{ color: "rgba(15,26,22,.5)" }}>
              <span><b style={{ color: "#0f1a16" }}>Projected:</b> {data.projected}</span>
              <span><b style={{ color: "#0f1a16" }}>Surfaces:</b> {data.surfaces}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
function AGResultsDemo() {
  const NAV = ["Your Scores", "Competitor Results", "Action Plan", "Queries"];
  const [tab, setTab] = React.useState(2);
  const ACTIONS = [
    { n: 1, title: "Utrecht Burger Customization Authority Page", priority: "CRITICAL", chips: ["NS", "DVS", "OBVS"], effort: "High", eta: "10\u201321d", progress: "0/5", detail: "Publish a dedicated NL+EN authority page for burger customization \u2014 the highest-intent query cluster where AI currently recommends competitors.", projected: "+3 pts BVS", surfaces: "GPT \u00b7 AIO \u00b7 PERP" },
    { n: 2, title: "lens.nl + TripAdvisor Q&A Intercept", priority: "CRITICAL", chips: ["CIS", "DVS", "OBVS"], ready: true, effort: "Low", eta: "3\u20137d", progress: "0/5", detail: "Seed structured Q&A answers on lens.nl and TripAdvisor so AI models cite you for \u2018best burger in Utrecht\u2019 comparison prompts.", projected: "+2 pts BVS", surfaces: "GPT \u00b7 GEMINI" },
    { n: 3, title: "HowTo Decision Content", priority: "HIGH", chips: ["DVS", "NS", "OBVS"], effort: "Medium", eta: "7\u201314d", progress: "0/6", detail: "\u2018How to Choose the Best Burger Restaurant in Utrecht\u2019 (NL+EN) \u2014 educational content that wins discovery-stage AI answers.", projected: "+1.5 pts BVS", surfaces: "AIO \u00b7 PERP" },
  ];
  const [open, setOpen] = React.useState({});
  const toggle = (n) => setOpen((p) => ({ ...p, [n]: !p[n] }));
  const [lang, setLang] = React.useState("EN");
  const AGSCORES = [
    { metric: "Overall Brand Visibility", you: "7%", status: "Critical", youSub: "EN 8% NL 6%", cols: [{ v: "5%", sub: "EN 6 NL 4" }, { v: "4.5%", sub: "EN 5 NL 4" }, { v: "20.5%", sub: "EN 26 NL 15" }, { v: "3%", sub: "EN 3 NL 3" }] },
    { metric: "Market Share", you: "4%", status: "Critical", youSub: "EN 4% NL 3%", cols: [{ v: "3%", sub: "EN 3 NL 2" }, { v: "3%", sub: "EN 3 NL 3" }, { v: "11%", sub: "EN 13 NL 9" }, { v: "2%", sub: "EN 2 NL 2" }] },
    { metric: "Niche Score", you: "5%", status: "Critical", youSub: "EN 7% NL 3%", cols: [{ v: "1.5%", sub: "EN 2 NL 1" }, { v: "3%", sub: "EN 5 NL 1" }, { v: "22.5%", sub: "EN 31 NL 14" }, { v: "1.5%", sub: "EN 3 NL 0" }] },
    { metric: "Discovery Score", you: "3%", status: "Critical", youSub: "EN 4% NL 2%", cols: [{ v: "0%", sub: "EN 0 NL 0" }, { v: "0%", sub: "EN 0 NL 0" }, { v: "19.5%", sub: "EN 25 NL 14" }, { v: "0%", sub: "EN 0 NL 0" }] },
    { metric: "Competition & Intercept", you: "3%", status: "Critical", youSub: "EN 6% NL 0%", cols: [{ v: "0%", sub: "EN 0 NL 0" }, { v: "3%", sub: "EN 6 NL 0" }, { v: "8%", sub: "EN 16 NL 0" }, { v: "4.5%", sub: "EN 9 NL 0" }] },
    { metric: "Sentiment Score", you: "79%", status: "Very Good", youSub: "EN 75% NL 84%", cols: [{ v: "77.5%", sub: "EN 75 NL 80" }, { v: "80.5%", sub: "EN 71 NL 90" }, { v: "79.5%", sub: "EN 78 NL 81" }, { v: "78%", sub: "EN 75 NL 81" }] },
  ];
  const [scoresOpen, setScoresOpen] = React.useState(false);
  const cellColor = (v) => { const n = parseFloat(v); return n >= 80 ? "#15803D" : n >= 8 ? "#B5650E" : "#C0341D"; };
  const AGCOMPETITORS = [
    { name: "Five Guys Utrecht", you: true, vals: [["7%","EN 8 NL 6"],["4%","EN 4 NL 3"],["5%","EN 7 NL 3"],["3%","EN 4 NL 2"],["3%","EN 6 NL 0"],["79%","EN 75 NL 84"]] },
    { name: "Burger Bar", vals: [["38%","EN 42 NL 33"],["22%","EN 23 NL 20"],["37%","EN 42 NL 32"],["50%","EN 57 NL 43"],["12%","EN 13 NL 11"],["77%","EN 80 NL 74"]] },
    { name: "Meneer Smakers", vals: [["35%","EN 37 NL 32"],["20%","EN 20 NL 20"],["35%","EN 38 NL 31"],["45%","EN 50 NL 40"],["12%","EN 8 NL 15"],["74%","EN 74 NL 74"]] },
    { name: "Firma Pickles Burgers", vals: [["22%","EN 25 NL 20"],["13%","EN 13 NL 12"],["21%","EN 24 NL 17"],["29%","EN 33 NL 25"],["6%","EN 4 NL 7"],["74%","EN 75 NL 72"]] },
    { name: "Beers & Barrels", vals: [["12%","EN 13 NL 12"],["7%","EN 7 NL 7"],["13%","EN 13 NL 12"],["14%","EN 15 NL 12"],["6%","EN 5 NL 6"],["60%","EN 58 NL 61"]] },
    { name: "Ellis Gourmet Burger", vals: [["12%","EN 11 NL 14"],["8%","EN 6 NL 9"],["10%","EN 9 NL 11"],["14%","EN 13 NL 14"],["7%","EN 3 NL 10"],["64%","EN 62 NL 66"]] },
    { name: "Fat Phill's", vals: [["11%","EN 13 NL 9"],["7%","EN 7 NL 6"],["10%","EN 12 NL 8"],["12%","EN 15 NL 9"],["2%","EN 2 NL 2"],["64%","EN 69 NL 58"]] },
    { name: "Loft 88", vals: [["10%","EN 11 NL 9"],["6%","EN 6 NL 6"],["8%","EN 7 NL 9"],["11%","EN 13 NL 9"],["2%","EN 1 NL 2"],["64%","EN 69 NL 58"]] },
    { name: "Burger King", vals: [["10%","EN 10 NL 11"],["6%","EN 5 NL 7"],["9%","EN 8 NL 10"],["12%","EN 11 NL 12"],["3%","EN 2 NL 3"],["59%","EN 53 NL 65"]] },
    { name: "Papi's Comfort Kitchen", vals: [["9%","EN 9 NL 10"],["6%","EN 5 NL 6"],["8%","EN 8 NL 8"],["10%","EN 9 NL 11"],["2%","EN 0 NL 3"],["64%","EN 58 NL 70"]] },
    { name: "McDonalds", vals: [["7%","EN 6 NL 7"],["4%","EN 3 NL 4"],["5%","EN 4 NL 6"],["7%","EN 6 NL 7"],["2%","EN 1 NL 2"],["51%","EN 45 NL 57"]] },
  ];
  const [compOpen, setCompOpen] = React.useState(false);
  const AGQUERIES = [
    { cat: "Category & Intent", queries: [
      ["best customizable burger place in Utrecht where I can build my own burger", 0.10, 0.00],
      ["where can a group of friends get burgers and milkshakes in Utrecht without waiting forever", 0.00, 0.00],
      ["fast-casual burger spots in Utrecht that are actually filling and worth the price", 0.13, 0.00],
      ["burger restaurant in Utrecht open for lunch and dinner with lots of topping options", 0.00, 0.10],
      ["which burger chains in Utrecht let you customize everything on your order", 0.00, 0.00],
      ["top-rated fast food burger joints in Utrecht with fresh ingredients not frozen patties", 0.09, 0.00],
      ["where to get a proper loaded burger and hand-cut fries in Utrecht city center", 0.00, 0.00],
      ["burger and milkshake restaurants in Utrecht popular with tourists and locals alike", 0.00, 0.14],
      ["where to get a hand-spun milkshake with a burger in Utrecht", 0.15, 0.00],
      ["fast-casual restaurant in Utrecht that serves hot dogs as well as burgers", 0.12, 0.15],
      ["customizable burger restaurant where I can choose my own toppings and sauces", 0.00, 0.00],
      ["places to eat in Utrecht that serve Cajun-style fries and loaded burgers", 0.11, 0.00],
      ["burger restaurant with no frozen beef and fresh-cooked patties near Utrecht Centraal", 0.00, 0.14],
      ["where to get a big customizable burger meal deal in Utrecht for under 20 euros", 0.00, 0.10],
      ["fast-casual burger place in Utrecht good for a quick meal between trains", 0.00, 0.00],
      ["best burger restaurant in Utrecht Hoog Catharijne shopping area", 0.00, 0.00],
      ["where to eat a proper burger near Utrecht Centrum station area", 0.00, 0.00],
      ["fast food burger spots in Utrecht Centrum worth visiting", 0.11, 0.00],
      ["good burger and fries place near Utrecht Overvecht or city center", 0.00, 0.00],
      ["burger restaurants near Utrecht Centraal that are quick and filling", 0.14, 0.00],
    ] },
    { cat: "Problem Solving & Educational", queries: [
      ["How to find a burger place in Utrecht that actually lets me customize every single topping without extra hassle", 0.15, 0.00],
      ["Best way to get a quick satisfying burger meal in Utrecht when you only have 30 minutes between meetings", 0.00, 0.00],
      ["How to find a burger restaurant in Utrecht that uses fresh beef and not frozen patties", 0.00, 0.00],
      ["Best way to feed a group of picky eaters in Utrecht where everyone can customize their own order", 0.00, 0.00],
      ["How to find a reliable burger spot near Utrecht Centraal that's open during peak shopping hours", 0.00, 0.11],
      ["Best way to avoid overpriced mediocre burgers in Utrecht and actually get something worth eating", 0.14, 0.00],
      ["should I go to a fast-casual burger chain or a local burger bar in Utrecht for a casual dinner", 0.00, 0.00],
      ["deciding between a sit-down burger restaurant and a quick-service place in Utrecht for a family outing", 0.00, 0.00],
      ["what kind of burger restaurant in Utrecht is best when you want a filling meal without a long wait", 0.00, 0.00],
      ["is it better to go to an international burger chain or a local spot in Utrecht for consistent quality", 0.00, 0.00],
      ["where should I take out-of-town visitors for a casual burger meal near Utrecht Centraal", 0.00, 0.00],
      ["which type of burger place in Utrecht is best when you want milkshakes and fries alongside your burger", 0.00, 0.00],
      ["how do I avoid ending up at a burger place in Utrecht that looks good online but serves dry overcooked patties", 0.00, 0.00],
      ["worried about long queues at popular burger spots in Utrecht during lunch rush — where is it manageable", 0.00, 0.00],
      ["how to avoid a burger restaurant in Utrecht that charges extra for every single topping and ends up costing a fortune", 0.12, 0.00],
      ["scared of ordering a milkshake at a burger place in Utrecht and getting something made from powder — where is it actually real", 0.00, 0.00],
    ] },
    { cat: "Competitor Comparison", queries: [
      ["are there other burger places in Utrecht besides Meneer Smakers with lots of customization options", 0.09, 0.00],
      ["other burger restaurants in Utrecht Centrum besides Firma Pickles Burgers & Wines that are quick and casual", 0.00, 0.00],
      ["places to eat burgers in Utrecht similar to Fat Phill's but with more topping choices", 0.00, 0.00],
      ["burger spots in Utrecht other than McDonald's where the beef is fresh and not frozen", 0.00, 0.00],
      ["alternatives to Burger King in Utrecht for a fast customizable burger meal near the train station", 0.10, 0.00],
      ["best fast-casual burger restaurant in Utrecht compared to Ellis Gourmet Burger for a quick satisfying meal", 0.00, 0.00],
      ["Beers & Barrels vs other burger options in Utrecht for someone who just wants a great burger without the bar atmosphere", 0.00, 0.00],
      ["top burger places in Utrecht versus Loft 88 for a casual meal with customizable options and milkshakes", 0.00, 0.00],
      ["which burger restaurant in Utrecht is best for a large group where everyone wants to customize their own order", 0.23, 0.00],
      ["which fast-casual burger place in Utrecht is best for a quick meal near the central station with fresh ingredients", 0.14, 0.00],
    ] },
    { cat: "Brand & Direct Reputation", max: 0.50, queries: [
      ["How well-known is Five Guys Utrecht and how do people rate the overall experience", 0.38, 0.42],
      ["What do recent reviews say about Five Guys Utrecht in terms of food quality and service", 0.40, 0.45],
      ["Can I trust Five Guys Utrecht to consistently deliver fresh burgers and good milkshakes", 0.39, 0.45],
      ["What customization options does Five Guys Utrecht offer on their burgers and hot dogs", 0.25, 0.29],
      ["What is on the menu at Five Guys Utrecht at https://restaurants.fiveguys.nl/utrecht-hoog-catharijne and are milkshakes available", 0.26, 0.20],
      ["What are the opening hours and location details for Five Guys Utrecht at https://restaurants.fiveguys.nl/utrecht-hoog-catharijne", 0.17, 0.00],
      ["Five Guys Utrecht vs Papi's Comfort Kitchen: which is better for a customizable burger meal in Utrecht", 0.42, 0.40],
      ["Five Guys Utrecht vs Burger Bar: which offers better value and more topping choices for a fast-casual burger in Utrecht", 0.24, 0.07],
    ] },
  ];
  const [qOpen, setQOpen] = React.useState(-1);
  return (
    <div style={{ background: "#F7F9FB" }}>
      {/* header strip */}
      <div className="px-4 pt-4 pb-3">
        <div className="text-[14px] font-semibold" style={{ color: "#0f1a16" }}>Results for Five Guys Utrecht</div>
        <div className="text-[10px]" style={{ color: "rgba(15,26,22,.4)" }}>Audit made on 31/05/2026 · weekly auto-pilot</div>
      </div>
      {/* in-page section nav */}
      <div className="px-4 flex items-center gap-5 border-b" style={{ borderColor: "rgba(15,26,22,.1)" }}>
        {NAV.map((t, k) => (
          <button key={t} onClick={() => setTab(k)} className="relative py-2.5 text-[11px] uppercase tracking-[0.1em] transition-colors"
                  style={{ color: tab === k ? "#0f1a16" : "rgba(15,26,22,.4)", fontWeight: tab === k ? 600 : 500 }}>
            {t}
            {tab === k && <span className="absolute left-0 right-0 -bottom-px h-0.5 rounded-full" style={{ background: "#15D997" }} />}
          </button>
        ))}
      </div>
      {/* ── ACTION PLAN ── */}
      {tab === 2 && (
        <div>
          <div className="mx-4 mt-3 rounded-lg px-3 py-2.5 flex items-center justify-between" style={{ background: "rgba(14,140,99,.07)", border: "1px solid rgba(14,140,99,.16)" }}>
            <div className="text-[11px]" style={{ color: "rgba(15,26,22,.7)" }}>
              Completing all <b style={{ color: "#0f1a16" }}>5 actions</b> is projected to lift BVS by <b style={{ color: "#0E8C63" }}>+8 pts</b> in 8 weeks.
            </div>
            <div className="hidden sm:flex items-center gap-1.5 text-[10px]" style={{ color: "rgba(15,26,22,.5)" }}>
              <span>7%</span><span className="inline-block w-12 h-1 rounded-full" style={{ background: "linear-gradient(90deg,#C0341D,#15D997)" }} /><span style={{ color: "#0E8C63" }}>15%</span>
            </div>
          </div>
          <div className="m-4 mt-3 rounded-lg overflow-hidden" style={{ background: "#fff", border: "1px solid rgba(15,26,22,.1)" }}>
            {ACTIONS.map((a) => (
              <AGActionRow key={a.n} data={a} open={!!open[a.n]} onToggle={() => toggle(a.n)} />
            ))}
          </div>
        </div>
      )}

      {/* ── YOUR SCORES ── */}
      {tab === 0 && (
        <div className="m-4 rounded-lg overflow-hidden" style={{ background: "#fff", border: "1px solid rgba(15,26,22,.1)" }}>
          <div className="grid grid-cols-[1.4fr_repeat(4,1fr)] text-[10px] uppercase tracking-[0.1em] px-3 py-2.5 border-b" style={{ color: "rgba(15,26,22,.4)", borderColor: "rgba(15,26,22,.08)", background: "rgba(15,26,22,.02)" }}>
            <span>Your Scores</span><span className="text-center">GPT</span><span className="text-center">AIO</span><span className="text-center">PERP</span><span className="text-center">GEMINI</span>
          </div>
          {(scoresOpen ? AGSCORES : AGSCORES.slice(0, 3)).map((r) => {
            const good = r.status === "Very Good";
            return (
            <div key={r.metric} className="grid grid-cols-[1.4fr_repeat(4,1fr)] items-center px-3 py-3 border-b last:border-0" style={{ borderColor: "rgba(15,26,22,.06)" }}>
              <div className="pr-2">
                <div className="text-[10px] font-semibold leading-tight" style={{ color: "#0f1a16" }}>{r.metric}</div>
                <div className="mt-1 flex items-center gap-1.5">
                  <span className="text-[16px] font-semibold" style={{ color: good ? "#B5650E" : "#C0341D" }}>{r.you}</span>
                  <span className="rounded px-1 py-0.5 text-[8px] font-semibold" style={good ? { color: "#B5650E", background: "rgba(181,101,14,.12)" } : { color: "#C0341D", background: "rgba(192,52,29,.1)" }}>{r.status}</span>
                </div>
                <div className="text-[9px]" style={{ color: "rgba(15,26,22,.4)" }}>{r.youSub}</div>
              </div>
              {r.cols.map((c, k) => (
                <div key={k} className="text-center">
                  <div className="text-[14px] font-semibold" style={{ color: cellColor(c.v) }}>{c.v}</div>
                  <div className="text-[9px]" style={{ color: "rgba(15,26,22,.4)" }}>{c.sub}</div>
                </div>
              ))}
            </div>
          );})}
          <button onClick={() => setScoresOpen((o) => !o)} className="w-full py-2.5 flex items-center justify-center gap-1.5 text-[11px]" style={{ color: "#0E8C63" }}>
            {scoresOpen ? "Show less" : "See all scores"}
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" className="transition-transform" style={{ transform: scoresOpen ? "rotate(180deg)" : "none" }}><path d="M6 9l6 6 6-6" /></svg>
          </button>
        </div>
      )}

      {/* ── COMPETITOR RESULTS ── */}
      {tab === 1 && (
        <div className="m-4 rounded-lg overflow-hidden" style={{ background: "#fff", border: "1px solid rgba(15,26,22,.1)" }}>
          <div className="grid grid-cols-[1.6fr_repeat(6,1fr)] text-[9px] uppercase tracking-[0.08em] px-3 py-2.5 border-b" style={{ color: "rgba(15,26,22,.4)", borderColor: "rgba(15,26,22,.08)", background: "rgba(15,26,22,.02)" }}>
            <span>Competitor</span><span className="text-center">Overall</span><span className="text-center">Mkt</span><span className="text-center">Niche</span><span className="text-center">Disc.</span><span className="text-center">Intercept</span><span className="text-center">Sentim.</span>
          </div>
          {(compOpen ? AGCOMPETITORS : AGCOMPETITORS.slice(0, 4)).map((r) => (
            <div key={r.name} className="grid grid-cols-[1.6fr_repeat(6,1fr)] items-center px-3 py-2.5 border-b last:border-0"
                 style={{ borderColor: "rgba(15,26,22,.06)", background: r.you ? "rgba(14,140,99,.06)" : "transparent" }}>
              <div className="flex items-center gap-1.5 pr-2">
                <span className="text-[10px] font-medium truncate" style={{ color: r.you ? "#0E8C63" : "#0f1a16" }}>{r.name}</span>
                {r.you && <span className="rounded px-1 py-0.5 text-[8px] font-semibold" style={{ color: "#0E8C63", background: "rgba(14,140,99,.12)" }}>YOU</span>}
              </div>
              {r.vals.map(([v, sub], k) => (
                <div key={k} className="text-center">
                  <div className="text-[12px] font-semibold" style={{ color: parseFloat(v) >= 30 ? "#15803D" : parseFloat(v) >= 8 ? "#B5650E" : "#C0341D" }}>{v}</div>
                  <div className="text-[8px]" style={{ color: "rgba(15,26,22,.38)" }}>{sub}</div>
                </div>
              ))}
            </div>
          ))}
          <button onClick={() => setCompOpen((o) => !o)} className="w-full py-2.5 flex items-center justify-center gap-1.5 text-[11px]" style={{ color: "#0E8C63" }}>
            {compOpen ? "Show less" : "See all 10 competitors"}
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" className="transition-transform" style={{ transform: compOpen ? "rotate(180deg)" : "none" }}><path d="M6 9l6 6 6-6" /></svg>
          </button>
        </div>
      )}

      {/* ── QUERIES ── */}
      {tab === 3 && (
        <div className="m-4">
          <div className="flex justify-end mb-2">
            <div className="inline-flex rounded-md overflow-hidden text-[10px]" style={{ border: "1px solid rgba(15,26,22,.12)" }}>
              {["EN", "NL"].map((l) => (
                <button key={l} onClick={() => setLang(l)} className="px-2.5 py-1 font-medium transition-colors"
                        style={{ background: lang === l ? "#fff" : "transparent", color: lang === l ? "#0f1a16" : "rgba(15,26,22,.4)", boxShadow: lang === l ? "0 1px 3px rgba(0,0,0,.08)" : "none" }}>{l}</button>
              ))}
            </div>
          </div>
          <div className="rounded-lg overflow-hidden" style={{ background: "#fff", border: "1px solid rgba(15,26,22,.1)" }}>
            {AGQUERIES.map((q, ci) => {
              const isOpen = qOpen === ci;
              return (
                <div key={q.cat} className="border-b last:border-0" style={{ borderColor: "rgba(15,26,22,.06)" }}>
                  <button onClick={() => setQOpen(isOpen ? -1 : ci)} className="w-full flex items-center justify-between px-3 py-3">
                    <span className="text-left text-[11px] uppercase tracking-[0.08em] font-medium" style={{ color: "#0f1a16" }}>{q.cat}</span>
                    <span className="flex items-center gap-2 text-[10px]" style={{ color: "rgba(15,26,22,.45)" }}>{q.queries.length} queries
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" className="transition-transform" style={{ transform: isOpen ? "rotate(180deg)" : "none" }}><path d="M6 9l6 6 6-6" /></svg>
                    </span>
                  </button>
                  {isOpen && (
                    <div style={{ background: "rgba(15,26,22,.015)" }}>
                      {q.queries.map(([text, en, nl], qi) => {
                        const mx = q.max || 1.00;
                        const avg = ((en + nl) / 2).toFixed(2);
                        return (
                          <div key={qi} className="flex items-center gap-3 px-3 py-2.5 border-t" style={{ borderColor: "rgba(15,26,22,.05)" }}>
                            <span className="flex-1 min-w-0 text-[11px] leading-snug" style={{ color: "rgba(15,26,22,.78)" }}>
                              <span style={{ color: "rgba(15,26,22,.35)" }}>{qi + 1}. </span>{text}
                            </span>
                            <span className="shrink-0 flex items-center gap-1.5">
                              <span className="rounded px-1.5 py-1 text-[9px] tabular-nums" style={{ background: "rgba(15,26,22,.05)", color: lang === "EN" ? "#0f1a16" : "rgba(15,26,22,.4)", fontWeight: lang === "EN" ? 600 : 400 }}>EN {en.toFixed(2)}</span>
                              <span className="rounded px-1.5 py-1 text-[9px] tabular-nums" style={{ background: "rgba(15,26,22,.05)", color: lang === "NL" ? "#0f1a16" : "rgba(15,26,22,.4)", fontWeight: lang === "NL" ? 600 : 400 }}>NL {nl.toFixed(2)}</span>
                              <span className="rounded px-1.5 py-1 text-[9px] font-semibold tabular-nums" style={{ background: "rgba(14,140,99,.08)", color: "#0E8C63" }}>AVG {avg} / {mx.toFixed(2)}</span>
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

/* horizontal browser-shot gallery — top controls (progress left, arrows right).
   Each slide is a browser frame; pass `html` for a scrollable HTML slide,
   `src` for an image, or `label` for a placeholder. */
function AGGallery({ shots, height = 460 }) {
  const [i, setI] = React.useState(0);
  const [stuck, setStuck] = React.useState(false);
  const barRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => { const el = barRef.current; if (!el) return; setStuck(el.getBoundingClientRect().top <= 0.5); };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);
  const n = shots.length;
  const go = (d) => setI((p) => (p + d + n) % n);
  return (
    <div className="rounded-2xl" style={{ background: "#EAF3EE", border: "1px solid rgba(0,76,51,.1)" }}>
      {/* top control bar — part of the window card at first; full-bleed once it sticks */}
      <div ref={barRef} className="flex items-center justify-between py-3.5"
           style={{ background: "#E3EEE8", position: "sticky", top: 0, zIndex: 60,
             ...(stuck
               ? { width: "100vw", marginLeft: "calc(50% - 50vw)", paddingLeft: 40, paddingRight: 40, borderBottom: "1px solid rgba(0,76,51,.1)" }
               : { width: "100%", marginLeft: 0, paddingLeft: 24, paddingRight: 24, borderTopLeftRadius: 16, borderTopRightRadius: 16 }) }}>
        <div className="flex items-center gap-1.5">
          {shots.map((_, k) => (
            <button key={k} onClick={() => setI(k)} aria-label={`Go to ${k + 1}`}
              className="h-[3px] rounded-full overflow-hidden transition-all duration-300"
              style={{ width: k === i ? 32 : 16, background: "rgba(0,76,51,.18)" }}>
              <span className="block h-full rounded-full transition-all duration-500" style={{ width: k === i ? "100%" : "0%", background: AG_MID }} />
            </button>
          ))}
        </div>
        <div className="flex items-center gap-3">
          <span className="text-[12px]" style={{ color: "rgba(15,26,22,.5)" }}>{shots[i] && shots[i].label}</span>
          <div className="flex items-center gap-2">
            <button onClick={() => go(-1)} aria-label="Previous" className="grid place-items-center rounded-full" style={{ width: 34, height: 34, background: "rgba(255,255,255,.8)", border: "1px solid rgba(0,76,51,.14)" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={AG_DARK} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
            </button>
            <button onClick={() => go(1)} aria-label="Next" className="grid place-items-center rounded-full" style={{ width: 34, height: 34, background: "rgba(255,255,255,.8)", border: "1px solid rgba(0,76,51,.14)" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={AG_DARK} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6" /></svg>
            </button>
          </div>
        </div>
      </div>
      {/* slide track */}
      <div className="overflow-hidden p-4 md:p-6 rounded-b-2xl">
        <div className="flex transition-transform duration-500 ease-out" style={{ transform: `translateX(-${i * 100}%)` }}>
          {shots.map((s, k) => (
            <div key={k} className="w-full flex-shrink-0 px-1">
              <AGBrowser url={s.url} dark={s.dark} label={s.label} fit={s.fit} src={(s.html||s.iframe||s.scroll||s.stickyLeft||s.stickyTop) ? undefined : s.src}>
                {s.iframe ? (
                  i === k ? (
                    <iframe src={s.iframe} title={s.label} loading="lazy" style={{ width: "100%", height, border: "0", display: "block", background: "#fff" }} />
                  ) : (
                    <div style={{ width: "100%", height, background: "#eaf3ee" }} />
                  )
                ) : s.html ? (
                  <div style={{ height, overflowY: "auto", background: "#fff" }} dangerouslySetInnerHTML={{ __html: s.html }} />
                ) : s.stickyLeft ? (
                  <div className="flex" style={{ height, background: "#fff" }}>
                    <div style={{ width: `${s.stickyLeft.ratio * 100}%`, flexShrink: 0, overflow: "hidden", borderRight: "1px solid rgba(15,26,22,.06)" }}>
                      <img src={s.stickyLeft.side} alt="" draggable="false" className="select-none" style={{ width: "100%", height: "auto", display: "block" }} />
                    </div>
                    <div style={{ flex: 1, overflowY: "auto" }}>
                      <img src={s.stickyLeft.body} alt={s.label} draggable="false" className="select-none" style={{ width: "100%", height: "auto", display: "block" }} />
                    </div>
                  </div>
                ) : s.stickyTop ? (
                  <div style={{ height, background: "#fff", display: "flex", flexDirection: "column" }}>
                    <img src={s.stickyTop.nav} alt="" draggable="false" className="select-none" style={{ width: "100%", height: "auto", display: "block", flexShrink: 0, borderBottom: "1px solid rgba(15,26,22,.06)" }} />
                    <div style={{ flex: 1, overflowY: "auto" }}>
                      <img src={s.stickyTop.body} alt={s.label} draggable="false" className="select-none" style={{ width: "100%", height: "auto", display: "block" }} />
                    </div>
                  </div>
                ) : s.scroll ? (
                  <div style={{ height, overflowY: "auto", background: "#fff" }}>
                    <img src={s.src} alt={s.label} draggable="false" className="select-none" style={{ width: "100%", height: "auto", display: "block" }} />
                  </div>
                ) : null}
              </AGBrowser>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* bottom floating section navigator (same dock pattern as the other cases) */
function AGSectionNav() {
  const items = [
    ["ag-problem", "The Idea"], ["ag-decisions", "Decisions"], ["ag-final", "Final design"],
    ["ag-build", "Building it"], ["ag-impact", "Impact"],
  ];
  const [active, setActive] = React.useState("ag-problem");
  const [shown, setShown] = React.useState(false);
  const [navUp, setNavUp] = React.useState(false);
  const lastYRef = React.useRef(0);
  React.useEffect(() => {
    const pick = () => {
      const mid = window.scrollY + window.innerHeight * 0.5;
      let current = items[0][0];
      for (const [id] of items) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top + window.scrollY <= mid) current = id;
      }
      setActive(current);
      const y = window.scrollY;
      setShown(y > 40);
      if (y < lastYRef.current - 2) setNavUp(true);
      else if (y > lastYRef.current + 2 || y <= 2) setNavUp(false);
      lastYRef.current = y;
    };
    pick();
    window.addEventListener("scroll", pick, { passive: true });
    window.addEventListener("resize", pick);
    return () => { window.removeEventListener("scroll", pick); window.removeEventListener("resize", pick); };
  }, []);
  const go = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
  };
  return (
    <React.Fragment>
    {/* mobile — top sticky, full-width, horizontal scroll */}
    <nav className="md:hidden fixed left-0 right-0 z-40" style={{ top: navUp ? 64 : 0, opacity: shown ? 1 : 0, transition: "opacity .4s ease, top .3s ease", pointerEvents: shown ? "auto" : "none" }}>
      <div className="flex items-center gap-1 overflow-x-auto px-3 py-2" style={{ background: AG_DARK, borderBottom: "1px solid rgba(255,255,255,0.12)", WebkitOverflowScrolling: "touch" }}>
        {items.map(([id, label]) => {
          const on = active === id;
          return (
            <a key={id} href={`#${id}`} onClick={(e) => go(e, id)}
               className="shrink-0 text-[11px] uppercase tracking-[0.12em] rounded-full px-3.5 py-1.5 whitespace-nowrap"
               style={on ? { background: "#0A6B49", color: "#ffffff", fontWeight: 600 } : { color: "rgba(255,255,255,0.55)" }}>
              {label}
            </a>
          );
        })}
      </div>
    </nav>
    <nav className="hidden md:block fixed left-1/2 z-40"
         style={{
           bottom: 24,
           transform: `translateX(-50%) translateY(${shown ? 0 : 28}px)`,
           opacity: shown ? 1 : 0,
           pointerEvents: shown ? "auto" : "none",
           transition: "opacity .5s cubic-bezier(0.16,1,0.3,1), transform .5s cubic-bezier(0.16,1,0.3,1)",
         }}>
      <div className="flex items-center gap-1 rounded-full px-2 py-2"
           style={{ background: AG_DARK, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 16px 50px -18px rgba(0,0,0,0.9)" }}>
        {items.map(([id, label]) => {
          const on = active === id;
          return (
            <a key={id} href={`#${id}`} onClick={(e) => go(e, id)}
               className="text-[12px] uppercase tracking-[0.14em] rounded-full px-3.5 py-2 transition-all duration-300 whitespace-nowrap"
               style={on ? { background: "#0A6B49", color: "#ffffff", fontWeight: 600 } : { color: "rgba(255,255,255,0.5)" }}>
              {label}
            </a>
          );
        })}
      </div>
    </nav>
    </React.Fragment>
  );
}

/* structured decision block — Problem / Decision / Why not / My influence */
function AGDecision({ n, title, problem, decision, whyNot, influence, panel, caption, tint, dark = false }) {
  const titleColor = dark ? "#fff" : "#0f1a16";
  const bodyColor = dark ? "rgba(255,255,255,.82)" : "rgba(15,26,22,.8)";
  const labelColor = dark ? AG_HL : AG_MID;
  return (
    <div className="mt-24 first:mt-16">
      <AGCol>
        <Reveal>
          <h3 className="font-display font-medium text-[24px] md:text-[30px] leading-[1.15] tracking-tight">
            <span style={{ color: dark ? "rgba(255,255,255,.4)" : "rgba(15,26,22,.32)" }}>{n}.</span> <span style={{ color: titleColor }}>{title}</span>
          </h3>
        </Reveal>
        <div className="mt-5 space-y-4">
          <Reveal delay={70}>
            <div>
              <div className="text-[12px] uppercase tracking-[0.16em]" style={{ color: labelColor }}>Problem</div>
              <p className="mt-1.5 text-[18px] leading-[1.6]" style={{ color: bodyColor }}>{problem}</p>
            </div>
          </Reveal>
          <Reveal delay={110}>
            <div>
              <div className="text-[12px] uppercase tracking-[0.16em]" style={{ color: labelColor }}>Decision</div>
              <p className="mt-1.5 text-[18px] leading-[1.6]" style={{ color: bodyColor }}>{decision}</p>
            </div>
          </Reveal>
        </div>
        {influence && (
          <Reveal delay={180}>
            <p className="mt-4 text-[16px] leading-[1.6] rounded-lg px-4 py-3 inline-block" style={dark ? { background: "rgba(95,230,172,.14)", color: "rgba(255,255,255,.82)" } : { background: "rgba(14,140,99,.1)", color: "rgba(15,26,22,.72)" }}>
              <span className="uppercase tracking-[0.14em] text-[12px]" style={{ color: labelColor }}>My influence · </span>
              {influence}
            </p>
          </Reveal>
        )}
      </AGCol>
      {panel && (
        <Reveal delay={120}>
          <AGPanel caption={caption} tint={tint} className="mt-10" dark={dark}>
            {panel}
          </AGPanel>
        </Reveal>
      )}
    </div>
  );
}

/* a single schematic node in the architecture diagram */
function AGNode({ title, sub, accent = false, light = false, logo = null }) {
  if (light) {
    return (
      <div className="rounded-xl px-5 py-4 text-center min-w-[140px]"
           style={{ background: "#fff", border: `1px solid ${accent ? "rgba(14,140,99,.35)" : "rgba(15,26,22,.12)"}` }}>
        <div className="flex items-center justify-center gap-2">
          {logo && <img src={logo} alt="" onError={(e) => { e.currentTarget.style.display = "none"; }} className="w-[18px] h-[18px] object-contain select-none" draggable="false" />}
          <div className="text-[15px] font-medium" style={{ color: accent ? AG_MID : "#0f1a16" }}>{title}</div>
        </div>
        {sub && <div className="mt-1 text-[12px] tracking-wide" style={{ color: "rgba(15,26,22,.45)" }}>{sub}</div>}
      </div>
    );
  }
  return (
    <div className="rounded-xl px-5 py-4 text-center min-w-[140px]"
         style={{ background: accent ? "rgba(95,230,172,.12)" : "rgba(255,255,255,.05)", border: `1px solid ${accent ? "rgba(95,230,172,.4)" : "rgba(255,255,255,.14)"}` }}>
      <div className="flex items-center justify-center gap-2">
        {logo && <img src={logo} alt="" onError={(e) => { e.currentTarget.style.display = "none"; }} className="w-[18px] h-[18px] object-contain select-none" draggable="false" />}
        <div className="font-mono text-[15px]" style={{ color: accent ? AG_HL : "#fff" }}>{title}</div>
      </div>
      {sub && <div className="mt-1 text-[12px] tracking-wide" style={{ color: "rgba(255,255,255,.45)" }}>{sub}</div>}
    </div>
  );
}

function AGArrow({ vertical = false, light = false }) {
  return (
    <div className="grid place-items-center" style={{ color: light ? "rgba(14,140,99,.55)" : "rgba(95,230,172,.6)" }}>
      {vertical ? (
        <svg width="20" height="28" viewBox="0 0 20 28" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 1v24M3 19l7 7 7-7" strokeLinecap="round" strokeLinejoin="round" /></svg>
      ) : (
        <svg width="40" height="20" viewBox="0 0 40 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M1 10h36M30 4l7 6-7 6" strokeLinecap="round" strokeLinejoin="round" /></svg>
      )}
    </div>
  );
}

/* ---------- the page ---------- */

function AlgoraCase({ navigate }) {
  return (
    <div className="relative" style={{ background: "#FCFCFC", color: "#0f1a16" }}>
      <AGSectionNav />

      {/* 1 — HERO */}
      <header className="relative overflow-hidden" style={{ background: AG_DARK, color: "#fff" }}>
        <div className="mx-auto max-w-[1080px] px-6 pt-36 pb-36">
          <Reveal>
            <div className="text-[14px] uppercase tracking-[0.22em] text-white/45">Algora — AI Visibility SaaS · 2026</div>
          </Reveal>
          <div className="mt-6 flex items-start justify-between gap-10">
            <div>
              <Reveal delay={40}>
                <a href="https://algoraapp.com" target="_blank" rel="noopener noreferrer" aria-label="Visit Algora website" className="md:hidden inline-block mb-5">
                  <img src="assets/algora-mark.svg" alt="Algora" draggable="false" className="block select-none rounded-2xl" style={{ width: 72, height: 72 }} />
                </a>
              </Reveal>
              <Reveal delay={80}>
                <h1 className="font-display font-medium text-[40px] md:text-[58px] leading-[1.06] tracking-[-0.02em] max-w-[18ch]" style={{ color: "#ffffff" }}>
                  From Idea to Live Product: <span style={{ color: AG_HL }}>A Solo Production.</span>
                </h1>
              </Reveal>
              <Reveal delay={130}>
                <span className="mt-7 inline-flex items-center rounded-full px-4 py-2 text-[13px] uppercase tracking-[0.16em]"
                      style={{ background: "rgba(95,230,172,.12)", border: "1px solid rgba(95,230,172,.35)", color: AG_HL }}>
                  Founder, Product Designer &amp; Builder
                </span>
              </Reveal>
            </div>
            <Reveal delay={120}>
              <a href="https://algoraapp.com" target="_blank" rel="noopener noreferrer" aria-label="Visit Algora website" className="hidden md:block shrink-0 transition-transform hover:-translate-y-1">
                <img src="assets/algora-mark.svg" alt="Algora" draggable="false"
                     className="block select-none rounded-2xl"
                     style={{ width: 160, height: 160, boxShadow: "0 30px 70px -30px rgba(0,0,0,.7)" }} />
              </a>
            </Reveal>
          </div>
        </div>
      </header>

      {/* 2 — SUMMARY CARD */}
      <section className="pt-20 pb-24">
        <AGCol>
          <Reveal>
            <div className="rounded-2xl px-7 py-7 md:px-9 md:py-8" style={{ background: AG_CARD }}>
              <div className="text-[14px] uppercase tracking-[0.2em]" style={{ color: AG_MID }}>Summary</div>
              <p className="mt-4 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.85)" }}>
                As the <strong className="font-bold" style={{ color: "#0f1a16" }}>sole founder</strong>, I designed the product end-to-end <strong className="font-bold" style={{ color: "#0f1a16" }}>(UX/UI)</strong> — <strong className="font-bold" style={{ color: "#0f1a16" }}>the full SaaS app and its marketing website</strong> — then built the frontend, backend, and AI infrastructure myself to ship it: a product largely vibe-coded with <strong className="font-bold" style={{ color: "#0f1a16" }}>Claude Design</strong> and <strong className="font-bold" style={{ color: "#0f1a16" }}>Claude Code</strong>. Design decisions drove every technical one that followed.
              </p>
            </div>
          </Reveal>
        </AGCol>
      </section>

      {/* 3 — THE PROBLEM */}
      {/* 3 — THE IDEA */}
      <section id="ag-problem" className="pb-28">
        <AGCol>
          <Reveal><AGPill>The idea</AGPill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: AG_DARK }}>
              A web-first tool, built around one thing competitors treat as an afterthought: what to actually do next.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
              The idea wasn&apos;t to build another AI-visibility dashboard. It was to design a product around three specific bets:
            </p>
          </Reveal>
        </AGCol>

        {/* three product bets */}
        <div className="mx-auto px-6 max-w-[680px] mt-12">
          <div className="grid grid-cols-1 gap-5">
            {[
              ["A frictionless entry point", "anyone could run a real scan from the website, no signup wall before seeing value, because the scan itself had to do the convincing."],
              ["An action-first core", "instead of a passive score, every audit produces a concrete, checklist-style plan: what to do, how much effort it takes, and what changing it is projected to move."],
              ["A clear edge over the category", "most competitors sample signals or run on small prompt quotas at high cost. Algora runs live, dual-language (EN + NL) queries across 4 models every week, then turns the gap between you and your competitors into something publishable, not just visible."],
            ].map(([t, b], i) => (
              <Reveal key={t} delay={100 + i * 60}>
                <div className="rounded-2xl px-7 py-6 flex gap-5" style={{ background: AG_CARD }}>
                  <span className="font-display text-[22px] shrink-0 tabular-nums" style={{ color: AG_MID }}>{`0${i + 1}`}</span>
                  <p className="text-[17px] leading-[1.6]" style={{ color: "rgba(15,26,22,.82)" }}>
                    <strong className="font-semibold" style={{ color: "#0f1a16" }}>{t}</strong> — {b}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* 4 — KEY DECISIONS */}
      <section id="ag-decisions" className="py-28" style={{ background: AG_DARK }}>
        <AGCol>
          <Reveal><AGPill dark>Key decisions</AGPill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: "#fff" }}>
              Two decisions that shaped how the product earns trust — and proves its depth.
            </h2>
          </Reveal>
        </AGCol>

        <AGDecision
          dark
          n="1" title="A free scan that earns a signup, without asking for one."
          problem="Most AI-visibility tools ask for an account before showing any value — a hard wall that kills curiosity-driven traffic before it converts. The goal wasn't to fix a broken flow; it was to design a zero-friction entry point that turns a one-time visitor into a free member, using the result itself as the hook."
          decision="The free scan runs immediately, no signup required to start. The result teases real findings, but seeing the full breakdown — and saving it — requires creating a free account. The account creation step sits at the exact moment curiosity peaks, not before it."
          whyNot="Gating the scan behind signup upfront would have killed top-of-funnel volume entirely — most visitors testing an unfamiliar tool won't commit before seeing any value. Asking for nothing at all, ever, would have meant no member capture and no funnel into paid tiers."
          caption="Instant free scan — the result itself becomes the reason to create an account."
          tint={AG_CARD}
          panel={(
            <div className="p-5 md:p-7">
              <div className="flex flex-col md:flex-row items-center gap-3 md:gap-5">
                <div className="w-full md:flex-1 min-w-0"><AGBrowser dark src={AG_SCAN_SIGNUP_SRC} url="algoraapp.com" label="Sign-up to unlock" aspect="2574 / 1777" /></div>
                <svg className="shrink-0 rotate-90 md:rotate-0" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#0E8C63" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M9 6l6 6-6 6" />
                </svg>
                <div className="w-full md:flex-1 min-w-0"><AGBrowser dark src={AG_SCAN_FORM_SRC} url="algoraapp.com/audit" label="Instant scan form" /></div>
              </div>
            </div>
          )}
        />
        <AGDecision
          dark
          n="2" title="A page with five metrics, ten competitors, and eight actions — without feeling like a spreadsheet."
          problem="Audit Results and Action Plan pages carry a genuinely large amount of data — scores across 4 AI models, 2 languages, 10+ competitors, and a multi-step action plan with checklists. Showing all of it at once would overwhelm; hiding most of it would undercut the product's core value (depth of data)."
          decision="Built a section-based in-page navigation bar (Your Scores / Competitor Results / Action Plan / Queries) paired with expandable cards at every density point — each action collapses to a one-line summary (title, priority tag, effort, ETA) and expands only on demand. Nothing is hidden, but nothing is forced into view either."
          whyNot="A single long scroll would have buried the action plan under raw score tables — the part of the product that actually drives retention. Splitting into separate pages/tabs entirely would have lost the at-a-glance comparison between scores and competitors that makes the data useful in the first place."
          caption="Section nav + expandable cards — full depth on demand, never forced into view. (Click the tabs and rows.)"
          tint={AG_CARD}
          panel={<div className="p-5 md:p-7"><AGBrowser url="algoraapp.com/dashboard/results"><AGResultsDemo /></AGBrowser></div>}
        />
      </section>

      {/* 5 — FINAL DESIGN */}
      <section id="ag-final" className="py-28" style={{ background: "#F4F4F5" }}>
        <AGCol className="text-center">
          <Reveal><AGPill>Final design</AGPill></Reveal>
        </AGCol>
        <div className="mx-auto px-6 max-w-[1080px] mt-12">
          <Reveal delay={90}>
            <AGGallery height={520} shots={[
              { iframe: "assets/algora-home-hero.html", label: "Marketing website — live hero", url: "algoraapp.com" },
              { stickyLeft: { side: "assets/algora-dashboard-side.png", body: "assets/algora-dashboard-body.png", ratio: 423 / 2892 }, label: "Auto-Pilot dashboard", url: "algoraapp.com/dashboard" },
              { stickyLeft: { side: "assets/algora-audit-detail-side.png", body: "assets/algora-audit-detail-body.png", ratio: 279 / 2301 }, label: "Audit detail — full results", url: "algoraapp.com/dashboard/results" },
              { stickyTop: { nav: "assets/algora-pricing-nav.png", body: "assets/algora-pricing-body.png" }, label: "Pricing — plans & audit types", url: "algoraapp.com/pricing" },
              { stickyTop: { nav: "assets/algora-blog-list-nav.png", body: "assets/algora-blog-list-body.png" }, label: "Blog — Algora Insights", url: "algoraapp.com/blog" },
              { stickyTop: { nav: "assets/algora-blog-detail-nav.png", body: "assets/algora-blog-detail-body.png" }, label: "Blog — article detail", url: "algoraapp.com/blog/ai-seo-vs-traditional-seo" },
            ]} />
          </Reveal>
        </div>
        <AGCol className="text-center mt-10">
          <Reveal delay={120}>
            <a href="https://algoraapp.com" target="_blank" rel="noopener noreferrer"
               className="inline-block text-[16px]"
               style={{ color: "#0E8C63", textDecoration: "underline", textUnderlineOffset: "3px", textDecorationColor: "rgba(14,140,99,.4)" }}>
              View website →
            </a>
          </Reveal>
        </AGCol>
      </section>

      {/* 6 — BUILDING IT MYSELF */}
      <section id="ag-build" className="py-28" style={{ background: "#FFFFFF" }}>
        <AGCol>
          <Reveal><AGPill>Building it myself</AGPill></Reveal>
          <Reveal delay={70}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.8)" }}>
              Design decisions that would normally wait for engineering; I implemented directly, pairing <strong className="font-semibold" style={{ color: "#0f1a16" }}>Claude Design</strong> for the UI with <strong className="font-semibold" style={{ color: "#0f1a16" }}>Claude Code</strong> to build the frontend, backend, and AI infrastructure.
            </p>
          </Reveal>
          <Reveal delay={100}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.8)" }}>
              I set up and integrated the whole stack myself — Supabase, Vercel, Trigger.dev / cron scheduling, and the live 4-LLM API layer.
            </p>
          </Reveal>
        </AGCol>

        {/* schematic architecture diagram */}
        <Reveal delay={110}>
          <AGPanel className="mt-10" tint={AG_CARD} pad="p-7 md:p-10" maxW="680px"
                   caption="Schematic — not a screenshot. The stack I designed for and built against.">
            <div className="relative mx-auto hidden md:block" style={{ height: 380, maxWidth: 560 }}>
              {/* green wire layer — center-to-center; white nodes mask the overlaps */}
              <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                {[
                  [17,15,50,15],   // Claude Design → Claude Code
                  [17,15,17,50],   // Claude Design → Next.js
                  [50,15,50,50],   // Claude Code → Supabase
                  [17,50,50,50],   // Next.js → Supabase
                  [50,50,83,50],   // Supabase → Vercel
                  [50,50,33,85],   // Supabase → Trigger.dev
                  [50,50,67,85],   // Supabase → LLM layer
                  [83,50,33,85],   // Vercel → Trigger.dev
                  [83,50,67,85],   // Vercel → LLM layer
                ].map((l, idx) => (
                  <line key={idx} x1={l[0]} y1={l[1]} x2={l[2]} y2={l[3]} stroke="#0E8C63" strokeOpacity="0.5" strokeWidth="1.4" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
                ))}
              </svg>
              {[
                { x: 17, y: 15, props: { title: "Claude Design", sub: "UI / product design", accent: true, logo: AG_LOGO_CLAUDE_DESIGN } },
                { x: 50, y: 15, props: { title: "Claude Code", sub: "Build / integration", accent: true, logo: AG_LOGO_CLAUDE_CODE } },
                { x: 17, y: 50, props: { title: "Next.js", sub: "Frontend", accent: true, logo: AG_LOGO_NEXT } },
                { x: 50, y: 50, props: { title: "Supabase", sub: "Auth + DB", logo: AG_LOGO_SUPABASE } },
                { x: 83, y: 50, props: { title: "Vercel", sub: "Deploy", logo: AG_LOGO_VERCEL } },
                { x: 33, y: 85, props: { title: "Trigger.dev / Cron", sub: "Weekly scheduling", logo: AG_LOGO_TRIGGER } },
                { x: 67, y: 85, props: { title: "4 LLM API Layer", sub: "Live weekly queries", accent: true, logo: AG_LOGO_LLM } },
              ].map((nd, idx) => (
                <div key={idx} className="absolute" style={{ left: `${nd.x}%`, top: `${nd.y}%`, transform: "translate(-50%, -50%)", whiteSpace: "nowrap", zIndex: 1 }}>
                  <AGNode light {...nd.props} />
                </div>
              ))}
            </div>
            {/* mobile — same nodes stacked, equal width, centered */}
            <div className="md:hidden flex flex-col items-center gap-2">
              {[
                { title: "Claude Design", sub: "UI / product design", accent: true, logo: AG_LOGO_CLAUDE_DESIGN },
                { title: "Claude Code", sub: "Build / integration", accent: true, logo: AG_LOGO_CLAUDE_CODE },
                { title: "Next.js", sub: "Frontend", accent: true, logo: AG_LOGO_NEXT },
                { title: "Supabase", sub: "Auth + DB", logo: AG_LOGO_SUPABASE },
                { title: "Vercel", sub: "Deploy", logo: AG_LOGO_VERCEL },
                { title: "Trigger.dev / Cron", sub: "Weekly scheduling", logo: AG_LOGO_TRIGGER },
                { title: "4 LLM API Layer", sub: "Live weekly queries", accent: true, logo: AG_LOGO_LLM },
              ].map((nd, idx) => (
                <React.Fragment key={idx}>
                  {idx > 0 && <div style={{ width: 2, height: 16, background: "rgba(14,140,99,.5)" }} />}
                  <div className="w-[230px]"><AGNode light {...nd} /></div>
                </React.Fragment>
              ))}
            </div>
          </AGPanel>
        </Reveal>
      </section>

      {/* 8 — IMPACT (dummy numbers) */}
      <section id="ag-impact" className="py-28" style={{ background: AG_DARK, color: "#fff" }}>
        <AGCol>
          <Reveal><span className="inline-flex items-center rounded-full border border-white/25 px-3.5 py-1.5 text-[14px] uppercase tracking-[0.18em] text-white/60">Impact</span></Reveal>
          <Reveal>
            <p className="mt-8 text-[18px] md:text-[20px] leading-[1.7] text-white/75 max-w-[64ch]">
              At this point the design&apos;s success can&apos;t be measured in hard metrics yet — but the
              traction the product earned right after launch is worth noting.
            </p>
          </Reveal>
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-10">
            {[
              ["2 brands", "Early acquisition", "While still in demo (June 2026), two brands liked the product and signed preliminary agreements."],
              ["3% → 7%", "Algora’s own visibility", "As the first trial, we ran an audit and action plan on Algora itself — Overall AI Visibility rose from 3% to 7% in the first 3 weeks."],
            ].map(([num, label, micro]) => (
              <Reveal key={label}>
                <div>
                  <div className="font-display font-normal text-[36px] md:text-[44px] leading-none tracking-tight" style={{ color: AG_HL }}>{num}</div>
                  <div className="mt-3 text-[16px] text-white/85">{label}</div>
                  <div className="mt-1.5 text-[14px] leading-[1.6] text-white/45">{micro}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </AGCol>
      </section>

      {/* 9 — BEHIND THE WORK */}
      <section className="py-24">
        <AGCol>
          <Reveal>
            <div className="rounded-2xl px-7 py-8 md:px-9" style={{ background: AG_CARD }}>
              <div className="text-[14px] uppercase tracking-[0.2em]" style={{ color: "rgba(15,26,22,.5)" }}>Behind the work</div>
              <div className="mt-6 grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-6 text-[16px]">
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: AG_MID }}>Role</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>Founder · Product Designer · Full-stack Builder</div>
                </div>
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: AG_MID }}>Team</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>Solo</div>
                </div>
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: AG_MID }}>Date</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>10 weeks, excluding testing</div>
                </div>
              </div>
              <div className="mt-7 pt-6" style={{ borderTop: "1px solid rgba(0,76,51,.14)" }}>
                <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: AG_MID }}>What I learned</div>
                <p className="mt-2 text-[16px] leading-[1.7]" style={{ color: "rgba(15,26,22,.75)" }}>
                  This was my first time using <strong className="font-semibold" style={{ color: "#0f1a16" }}>Claude Design</strong> and <strong className="font-semibold" style={{ color: "#0f1a16" }}>Claude Code</strong> at a professional level, and the results genuinely surprised me. It was also my first time hands-on with Vercel, Supabase, and live API integrations: exhausting at points, but honestly fun, and being able to own that part of the build myself made me feel genuinely valuable. The counterpoint is just as clear: this absolutely needs a real engineer to review the code and audit for security holes before it can be trusted — something locked in for Phase 2.
                </p>
              </div>
            </div>
          </Reveal>
        </AGCol>
      </section>

      {/* 10 — FOOTER */}
      <section className="py-12" style={{ background: AG_DARK, color: "#fff" }}>
        <Reveal>
          <div className="w-full px-6 md:px-10">
            <div className="grid grid-cols-2 gap-8 md:flex md:items-center md:justify-between md:gap-6">
              <button onClick={() => { navigate("case/morpara"); window.scrollTo({ top: 0 }); }} className="text-left shrink-0 order-2 md:order-none">
                <div className="text-[12px] uppercase tracking-[0.18em] text-white/45">Previous project</div>
                <div className="mt-1.5 font-display text-[20px] md:text-[22px] text-white">Morpara</div>
              </button>
              <div className="flex flex-col items-center text-center gap-2 col-span-2 order-1 md:order-none flex-1">
                <h2 className="font-display font-normal text-[28px] md:text-[48px] leading-[1] tracking-tight">
                  Let's work <span style={{ color: AG_HL }}>together</span><span style={{ color: "rgba(255,255,255,.25)" }}>.</span>
                </h2>
                <a href="mailto:tunaaldemir@gmail.com" className="mt-3 inline-block font-display text-[15px] md:text-[18px] text-white/80 hover:text-white link-underline">
                  tunaaldemir@gmail.com
                </a>
                <a href={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ? "tel:+31634483433" : "facetime:+31634483433"}
                   className="inline-block font-display text-[13px] md:text-[15px] text-white/45 hover:text-white/75">
                  +31 06 34 48 34 33
                </a>
                <div className="mt-3 flex items-center gap-3">
                  <a href="https://wa.me/905353130311" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="transition-transform hover:-translate-y-0.5">
                    <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="17" cy="17" r="17" fill="#fff"/>
                      <g transform="translate(7 7) scale(0.833)">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.142 1.595 5.945L0 24l6.335-1.652a12.062 12.062 0 005.71 1.447h.005c6.585 0 11.946-5.335 11.949-11.893a11.821 11.821 0 00-3.484-8.45" fill={AG_DARK}/>
                      </g>
                    </svg>
                  </a>
                  <a href="https://www.linkedin.com/in/tuna-aldemir/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="transition-transform hover:-translate-y-0.5">
                    <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="17" cy="17" r="17" fill="#fff"/>
                      <path d="M12.6 13.2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-1.27 1.15h2.53v8.15h-2.53v-8.15Zm4.12 0h2.42v1.11h.04c.34-.62 1.16-1.28 2.39-1.28 2.56 0 3.03 1.64 3.03 3.78v4.54h-2.53v-4.03c0-.96-.02-2.2-1.36-2.2-1.36 0-1.57 1.04-1.57 2.13v4.1h-2.53v-8.15Z" fill={AG_DARK}/>
                    </svg>
                  </a>
                  <a href="assets/Tuna_Aldemir_CV.pdf" target="_blank" rel="noopener noreferrer" aria-label="View CV" className="transition-transform hover:-translate-y-0.5">
                    <span className="grid place-items-center size-[34px] rounded-full" style={{ background: "#fff", color: AG_DARK }}>
                      <span className="font-display font-semibold text-[13px] tracking-tight">CV</span>
                    </span>
                  </a>
                </div>
              </div>
              <button onClick={() => { navigate("case/stablex"); window.scrollTo({ top: 0 }); }} className="text-right shrink-0 order-3 md:order-none justify-self-end">
                <div className="text-[12px] uppercase tracking-[0.18em] text-white/45">Next project</div>
                <div className="mt-1.5 font-display text-[20px] md:text-[22px] text-white">Stablex</div>
              </button>
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

window.AlgoraCase = AlgoraCase;