const { Button, Card, Badge, Callout, DataTable, Alert, Tabs, Modal, TableOfContents } = window.ZaviFxDesignSystem_f15c31;

const EVIDENCE = [
  { src: 'case-studies/seo-story-1.jpg', cap: 'One month of SEO work: keywords, referring domains, Domain Authority and organic traffic movement (client report, supplied by ZaviFx).' },
  { src: 'case-studies/seo-story-2.jpg', cap: 'Traffic and ranking growth after a structural, content and backlink audit.' },
  { src: 'case-studies/seo-story-3.jpg', cap: 'Data-led programme: metrics monitoring, top pages and keyword ranking distribution.' },
  { src: 'case-studies/seo-story-4.jpg', cap: 'Authority and organic keyword reporting from Moz and Ahrefs.' },
];

const DASHBOARDS = [
  { src: 'case-studies/ahrefs-overview-1.webp', cap: 'Ahrefs Site Explorer overview — backlink profile, referring domains and organic performance.' },
  { src: 'case-studies/ahrefs-overview-2.webp', cap: 'Ahrefs overview for a second project — organic keywords by position and referring-domain split.' },
  { src: 'case-studies/semrush-domain-1.webp', cap: 'Semrush domain overview — organic traffic, keyword intent split and backlink types.' },
  { src: 'case-studies/semrush-domain-2.webp', cap: 'Semrush domain overview — position distribution, competitors and indexed pages.' },
];

