/* Quantesic case study - full deep-dive: problem, build, stack, outcomes */

function Quantesic() {
  return (
    <section id="quantesic">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <span className="mono">02 / Selected work</span>
            <h2>Quantesic, the synthesis layer for <em>Customer Success</em>.</h2>
          </div>
        </Reveal>

        <Reveal delay={60}>
          <div className="case-head">
            <h3 className="case-title">An entire enterprise SaaS, shipped solo in <em>13 months</em>.</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 4, textAlign: "right" }}>
              <span className="mono">Founder / Architect / Sole engineer</span>
              <span className="mono" style={{ opacity: 0.7 }}>2026 - present</span>
            </div>
          </div>
          <p className="case-summary">
            Marketing site, customer web app, super-user operator console, thirteen bidirectional integrations,
            RAG pipeline on Vertex AI, multi-tenant data model with backend-enforced RBAC, DLP redaction before
            every prompt, and SOC 2 controls in collection. Built from a blank Firebase project to a working
            product in customers' hands.
          </p>
        </Reveal>

        <Reveal delay={80}>
          <CaseMetrics />
        </Reveal>

        <Reveal delay={100}>
          <h4 className="case-subhead" id="quantesic-demo">Try it: interactive product demo</h4>
          <p className="case-summary" style={{ marginTop: 4 }}>
            This is the Omnichannel Inbox, the surface where a TAM lives every morning. Pick a ticket, click
            <strong style={{ color: "var(--fg)" }}> Run AI Triage</strong>, and watch Quantesic synthesize a
            root-cause hypothesis, execution plan, and commercial risk flag from the inbound payload.
          </p>
        </Reveal>

        <Reveal delay={120}><Demo /></Reveal>

        {/* PROBLEM */}
        <CaseSub
          number="01"
          eyebrow="The problem"
          title="Your TAMs already have the data. They don't have synthesis."
          body={
            <React.Fragment>
              <p className="lead-line">
                Every Tuesday, the same hour: open Zendesk, filter by account, skim 23 tickets, switch to
                Salesforce, check the renewal, hunt Slack Connect, hope nothing important happened on Friday.
              </p>
              <p>
                Gainsight aggregates health metrics. Zendesk holds the tickets. Notion stores the QBR template.
                Nothing reads the actual content of conversations to tell the TAM <em>what to do</em>. The
                synthesis gap is what eats their week.
              </p>
              <p>
                Quantesic sits on top of the existing stack (additive, not rip-and-replace) and produces the
                pre-read that used to take an hour: rendered in seconds, traceable to evidence, editable by the
                operator, trainable on her corrections.
              </p>
            </React.Fragment>
          }
        />

        {/* BUILD */}
        <CaseSub
          number="02"
          eyebrow="The build"
          title="A four-surface platform, engineered as one cohesive product."
          body={
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <p>
                Four discrete surfaces, one codebase, one auth model, one synthesis pipeline. I designed the
                tenant model and security posture before writing the first feature so isolation, RBAC, and DLP
                weren't bolted on later.
              </p>
              <ul className="role-bullets">
                <li><b>Marketing site:</b> public-facing, SEO-optimized, conversion-tuned.</li>
                <li><b>Customer web app:</b> Omnichannel Inbox, account intelligence dashboards, auto-generated QBRs, knowledge base.</li>
                <li><b>Super-user operator console:</b> separate namespace, tenant impersonation, audit logs, DLP rule management.</li>
                <li><b>Shared backend functions:</b> REST API, webhook framework, RAG pipeline, integration sync workers.</li>
              </ul>
            </div>
          }
          visual={
            <ProductShot
              src="assets/quantesic-inbox.png?v=product"
              alt="Quantesic Omnichannel Inbox - ticket detail view with AI Copilot triage panel"
              label="OMNICHANNEL INBOX"
              sub="quantesic.com/inbox"
            />
          }
        />

        {/* STACK */}
        <CaseSub
          number="03"
          eyebrow="The stack"
          title="Boring where it pays. Sharp where it matters."
          body={
            <p>
              I picked tools I trusted to scale past me. The frontend is React on Vite with Tailwind for velocity.
              The backend is Node on Firebase Functions for instant deploys and managed infra. The AI is Gemini
              2.5 Flash with retrieval over tenant-isolated embeddings. The data model is Cloud Firestore with
              real-time listeners and path-based multi-tenancy.
            </p>
          }
          extra={<StackGrid />}
        />

        {/* OUTCOMES */}
        <CaseSub
          number="04"
          eyebrow="What it does for the operator"
          title="The TAM moments: three places Quantesic earns its keep."
          body={
            <div className="moments">
              <div className="moment">
                <div className="moment-icon">Clock</div>
                <h5>The P1 moment</h5>
                <p>Datadog alert lands. Before her phone rings, Quantesic has read the payload, retrieved similar resolved tickets, generated a root-cause hypothesis, drafted a client acknowledgment, and flagged commercial risk. Four seconds.</p>
              </div>
              <div className="moment">
                <div className="moment-icon">Chart</div>
                <h5>The QBR moment</h5>
                <p>QBR week used to take a quarter. Now every customer page renders a complete 17-section QBR dashboard, real-time, every time. The TAM walks in having seen the synthesis, not built it the night before.</p>
              </div>
              <div className="moment">
                <div className="moment-icon">Renewal</div>
                <h5>The renewal moment</h5>
                <p>Phrase patterns in tickets ("alternatives," "frustrated," "leadership"), declining cadence, P1 clusters. Quantesic flags renewal risk weeks before the call. Not a generic health score. A specific, traceable risk with evidence attached.</p>
              </div>
            </div>
          }
        />

        <Reveal>
          <div className="case-cta">
            <a href="https://quantesic.com" className="btn btn-ghost" target="_blank" rel="noopener">
              quantesic.com <Icons.arrowUR />
            </a>
            <a href="#contact" className="btn">
              Talk about Quantesic <Icons.arrow className="arrow" />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CaseMetrics() {
  return (
    <div className="metrics">
      <div className="metric">
        <div className="metric-value">
          <AnimatedCounter to={101839} />
        </div>
        <div className="metric-label">Source lines of code, solo</div>
      </div>
      <div className="metric">
        <div className="metric-value">
          <AnimatedCounter to={13} />
        </div>
        <div className="metric-label">Bidirectional integrations</div>
      </div>
      <div className="metric">
        <div className="metric-value">
          <AnimatedCounter to={4} />
          <span style={{ color: "var(--fg-3)", fontSize: "0.55em", fontStyle: "normal", letterSpacing: 0, marginLeft: 4 }}>s</span>
        </div>
        <div className="metric-label">AI triage, payload to plan</div>
      </div>
      <div className="metric">
        <div className="metric-value">
          <AnimatedCounter to={13} />
          <span style={{ color: "var(--fg-3)", fontSize: "0.55em", fontStyle: "normal", letterSpacing: 0, marginLeft: 4 }}>mo</span>
        </div>
        <div className="metric-label">Blank repo to working product</div>
      </div>
    </div>
  );
}

