/* global React, AgentOpsDiagram */
const { useState: useState_h, useEffect: useEffect_h } = React;

/* ============================================================
   HOME PAGE
   ============================================================ */

function Hero({ variant }) {
  if (variant === "manifesto") return <HeroManifesto />;
  if (variant === "split") return <HeroSplit />;
  return <HeroDiagram />;
}

function HeroDiagram() {
  return (
    <section className="hero" data-screen-label="hero">
      <div className="container">
        <div className="fade-up">
          <div className="hero-eyebrow">AGENT OPS BLUEPRINT · A KODIA NEXT SERVICE</div>
        </div>
        <h1 className="hero-headline fade-up delay-1">
          New workflows. New agents.<br />
          <span className="accent">New operating models.</span>
        </h1>
        <p className="hero-sub fade-up delay-2">
          kodia designs the operating model where humans, agents, and systems
          actually work together — then we ship the first agents into production.
          No more random tools and chaos.
        </p>
        <div className="hero-cta-row fade-up delay-3">
          <a href="contact.html" className="btn btn-primary btn-lg">
            Book a discovery call
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
          <a href="approach.html" className="btn btn-secondary btn-lg">See how it works</a>
        </div>
        <div className="hero-meta fade-up delay-4">
          <span className="hero-meta-item"><span className="dot pulse" style={{ color: "var(--kodia-teal)" }} /> <strong>Now booking</strong> Q3 2026</span>
          <span className="hero-meta-item">8-week engagement</span>
          <span className="hero-meta-item">Nearshore LATAM team</span>
        </div>

        <div style={{ marginTop: 72 }} className="fade-up delay-5">
          <AgentOpsDiagram />
        </div>
      </div>
    </section>);

}

function HeroManifesto() {
  return (
    <section className="hero hero-manifesto" data-screen-label="hero">
      <div className="container-narrow" style={{ paddingBlock: "32px 32px" }}>
        <div className="fade-up">
          <div className="hero-eyebrow">AgentOps Blueprint · A kodia next service</div>
        </div>
        <h1 className="hero-headline fade-up delay-1" style={{ marginTop: 28, marginBottom: 32 }}>
          Most companies are buying AI tools.<br />
          <span className="accent">The leaders are redesigning how work flows.</span>
        </h1>
        <p className="hero-sub fade-up delay-2">
          We design the operating model — humans, agents, and software —
          then ship the first agents that actually run your business.
          90 days. One workflow at a time.
        </p>
        <div className="hero-cta-row fade-up delay-3">
          <a href="contact.html" className="btn btn-primary btn-lg">Book a discovery call</a>
          <a href="approach.html" className="btn btn-secondary btn-lg">Read the approach</a>
        </div>
      </div>
      <div className="container" style={{ marginTop: 56 }}>
        <div className="fade-up delay-4">
          <AgentOpsDiagram />
        </div>
      </div>
    </section>);

}

function HeroSplit() {
  return (
    <section className="hero" data-screen-label="hero">
      <div className="container">
        <div className="hero-split-grid">
          <div>
            <div className="fade-up">
              <div className="hero-eyebrow">AgentOps Blueprint</div>
            </div>
            <h1 className="hero-headline fade-up delay-1" style={{ marginBottom: 24 }}>
              Design how your business runs with <em>humans, agents, and systems</em> — <span className="accent">together.</span>
            </h1>
            <p className="hero-sub fade-up delay-2">
              We don't sell AI tools. We design the operating model around them,
              then ship the first agents into production. 8 weeks. One workflow at a time.
            </p>
            <div className="hero-cta-row fade-up delay-3">
              <a href="contact.html" className="btn btn-primary btn-lg">Book a discovery call</a>
              <a href="approach.html" className="btn-arrow">See how it works →</a>
            </div>
          </div>
          <div className="fade-up delay-2">
            <AgentOpsDiagram />
          </div>
        </div>
      </div>
    </section>);

}

