// Product detail page sections.
const { useState: useStateP, useEffect: useEffectP } = React;

const ProductHero = () => (
  <div className="hero" style={{ paddingBottom: 40 }}>
    <div className="bg-grid-dec"/>
    <div className="container" style={{ position: 'relative' }}>
      <div className="eyebrow">Product</div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 72, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 500, margin: '18px 0 0', maxWidth: 980 }}>
        A control plane for every<br/>request, every model, every<br/><em style={{ fontStyle: 'normal', color: 'var(--graphite)' }}>dollar.</em>
      </h1>
      <p className="sub" style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 28, maxWidth: 640 }}>
        Bloom is a lightweight gateway between your application and every LLM provider. Four pillars that compound in value as AI usage scales.
      </p>
      <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
        <a href="pilot.html" className="btn btn-primary btn-lg">Apply to pilot →</a>
        <a href="#visibility" className="btn btn-secondary btn-lg">Jump to visibility</a>
      </div>
      <div style={{ display: 'flex', gap: 28, marginTop: 56, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--fg-3)' }}>
        <a href="#visibility" style={{ color: 'inherit', textDecoration: 'none' }}>01 · Visibility →</a>
        <span style={{ color: 'var(--rule-2)' }}>·</span>
        <a href="#routing" style={{ color: 'inherit', textDecoration: 'none' }}>02 · Routing →</a>
        <span style={{ color: 'var(--rule-2)' }}>·</span>
        <a href="#guardrails" style={{ color: 'inherit', textDecoration: 'none' }}>03 · Guardrails →</a>
        <span style={{ color: 'var(--rule-2)' }}>·</span>
        <a href="#evals" style={{ color: 'inherit', textDecoration: 'none' }}>04 · Evals →</a>
      </div>
    </div>
  </div>
);

const VisibilityRow = () => (
  <div className="container" id="visibility">
    <div className="feature-row" style={{ borderTop: 0 }}>
      <div className="copy">
        <div className="eyebrow">01 · Visibility · observe</div>
        <h2>Per-customer gross margin intelligence.</h2>
        <p>Most tools show cost per API call. Bloom shows cost per customer, attributed in real time across every feature, session, and team. You cannot manage what you cannot see — Bloom connects AI spend directly to your P&amp;L.</p>
        <ul className="bullets">
          <li>Per-customer LLM cost attribution via <code>x-customer-id</code></li>
          <li>Per-session and per-agent cost rollups</li>
          <li>Gross margin dashboard: revenue vs. LLM cost by cohort</li>
          <li>Token breakdown by model, feature, and team</li>
          <li>Spend spike and margin degradation alerts</li>
        </ul>
      </div>
      <div><DashboardViz /></div>
    </div>
  </div>
);

const RoutingRow = () => (
  <div className="container" id="routing">
    <div className="feature-row flip">
      <div className="copy">
        <div className="eyebrow">02 · Routing · route</div>
        <h2>Optimal model. Optimal provider.<br/>Every request.</h2>
        <p>Bloom dynamically routes each request balancing cost, quality, and latency. 20–60% reduction in inference costs. Near-zero added latency. No ongoing engineering overhead.</p>
        <ul className="bullets">
          <li>Rules-based routing by cost tier, latency SLA, or task type</li>
          <li>Semantic caching: reuse responses for equivalent prompts</li>
          <li>Semantic matching: detect near-duplicates, serve cached</li>
          <li>Prompt optimization: trim redundant tokens before dispatch</li>
          <li>Failover and load-balance across OpenAI, Anthropic, Gemini, +1,000 OSS</li>
        </ul>
      </div>
      <div className="viz-card">
        <div className="vc-head"><span className="title">LIVE ROUTING · last 60s</span><span className="live">routing</span></div>
        <RouteDiagram />
      </div>
    </div>
  </div>
);

