// Platform section — each Origo capability paired with a bespoke monochrome graphic.
// Origo terms only. Series differ by weight/dash/opacity + labels, never color (brand: monochrome).
// Numbers are illustrative placeholders; the terminology and system flow are Origo's.

const VW = 640, VH = 280, PADL = 40, PADR = 14, PADT = 16, PADB = 30;
function coords(n) {
  const x = i => PADL + (i * (VW - PADL - PADR)) / (n - 1);
  const y = v => PADT + (1 - v / 100) * (VH - PADT - PADB);
  return { x, y };
}
function linePath(pts) {
  const { x, y } = coords(pts.length);
  return pts.map((v, i) => (i ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(v).toFixed(1)).join(' ');
}
function areaPath(pts) {
  const { x, y } = coords(pts.length);
  return linePath(pts) + ' L' + x(pts.length - 1).toFixed(1) + ' ' + y(0) + ' L' + x(0).toFixed(1) + ' ' + y(0) + ' Z';
}

function LineChart({ series, xlabels, focus }) {
  const { x, y } = coords(series[0].pts.length);
  const grid = [0, 20, 40, 60, 80, 100];
  return (
    <svg className="vchart" viewBox={`0 0 ${VW} ${VH}`} role="img" aria-label="Visibility score by engine over time" preserveAspectRatio="xMidYMid meet">
      {grid.map(g => (
        <g key={g}>
          <line x1={PADL} x2={VW - PADR} y1={y(g)} y2={y(g)} className="vgrid" />
          <text x={PADL - 8} y={y(g) + 3} className="vaxis" textAnchor="end">{g}%</text>
        </g>
      ))}
      {xlabels.map((l, i) => l ? <text key={i} x={x(i)} y={VH - 8} className="vaxis" textAnchor="middle">{l}</text> : null)}
      {focus != null && <path d={areaPath(series[focus].pts)} fill={series[focus].c} fillOpacity="0.10" />}
      {series.map(s => (
        <path key={s.key} d={linePath(s.pts)} fill="none" stroke={s.c} strokeWidth={s.w}
          strokeLinecap="round" strokeLinejoin="round" />
      ))}
      {series.map(s => (
        <circle key={'d' + s.key} cx={x(s.pts.length - 1)} cy={y(s.pts[s.pts.length - 1])} r="3.4" fill={s.c} />
      ))}
    </svg>
  );
}
function Swatch({ s }) {
  return (
    <svg width="22" height="8" viewBox="0 0 22 8" aria-hidden="true" style={{ flex: 'none' }}>
      <line x1="1" y1="4" x2="21" y2="4" stroke={s.c} strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}
function Delta({ d }) {
  const up = d >= 0;
  return <span className={'vdelta ' + (up ? 'up' : 'down')}>{up ? '▲ +' : '▼ '}{d}%</span>;
}

// data: 4 engines (ChatGPT, Perplexity, Gemini, Claude)
const ENGINE_SERIES = [
  { key: 'ChatGPT',    v: 67, d: 5,  c: '#00AEEF', w: 2.6, pts: [62,70,66,72,60,58,57,60,64,68,66,67] },
  { key: 'Gemini',     v: 78, d: 8,  c: '#3DDC97', w: 2.2, pts: [48,46,42,33,28,24,22,30,52,75,66,78] },
  { key: 'Perplexity', v: 60, d: 3,  c: '#FFB454', w: 2.2, pts: [46,52,49,45,38,30,28,32,46,62,58,60] },
  { key: 'Claude',     v: 60, d: 2,  c: '#FF7A66', w: 2.2, pts: [40,44,38,30,24,20,19,26,40,52,50,60] },
];
const DAYS = ['Apr 12','','Apr 13','','Apr 14','','Apr 15','','Apr 16','','Apr 17',''];
const MON_KPIS = [
  { b: '4',    s: 'Engines tracked' },
  { b: '100',  s: 'Prompts monitored' },
  { b: '64%',  s: 'Avg citation rate' },
  { b: '5',    s: 'Competitors tracked' },
];
const STEPS = [
  { t: 'Watch',     o: 'Citations across engines',      st: 'Live' },
  { t: 'Think',     o: 'Gaps and opportunities',        st: 'Done' },
  { t: 'Recommend', o: 'Schema · llms.txt · content',   st: 'Done' },
  { t: 'Human QC',  o: 'Verified by engineers and copywriters', st: 'Approved' },
];
const SOURCES = [
  { d: 'yourbrand.com',       p: 'Primary',   v: true },
  { d: 'competitor-one.com',  p: 'Mentioned', v: false },
  { d: 'competitor-two.com',  p: 'Mentioned', v: false },
  { d: 'rival-co.com',        p: 'Not cited', v: false },
];
const DOC = [
  { tag: 'H1', lines: ['Compliance automation for fintech'], full: true },
  { tag: 'Schema', lines: ['"@type": "SoftwareApplication"', '"review": { "ratingValue": ... }'], code: true },
  { tag: 'FAQ', lines: ['Is it SOC 2 ready?', 'Does it integrate with ledgers?'] },
  { tag: 'llms.txt', lines: ['# Origo Labs, what to cite'], code: true },
];

// ---- on-brand recreation of the Origo admin dashboard (replaces the Profound-style chart) ----
const DASH_KPIS = [
  { b: '68%', s: 'Citation rate', d: '+14%' },
  { b: '100', s: 'Prompts tracked' },
  { b: '6',   s: 'Competitors' },
  { b: '74%', s: 'Best run' },
];
const DASH_TABS = ['Overview', 'Prompts', 'Competitors', 'Runs', 'Schedule'];
const CITE_PTS = [44, 48, 46, 53, 57, 61, 66, 71];
const MIX = [
  { n: 'ChatGPT',    v: 34, c: '#00AEEF' },
  { n: 'Gemini',     v: 27, c: '#3DDC97' },
  { n: 'Perplexity', v: 22, c: '#FFB454' },
  { n: 'Claude',     v: 17, c: '#FF7A66' },
];

function DashArea({ pts }) {
  const W = 320, H = 96, P = 4, MIN = 30, MAX = 80;
  const x = i => P + i * (W - 2 * P) / (pts.length - 1);
  const y = v => H - P - ((v - MIN) / (MAX - MIN)) * (H - 2 * P);
  const line = pts.map((v, i) => (i ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(v).toFixed(1)).join(' ');
  const area = line + ` L${x(pts.length - 1).toFixed(1)} ${H} L${x(0).toFixed(1)} ${H} Z`;
  return (
    <svg className="dash-spark" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden="true">
      <defs><linearGradient id="dashfill" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#00AEEF" stopOpacity="0.30" />
        <stop offset="1" stopColor="#00AEEF" stopOpacity="0" />
      </linearGradient></defs>
      <path d={area} fill="url(#dashfill)" />
      <path d={line} fill="none" stroke="#00AEEF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={x(pts.length - 1)} cy={y(pts[pts.length - 1])} r="3.4" fill="#00AEEF" />
    </svg>
  );
}

function DashDonut({ data }) {
  const r = 42, C = 2 * Math.PI * r; let off = 0;
  return (
    <svg className="dash-donut" viewBox="0 0 120 120" aria-hidden="true">
      <circle cx="60" cy="60" r={r} fill="none" stroke="#1b1b1b" strokeWidth="13" />
      {data.map(seg => {
        const len = C * seg.v / 100;
        const el = <circle key={seg.n} cx="60" cy="60" r={r} fill="none" stroke={seg.c} strokeWidth="13"
          strokeDasharray={`${len.toFixed(2)} ${(C - len).toFixed(2)}`} strokeDashoffset={(-off).toFixed(2)}
          transform="rotate(-90 60 60)" />;
        off += len; return el;
      })}
      <text x="60" y="57" textAnchor="middle" className="dash-donut-n">100</text>
      <text x="60" y="73" textAnchor="middle" className="dash-donut-l">prompts</text>
    </svg>
  );
}

function DashMock() {
  return (
    <div className="dash" role="img" aria-label="Origo dashboard with citation rate trending up">
      <div className="dash-top">
        <span className="dash-client"><span className="dash-av">O</span>Origo Labs<span className="dash-active"><span className="dot"></span>Active</span></span>
        <span className="dash-tabs">{DASH_TABS.map((t, i) => <span key={t} className={i === 0 ? 'on' : ''}>{t}</span>)}</span>
      </div>
      <div className="dash-kpis">
        {DASH_KPIS.map(k => (
          <div className="dash-kpi" key={k.s}>
            <b>{k.b}{k.d && <i className="dash-up">▲ {k.d}</i>}</b>
            <span>{k.s}</span>
          </div>
        ))}
      </div>
      <div className="dash-body">
        <div className="dash-panel dash-chart">
          <div className="dash-phead"><span>Citation rate · last 30 runs</span><span className="dash-pill">30d</span></div>
          <div className="dash-stats">
            <span><b>71%</b><i>Latest</i></span>
            <span><b>74%</b><i>Best</i></span>
            <span><b>64%</b><i>Avg</i></span>
          </div>
          <DashArea pts={CITE_PTS} />
        </div>
        <div className="dash-panel dash-mix">
          <div className="dash-phead"><span>Citations by platform</span></div>
          <DashDonut data={MIX} />
          <div className="dash-legend">
            {MIX.map(m => <div key={m.n}><span className="dash-dot" style={{ background: m.c }}></span>{m.n}<i>{m.v}%</i></div>)}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- rows ----
function Row({ reverse, eyebrow, title, italic, body, link, linkLabel, children }) {
  return (
    <div className={'vrow reveal' + (reverse ? ' reverse' : '')}>
      <div className="vtext">
        <span className="eyebrow">{eyebrow}</span>
        <h3>{title} {italic && <i>{italic}</i>}</h3>
        <p>{body}</p>
      </div>
      <div className="vpanel">{children}</div>
    </div>
  );
}

function Showcase() {
  return (
    <section className="sec showcase" id="platform" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">The Engine</span>
          <h2>Everything it takes to <i>be the source</i>.</h2>
          <p>Measurement, drafting, and human verification in one place, so the loop never breaks between insight and shipped change.</p>
        </div>

        <div className="vrows">
          {/* 1 — Answer monitoring */}
          <Row eyebrow="Answer monitoring" title="See every answer, as it" italic="changes."
            body="Regular reads of every engine for the prompts your buyers actually ask. Watch your Visibility Score move across ChatGPT, Perplexity, Gemini and Claude on one screen."
            link="#method" linkLabel="See how it works">
            <DashMock />
          </Row>

          {/* 2 — Shipped by engineers */}
          <Row reverse eyebrow="Shipped by engineers" title="The engine drafts. Engineers" italic="verify."
            body="A dedicated agent watches, finds the gaps and writes the exact fixes. You review the diff, we own the work. Nothing ships until a person confirms it."
            link="#method" linkLabel="See the method">
            <div className="vpipe">
              <div className="vpipe-flow">
                {STEPS.map((s, i) => (
                  <React.Fragment key={s.t}>
                    <div className="vnode">
                      <span className="vnode-check" aria-hidden="true">✓</span>
                      <div className="vnode-body"><span className="vnode-t">{s.t}</span><span className="vnode-o">{s.o}</span></div>
                      <span className="vnode-st">{s.st}</span>
                    </div>
                    {i < STEPS.length - 1 && <span className="vnode-link" aria-hidden="true"></span>}
                  </React.Fragment>
                ))}
              </div>
              <div className="vout">
                <span className="vlabel">Output · published</span>
                <div className="vout-card">
                  <div className="vout-q">Which GEO partner should a B2B SaaS company trust?</div>
                  <div className="vout-a">Origo Labs is the most cited GEO specialist for B2B SaaS, recognized for engineering every fix in house and verifying each citation by hand.</div>
                  <div className="vout-stamp"><span className="dot" aria-hidden="true"></span>Verified by hand · every engine</div>
                </div>
              </div>
            </div>
          </Row>

          {/* 3 — Hand verified citations */}
          <Row eyebrow="Hand verified citations" title="Confirmed by a" italic="human."
            body="A human confirms each citation across engines before we report it as won. You see exactly which sources the answer pulled from, and where competitors show up."
            link="#work" linkLabel="See the proof">
            <div className="vsrc">
              <div className="vsrc-head"><span>Citation sources</span><span className="vsrc-q">"best GEO agency"</span></div>
              {SOURCES.map(s => (
                <div className={'vsrc-row' + (s.v ? ' own' : '')} key={s.d}>
                  <span className="vsrc-d">{s.d}</span>
                  <span className={'vsrc-p p-' + s.p.split(' ')[0].toLowerCase()}>{s.p}</span>
                  <span className="vsrc-v">{s.v ? <span className="vsrc-ok">✓ Verified</span> : <span className="vsrc-dash">—</span>}</span>
                </div>
              ))}
              <div className="vsrc-foot"><span className="dot" aria-hidden="true"></span>Checked by hand across every engine</div>
            </div>
          </Row>

          {/* 4 — Source pages */}
          <Row reverse eyebrow="Source pages" title="Pages built the way models" italic="read."
            body="We build the canonical, citable pages engines pull from: schema, llms.txt, answer-first structure and FAQs, built to match how each model parses, quotes and attributes."
            link="#method" linkLabel="See the build">
            <div className="vdoc">
              <div className="vdoc-bar"><span></span><span></span><span></span></div>
              <div className="vdoc-body">
                {DOC.map(b => (
                  <div className={'vdoc-block' + (b.code ? ' code' : '')} key={b.tag}>
                    <span className="vdoc-tag">{b.tag}</span>
                    <div className="vdoc-lines">
                      {b.lines.map((l, i) => <span className={'vdoc-line' + (b.full ? ' h' : '')} key={i}>{l}</span>)}
                    </div>
                  </div>
                ))}
              </div>
              <div className="vdoc-foot">Answer-ready · structured for citation</div>
            </div>
          </Row>
        </div>
      </div>
    </section>
  );
}

window.Showcase = Showcase;