function CaseStudyPage({ go }) {
  const [zoom, setZoom] = React.useState(null);
  const toc = [
    { id: 'overview', label: 'Overview' }, { id: 'baseline', label: 'Baseline' },
    { id: 'strategy', label: 'Strategy' }, { id: 'links', label: 'Link building' },
    { id: 'timeline', label: 'Timeline' }, { id: 'evidence', label: 'Evidence' },
    { id: 'lessons', label: 'Lessons' },
  ];
  return (
    <>
      <PageHero eyebrow="SEO & backlink case study" title="How we grow organic search: process, evidence and limits"
        intro="This page documents the way ZaviFx runs SEO and link building, illustrated with real tool exports. Every number quoted appears in the screenshots — nothing is estimated or embellished.">
        <Button onClick={() => go('contact')}>Request an SEO Audit</Button>
      </PageHero>

      <div className="zx-container zx-cs" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 180px', gap: 'var(--space-section)', paddingBlock: 'var(--space-section)', alignItems: 'start' }}>
        <article style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 'var(--space-xl)' }}>
          <section id="overview">
            <h2 className="t-h2">Client overview</h2>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-sm)' }}>
              REPLACE: client name and industry, or keep this anonymised. The engagements shown here are e-commerce and content
              websites where organic search was the primary growth channel and paid spend was limited.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap', marginTop: 'var(--space-md)' }}>
              <Badge>Technical SEO</Badge><Badge>On-page</Badge><Badge>Content</Badge><Badge>Link building</Badge><Badge>Reporting</Badge>
            </div>
          </section>

          <section id="baseline">
            <h2 className="t-h2">The initial challenge and baseline</h2>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-sm)' }}>
              Rankings had plateaued: crawlable but thin category pages, no internal linking strategy, and a backlink profile made up
              largely of low-relevance domains. Baseline metrics were recorded from Ahrefs, Semrush and Moz before any work started —
              those exports are the "before" side of every comparison below.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-md)', marginTop: 'var(--space-md)' }}>
              <Card variant="doc" eyebrow="Before" title="Baseline snapshot">REPLACE: paste the baseline figures you want published (from the supplied exports).</Card>
              <Card variant="doc" eyebrow="After" title="Latest snapshot">REPLACE: paste the corresponding later figures from the same tool and date range.</Card>
            </div>
          </section>

          <section id="strategy">
            <h2 className="t-h2">Strategy and technical work</h2>
            <ol style={{ margin: 'var(--space-sm) 0 0', paddingLeft: 'var(--space-lg)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
              <li><strong style={{ color: 'var(--text-strong)' }}>Website and keyword analysis</strong> — crawl, log review, keyword-to-URL mapping and cannibalisation clean-up.</li>
              <li><strong style={{ color: 'var(--text-strong)' }}>Technical SEO</strong> — indexation rules, sitemaps, structured data, Core Web Vitals, internal linking depth.</li>
              <li><strong style={{ color: 'var(--text-strong)' }}>On-page optimisation</strong> — titles, headings, entity coverage and template-level metadata.</li>
              <li><strong style={{ color: 'var(--text-strong)' }}>Content improvements</strong> — rewriting money pages against search intent, then building supporting articles.</li>
            </ol>
          </section>

          <section id="links">
            <h2 className="t-h2">Link building: relevance and quality controls</h2>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-sm)' }}>
              We pursue relevant, authoritative and sustainable links: topical fit first, editorial standards second, metrics third.
              Every prospect is reviewed for genuine traffic, editorial oversight and outbound-link patterns before outreach.
            </p>
            <DataTable caption="Link qualification checklist"
              columns={[{ key: 'c', label: 'Check' }, { key: 'w', label: 'What we require' }]}
              rows={[
                { c: 'Topical relevance', w: 'The linking page covers the same subject area as the target page.' },
                { c: 'Editorial control', w: 'A real editor decides what publishes; no paid-link marketplaces.' },
                { c: 'Traffic reality', w: 'The domain has organic traffic of its own, verified in Ahrefs or Semrush.' },
                { c: 'Anchor discipline', w: 'Natural, varied anchors; no exact-match stuffing.' },
                { c: 'Sustainability', w: 'Placement stays live and in context — no link-insertion churn.' },
              ]} />
            <Callout variant="warning">We do not buy spam links, PBNs or bulk directory placements, and we never guarantee a specific ranking position.</Callout>
          </section>

          <section id="timeline">
            <h2 className="t-h2">Implementation timeline</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', marginTop: 'var(--space-md)' }}>
              {[['Weeks 1–2', 'Audit, baseline exports, keyword map, prioritised backlog.'],
                ['Weeks 3–6', 'Technical fixes shipped; money pages rewritten; tracking corrected.'],
                ['Weeks 7–12', 'Content cadence live; digital PR and outreach begins; first ranking movement reviewed.'],
                ['Quarter 2 onward', 'Scale what worked, prune what did not, re-forecast with the client.']].map(([k, v]) => (
                <div key={k} style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: 'var(--space-md)', borderTop: '1px solid var(--border-hairline)', paddingTop: 'var(--space-sm)' }}>
                  <span className="t-body-sm-med" style={{ color: 'var(--color-brand-orange-deep)' }}>{k}</span>
                  <span style={{ color: 'var(--text-secondary)', fontSize: 'var(--type-body-sm-size)', lineHeight: 1.6 }}>{v}</span>
                </div>
              ))}
            </div>
          </section>

          <section id="evidence">
            <h2 className="t-h2">Evidence panels</h2>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, marginTop: 'var(--space-sm)' }}>
              Client-facing reports first, then raw tool exports. Select any panel to open it full size and read the figures directly.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-md)', marginTop: 'var(--space-md)' }}>
              {EVIDENCE.concat(DASHBOARDS).map((e) => (
                <figure key={e.src} style={{ margin: 0 }}>
                  <button type="button" onClick={() => setZoom(e)} style={{ padding: 0, border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-doc-card)', overflow: 'hidden', background: 'var(--color-canvas)', cursor: 'zoom-in', display: 'block', width: '100%' }}>
                    <span style={{ display: 'block', maxHeight: 220, overflow: 'hidden' }}>
                      <img src={ASSETS + e.src} alt={e.cap} loading="lazy" style={{ width: '100%', display: 'block' }} />
                    </span>
                  </button>
                  <figcaption style={{ fontSize: 'var(--type-caption-size)', color: 'var(--text-muted)', marginTop: 'var(--space-xs)' }}>{e.cap}</figcaption>
                </figure>
              ))}
            </div>
          </section>

          <section id="lessons">
            <h2 className="t-h2">Key lessons</h2>
            <ul style={{ margin: 'var(--space-sm) 0 0', paddingLeft: 'var(--space-lg)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
              <li>Fix indexation and internal linking before commissioning content — otherwise good content stays invisible.</li>
              <li>Authority growth and content depth have to move together; either one alone stalls.</li>
              <li>Report on qualified enquiries, not just sessions, or the programme gets judged on the wrong number.</li>
            </ul>
            <Alert variant="info" title="Results disclaimer" >
              SEO outcomes vary with competition, industry, website condition, budget and how quickly recommendations are implemented.
              Past performance for one client is not a prediction for another, and no agency can guarantee rankings.
            </Alert>
            <div style={{ marginTop: 'var(--space-lg)', display: 'flex', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>
              <Button onClick={() => go('contact')}>Request an SEO Audit</Button>
              <Button variant="secondary" onClick={() => go('work')} iconRight={<Arrow />}>See website projects</Button>
            </div>
          </section>
        </article>
        <aside className="zx-cs__toc" style={{ position: 'sticky', top: 'calc(var(--nav-height) + var(--space-lg))' }}>
          <TableOfContents items={toc} current="overview" />
        </aside>
      </div>

      <Modal open={!!zoom} onClose={() => setZoom(null)} title="Report evidence" description={zoom ? zoom.cap : ''}
        className="zx-lightbox" actions={<Button variant="secondary" onClick={() => setZoom(null)}>Close</Button>}>
        {zoom && <img src={ASSETS + zoom.src} alt={zoom.cap} style={{ width: '100%', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-hairline)' }} />}
      </Modal>
    </>
  );
}
Object.assign(window, { CaseStudyPage });