function ProblemSection() {
  const items = [
  {
    num: "01",
    quote: "We bought five AI subscriptions last year. I don't think anyone uses three of them.",
    attrib: "COO, 80-person services firm"
  },
  {
    num: "02",
    quote: "Every team is running their own ChatGPT experiment. Nobody can tell me what's actually in production.",
    attrib: "Founder, fintech SMB"
  },
  {
    num: "03",
    quote: "The AI does the easy 70%. The last 30% — the integrations, the approvals, the edge cases — that's where we get stuck.",
    attrib: "Head of Ops, logistics company"
  }];

  return (
    <section className="section" data-screen-label="problem" style={{ background: "var(--blue-tint)" }}>
      <div className="container">
        <div className="eyebrow">The problem</div>
        <h2 style={{ marginTop: 16, maxWidth: "22ch" }}>
          AI without an operating model is just <em>expensive chaos</em>.
        </h2>
        <p className="lede" style={{ marginTop: 24 }}>
          The bottleneck isn't the model. It's the workflow. Owners and operators
          are drowning in tools without a clear picture of who does what — humans,
          agents, or systems — and how the work actually moves between them.
        </p>
        <div className="problem-grid">
          {items.map((item, i) =>
          <div key={i} className="problem-card">
              <div className="problem-num">{item.num}</div>
              <div className="problem-quote">"{item.quote}"</div>
              <div className="problem-attrib">— {item.attrib}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function OfferingSection() {
  const rows = [
  { n: "01", title: "Workflow Map", desc: "We map your top 3 workflows end-to-end: handoffs, tools, decisions, edge cases. Where humans add judgment, where they're stuck on rework.", tag: "Week 1–2" },
  { n: "02", title: "Agent Catalog", desc: "Which jobs are agent-ready today, which need humans in the loop, which need redesign first. Scored by ROI and risk.", tag: "Week 2" },
  { n: "03", title: "Human + Agent Org Chart", desc: "A revised operating model. Who owns what. Where agents report into humans. How escalations and audits work.", tag: "Week 3" },
  { n: "04", title: "First Agent in Production", desc: "We build, ship, and operate the highest-ROI agent from the catalog. Real integrations. Real users. Real reliability.", tag: "Week 3–7" },
  { n: "05", title: "Handoff & Operate", desc: "Your team owns it from here — or we run it as a managed service. Either way, you´re ready to scale.", tag: "Week 8+" }];

  return (
    <section className="section" data-screen-label="offering">
      <div className="container">
        <div className="offering-grid">
          <div>
            <div className="eyebrow">What's inside the blueprint</div>
            <h2 style={{ marginTop: 16 }}>
              Four artifacts.<br />Eight weeks.<br /><em>One agent shipped.</em>
            </h2>
            <p className="lede" style={{ marginTop: 28 }}>
              The AgentOps Blueprint isn't a slide deck or an audit report. It's
              the operating model your team will actually use — plus a working
              agent in production by the time we hand it over.
            </p>
            <div style={{ marginTop: 36 }}>
              <a href="approach.html" className="btn-arrow">See the full process →</a>
            </div>
          </div>
          <div className="offering-list">
            {rows.map((r) =>
            <div key={r.n} className="offering-row">
                <div className="offering-num">{r.n}</div>
                <div>
                  <div className="offering-title">{r.title}</div>
                  <div className="offering-desc">{r.desc}</div>
                </div>
                <div className="offering-tag">{r.tag}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function DeliverablesSection() {
  const items = [
  {
    icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="3" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="1.5" /><path d="M7 8h8M7 11h8M7 14h5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
    name: "Workflow map",
    desc: "Every handoff, decision, and edge case in your top workflows — drawn so anyone on your team can read it."
  },
  {
    icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 3l2.5 5L19 9l-4 4 1 5.5L11 16l-5 2.5L7 13 3 9l5.5-1L11 3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></svg>,
    name: "Agent catalog",
    desc: "A scored list of every job an agent could do at your company — ranked by ROI, risk, and readiness."
  },
  {
    icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="6" r="3" stroke="currentColor" strokeWidth="1.5" /><circle cx="5" cy="16" r="3" stroke="currentColor" strokeWidth="1.5" /><circle cx="17" cy="16" r="3" stroke="currentColor" strokeWidth="1.5" /><path d="M11 9v3M9 14l-2.5-1.5M13 14l2.5-1.5" stroke="currentColor" strokeWidth="1.5" /></svg>,
    name: "Human + agent org chart",
    desc: "Your new operating model. Who owns what. How escalations work. Where the humans are irreplaceable."
  },
  {
    icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 18l3-3 3 3 4-4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /><circle cx="7" cy="6" r="2" stroke="currentColor" strokeWidth="1.5" /></svg>,
    name: "First agent, in production",
    desc: "Not a prototype. A real agent doing real work with real integrations — by week 7 at the latest."
  }];

  return (
    <section className="section" data-screen-label="deliverables" style={{ background: "var(--sky-tint)" }}>
      <div className="container">
        <div className="eyebrow">What you walk away with</div>
        <h2 style={{ marginTop: 16, maxWidth: "24ch" }}>
          Four artifacts your team can actually <em>use</em>.
        </h2>
        <div className="deliv-grid">
          {items.map((it, i) =>
          <div key={i} className="deliv-card">
              <div className="deliv-icon">{it.icon}</div>
              <div>
                <div className="deliv-name">{it.name}</div>
                <div className="deliv-desc">{it.desc}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ProofSection() {
  return (
    <section className="section" data-screen-label="proof">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="proof-grid">
          <div>
            <div className="eyebrow">Receipts · kodia solutions</div>
            <div className="pullquote" style={{ marginTop: 24 }}>
              "What started as a simple automation tool grew into a powerful business platform — built to evolve."
            </div>
            <div className="pullquote-attrib">Clearpay × kodia · Merchant services</div>
            <div style={{ marginTop: 32 }}>
              <a href="case-clearpay.html" className="btn-arrow">Read the Clearpay case study →</a>
            </div>
          </div>
          <div className="metric-grid" style={{ gridTemplateColumns: "1fr 1fr", margin: 0 }}>
            <div className="metric">
              <div className="metric-num">~0</div>
              <div className="metric-label">Manual hours/month on commission reconciliation</div>
            </div>
            <div className="metric">
              <div className="metric-num">100%</div>
              <div className="metric-label">Sales rep visibility into earnings via self-service</div>
            </div>
            <div className="metric">
              <div className="metric-num">3</div>
              <div className="metric-label">Live integrations: payments, accounting, reporting</div>
            </div>
            <div className="metric">
              <div className="metric-num">5+</div>
              <div className="metric-label">Years of compounding partnership (and counting)</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .proof-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>);

}

function CTASection() {
  return (
    <section className="section-tight" data-screen-label="cta">
      <div className="container">
        <div className="bigcta">
          <div className="bigcta-eyebrow">Ready when you are</div>
          <h2>What would your business look like if it <em>ran itself</em> — properly?</h2>
          <p>
            A 30-minute discovery call. We map one of your workflows together, live.
            You leave with a one-page sketch and a sense of what's actually possible.
            No deck, no pitch.
          </p>
          <a href="contact.html" className="btn btn-primary btn-lg">
            Book a discovery call
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>
    </section>);

}

/* Hero variant — listens to tweaks event */
function HomeApp() {
  const [variant, setVariant] = useState_h(window.PAGE_TWEAK_DEFAULTS.heroVariant || "diagram");
  useEffect_h(() => {
    const onTweak = (e) => setVariant(e.detail.heroVariant || "diagram");
    window.addEventListener("kodia:tweaks", onTweak);
    return () => window.removeEventListener("kodia:tweaks", onTweak);
  }, []);
  return (
    <window.PageShell active="home" exposeHeroVariant={true}>
      <Hero variant={variant} />
      <ProblemSection />
      <OfferingSection />
      <DeliverablesSection />
      <ProofSection />
      <CTASection />
    </window.PageShell>);

}

window.HomeApp = HomeApp;