const GuardrailsRow = () => {
  const policies = [
    { k: 'Token budget · acme · weekly',  v: '$840 / $1,000', s: 'ok' },
    { k: 'PII redaction · all prompts',   v: '↓ 7 fields',     s: 'ok' },
    { k: 'Toxicity filter · output',      v: 'on · 0 blocked', s: 'ok' },
    { k: 'Topic blocklist · finance-bot', v: '12 terms',       s: 'ok' },
    { k: 'Quota · stark · monthly',       v: '92% of cap',     s: 'warn' },
    { k: 'Audit log · all requests',      v: '180 days',       s: 'ok' },
  ];
  return (
    <div className="container" id="guardrails">
      <div className="feature-row">
        <div className="copy">
          <div className="eyebrow">03 · Guardrails · enforce</div>
          <h2>Policy at the inference layer.<br/>Not the app layer.</h2>
          <p>Bloom enforces input/output policies at the gateway, before prompts reach models and before responses reach users. App-layer guardrails are inconsistent. At the inference layer, they are universal — across every model and every feature.</p>
          <ul className="bullets">
            <li>Token budget and quota enforcement, per team, feature, customer</li>
            <li>PII detection and redaction in prompts (pre-send)</li>
            <li>Toxicity and content policy filters on responses (post-receive)</li>
            <li>Topic blocklists and allowlists per feature or segment</li>
            <li>Audit logging for compliance and incident review</li>
          </ul>
        </div>
        <div className="viz-card">
          <div className="vc-head"><span className="title">POLICY STATE · acme · 24h</span><span className="live">enforcing</span></div>
          {policies.map((p, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 4px', borderTop: i ? '1px solid var(--border-1)' : 0, fontSize: 13 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: p.s === 'ok' ? 'var(--ok)' : 'var(--warn)' }} />
                {p.k}
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>{p.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const EvalsRow = () => {
  const models = [
    { m: 'gpt-4o',          s: 0.94, d:  0 },
    { m: 'claude-sonnet-4', s: 0.96, d:  2 },
    { m: 'llama-3-70b',     s: 0.88, d: -3 },
    { m: 'gemini-1.5-pro',  s: 0.91, d:  1 },
    { m: 'mixtral-8x22',    s: 0.83, d: -1 },
  ];
  return (
    <div className="container" id="evals">
      <div className="feature-row flip">
        <div className="copy">
          <div className="eyebrow">04 · Evals · score</div>
          <h2>Quality intelligence<br/>that feeds routing.</h2>
          <p>Bloom continuously scores model output quality and feeds that signal back into routing — a self-improving inference layer. The data flywheel: more traffic → better evals → smarter routing → lower cost and higher quality.</p>
          <ul className="bullets">
            <li>Automated scoring: relevance, coherence, instruction-following</li>
            <li>A/B model evaluation across providers on live traffic</li>
            <li>Regression detection: alert when output quality degrades</li>
            <li>Routing feedback loop: scores inform future decisions</li>
            <li>Eval history dashboard: trends by model, feature, customer</li>
          </ul>
        </div>
        <div className="viz-card">
          <div className="vc-head"><span className="title">MODEL QUALITY · 7 days · support-bot</span><span className="live">scoring</span></div>
          {models.map((m, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 60px 60px', gap: 14, alignItems: 'center', padding: '12px 4px', borderTop: i ? '1px solid var(--border-1)' : 0, fontSize: 13 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{m.m}</span>
              <span style={{ height: 8, background: 'var(--paper-3)', borderRadius: 2, position: 'relative', overflow: 'hidden' }}>
                <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: (m.s * 100) + '%', background: m.s > 0.92 ? 'var(--ok)' : m.s > 0.89 ? 'var(--signal)' : 'var(--warn)' }}/>
              </span>
              <span className="tabular" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textAlign: 'right' }}>{m.s.toFixed(2)}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textAlign: 'right', color: m.d < 0 ? 'var(--err)' : m.d > 0 ? 'var(--ok)' : 'var(--fg-3)' }}>
                {m.d === 0 ? '—' : (m.d > 0 ? '↑' : '↓') + ' ' + Math.abs(m.d) + 'pp'}
              </span>
            </div>
          ))}
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-1)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', display: 'flex', justifyContent: 'space-between' }}>
            <span>5 of 24 models in rotation</span>
            <span>routing weights · auto-tuned</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const ArchSection = () => (
  <div id="architecture" className="section" style={{ background: 'var(--paper-2)', borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)' }}>
    <div className="container">
      <div className="section-head">
        <div className="eyebrow center">Architecture</div>
        <h2>Sits between your app<br/>and every provider.</h2>
        <p className="sub">A lightweight proxy gateway. Run it in your VPC or our SaaS. Either way, the wire format is OpenAI-compatible.</p>
      </div>
      <div style={{ background: 'var(--paper)', border: '1px solid var(--border-1)', borderRadius: 6, padding: 36 }}>
        <ArchDiagram />
      </div>
    </div>
  </div>
);

const ArchDiagram = () => (
  <svg viewBox="0 0 1100 360" width="100%">
    <defs>
      <pattern id="archDots" width="14" height="14" patternUnits="userSpaceOnUse">
        <circle cx="1" cy="1" r="1" fill="var(--rule-2)" />
      </pattern>
    </defs>
    <rect width="1100" height="360" fill="url(#archDots)" opacity="0.3"/>

    {/* App side */}
    <g>
      <rect x="40" y="100" width="200" height="160" rx="6" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.2"/>
      <text x="56" y="124" fontFamily="Geist Mono" fontSize="10" fill="var(--fg-3)" letterSpacing="0.10em">YOUR APP</text>
      <text x="56" y="150" fontFamily="Geist" fontSize="18" fontWeight="500" fill="var(--ink)">Client</text>
      <line x1="56" y1="170" x2="224" y2="170" stroke="var(--border-1)"/>
      <text x="56" y="194" fontFamily="Geist Mono" fontSize="11" fill="var(--fg-2)">x-customer-id</text>
      <text x="56" y="214" fontFamily="Geist Mono" fontSize="11" fill="var(--fg-2)">x-session-id</text>
      <text x="56" y="234" fontFamily="Geist Mono" fontSize="11" fill="var(--fg-2)">x-team-id</text>
    </g>

    {/* Bloom gateway center */}
    <g>
      <rect x="380" y="60" width="340" height="240" rx="6" fill="var(--ink)" stroke="var(--ink)"/>
      <text x="404" y="88" fontFamily="Geist Mono" fontSize="10" fill="var(--graphite-2)" letterSpacing="0.10em">▸ BLOOM GATEWAY</text>
      <circle cx="694" cy="84" r="3.5" fill="var(--signal)">
        <animate attributeName="opacity" values="1;0.3;1" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <text x="704" y="88" fontFamily="Geist Mono" fontSize="10" fill="var(--signal)" letterSpacing="0.08em">LIVE</text>

      {[
        { x: 404, l: '01', t: 'Visibility' },
        { x: 484, l: '02', t: 'Routing' },
        { x: 564, l: '03', t: 'Guardrails' },
        { x: 644, l: '04', t: 'Evals' },
      ].map((p, i) => (
        <g key={i}>
          <rect x={p.x} y={120} width={68} height={68} rx={4} fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
          <text x={p.x + 8}  y={140} fontFamily="Geist Mono" fontSize="10" fill="var(--graphite-2)" letterSpacing="0.10em">{p.l}</text>
          <text x={p.x + 8}  y={172} fontFamily="Geist" fontSize="13" fontWeight="500" fill="var(--paper)">{p.t}</text>
        </g>
      ))}

      <text x="404" y="222" fontFamily="Geist Mono" fontSize="10" fill="var(--graphite-2)" letterSpacing="0.10em">OBSERVE · ROUTE · ENFORCE · SCORE</text>

      {/* mini metrics row */}
      <g fontFamily="Geist Mono" fontSize="11" fill="var(--paper)">
        <text x="404" y="262">p99 92ms</text>
        <text x="494" y="262" fill="var(--graphite-2)">·</text>
        <text x="508" y="262">cache 41%</text>
        <text x="600" y="262" fill="var(--graphite-2)">·</text>
        <text x="614" y="262" fill="var(--signal)">$0.0021/req</text>
      </g>
    </g>

    {/* Providers right */}
    <g>
      <rect x="860" y="100" width="200" height="160" rx="6" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.2"/>
      <text x="876" y="124" fontFamily="Geist Mono" fontSize="10" fill="var(--fg-3)" letterSpacing="0.10em">1,000+ MODELS</text>
      <text x="876" y="150" fontFamily="Geist" fontSize="18" fontWeight="500" fill="var(--ink)">Providers</text>
      <line x1="876" y1="170" x2="1044" y2="170" stroke="var(--border-1)"/>
      <text x="876" y="194" fontFamily="Geist Mono" fontSize="11" fill="var(--fg-2)">OpenAI · Anthropic</text>
      <text x="876" y="214" fontFamily="Geist Mono" fontSize="11" fill="var(--fg-2)">Gemini · OSS · vLLM</text>
      <text x="876" y="234" fontFamily="Geist Mono" fontSize="11" fill="var(--fg-2)">your VPC · Bloom SaaS</text>
    </g>

    {/* arrows */}
    <g stroke="var(--ink)" strokeWidth="1.5" fill="none" markerEnd="url(#arrL)">
      <path d="M240,180 L380,180"/>
      <path d="M720,180 L860,180"/>
    </g>
    <defs>
      <marker id="arrL" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
        <path d="M0,0 L10,5 L0,10 z" fill="var(--ink)"/>
      </marker>
    </defs>
    <text x="306" y="170" fontFamily="Geist Mono" fontSize="10" fill="var(--fg-3)" letterSpacing="0.10em">REQUEST</text>
    <text x="784" y="170" fontFamily="Geist Mono" fontSize="10" fill="var(--fg-3)" letterSpacing="0.10em">DISPATCH</text>

    {/* feedback loop */}
    <g stroke="var(--signal)" strokeWidth="1.2" fill="none" strokeDasharray="3 3">
      <path d="M960,260 C960,310 700,330 550,330 C400,330 140,310 140,260"/>
    </g>
    <text x="510" y="350" fontFamily="Geist Mono" fontSize="10" fill="var(--signal-ink)" letterSpacing="0.10em">EVAL SCORES · USAGE · MARGIN SIGNALS</text>
  </svg>
);

const SpecsKV = () => (
  <div id="specs" className="section">
    <div className="container">
      <div className="section-head left">
        <div className="eyebrow">Specifications</div>
        <h2>The fine print, up front.</h2>
      </div>
      <div>
        <div className="kv">
          <div className="k">Wire format</div>
          <div className="v">OpenAI-compatible. Drop-in for the OpenAI SDK, LangChain, LlamaIndex, custom Python. Streaming via SSE. Function calling, tool use, vision pass through.</div>
        </div>
        <div className="kv">
          <div className="k">Deployment</div>
          <div className="v">Bloom SaaS (us-east-1, eu-west-1, ap-south-1) or your VPC via Helm or Terraform. On-prem control plane available on Enterprise.</div>
        </div>
        <div className="kv">
          <div className="k">Latency overhead</div>
          <div className="v">&lt; 100ms p99 added per request, gateway side. Cache hits return in &lt; 4ms.</div>
        </div>
        <div className="kv">
          <div className="k">Providers</div>
          <div className="v">OpenAI, Anthropic, Google (Gemini), Together, Fireworks, Groq, Cerebras, Replicate, AWS Bedrock, Azure OpenAI, your own vLLM. 1,000+ models supported.</div>
        </div>
        <div className="kv">
          <div className="k">Billing</div>
          <div className="v">You keep your provider contracts and rate cards. Bloom never sits on the bill. Platform fee + usage-based pricing.</div>
        </div>
        <div className="kv">
          <div className="k">Compliance</div>
          <div className="v">SOC 2 Type II. HIPAA-ready BAA on Enterprise. PII redaction on by default. Audit log retention up to 7 years.</div>
        </div>
        <div className="kv">
          <div className="k">SLA</div>
          <div className="v">99.95% gateway uptime on Scale. 99.99% with multi-region failover on Enterprise. Status at <code>status.bloom.dev</code>.</div>
        </div>
        <div className="kv">
          <div className="k">Time to deploy</div>
          <div className="v">~½ sprint. Most design partners are routing production traffic within 5 working days of kickoff.</div>
        </div>
      </div>
    </div>
  </div>
);

window.ProductHero = ProductHero;
window.VisibilityRow = VisibilityRow;
window.RoutingRow = RoutingRow;
window.GuardrailsRow = GuardrailsRow;
window.EvalsRow = EvalsRow;
window.ArchSection = ArchSection;
window.SpecsKV = SpecsKV;