function CaseSub({ number, eyebrow, title, body, visual, extra }) {
  return (
    <Reveal>
      <div className="case-sub">
        <div className="case-sub-head">
          <span className="case-sub-number">{number}</span>
          <div>
            <span className="mono" style={{ color: "var(--fg-3)" }}>{eyebrow}</span>
            <h4 className="case-sub-title">{title}</h4>
          </div>
        </div>
        <div className={`case-sub-body ${visual ? "with-visual" : ""}`}>
          <div className="case-sub-text">{body}</div>
          {visual && <div className="case-sub-visual">{visual}</div>}
        </div>
        {extra && <div className="case-sub-extra">{extra}</div>}
      </div>
    </Reveal>
  );
}

function StackGrid() {
  const groups = [
    { title: "Frontend", items: ["React 18", "TypeScript", "Vite", "Tailwind CSS v4"] },
    { title: "Backend", items: ["Node.js", "Express", "Firebase Functions", "Firestore"] },
    { title: "AI infra", items: ["Gemini 2.5 Flash", "Vertex AI embeddings", "RAG pipeline", "Regex DLP"] },
    { title: "Security", items: ["SAML 2.0 / OIDC", "Backend RBAC", "CMEK / TLS 1.3", "SOC 2 Type 1 (in collection)"] },
    { title: "Integrations", items: ["Salesforce", "Zendesk", "Jira", "ServiceNow", "Gainsight"] },
    { title: "Cloud", items: ["Google Cloud", "Cloud Run", "Cloud Firestore", "Cloud Storage"] },
  ];
  return (
    <div className="stack">
      {groups.map((g) => (
        <div className="stack-card" key={g.title}>
          <h5>{g.title}</h5>
          <div className="items">
            {g.items.map((it) => (
              <div className="item" key={it}>{it}</div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Quantesic });

function ProductShot({ src, alt, label, sub }) {
  return (
    <figure className="product-shot">
      <div className="product-shot-frame">
        <img src={src} alt={alt} loading="lazy" decoding="async" />
      </div>
      {(label || sub) && (
        <figcaption className="product-shot-caption">
          {label && <span className="mono-tag solid">{label}</span>}
          {sub && <span className="mono">{sub}</span>}
        </figcaption>
      )}
    </figure>
  );
}