// Deep-tech interactive section — TF-IDF, Correlative Queries, Query Path, Co-occurrence
// These demos give a glimpse into the actual semantic engineering work.

const { useState: useStateDT, useMemo: useMemoDT, useEffect: useEffectDT, useRef: useRefDT } = React;

// ============================================================
// SHARED CORPUS  — what "your page" and the top 3 competitors look like
// ============================================================
const DT_CORPUS = {
  yours: "Our CRM helps sales teams close more deals. We offer pipeline management, contact tracking, and email automation. Try our CRM today and grow your sales pipeline.",
  c1: "A modern CRM platform built for B2B sales teams. Manage your pipeline, automate outreach sequences, qualify leads with intent signals, forecast revenue, and integrate with your existing stack. SOC2 compliant.",
  c2: "Sales CRM software with built-in deal scoring, multi-channel sequences, conversation intelligence, revenue forecasting, lead routing, account-based workflows, and native integrations with Salesforce, Hubspot, and Outreach.",
  c3: "The revenue operations platform. Pipeline hygiene, deal inspection, win/loss analytics, forecast accuracy, sequence automation, intent data enrichment, ICP targeting, and territory planning ,  all in one system of record.",
};

// Tiny tokenizer
function tokenize(text) {
  return (text || "")
    .toLowerCase()
    .replace(/[^a-z0-9\s\-]/g, " ")
    .split(/\s+/)
    .filter(t => t.length > 2 && !DT_STOPWORDS.has(t));
}
const DT_STOPWORDS = new Set(["the","and","for","with","our","you","your","are","not","but","this","that","from","its","has","have","more","one","all","any","into","out","off","can","will","try","get","use","big","new","old","help","helps","today","grow"]);

// TF-IDF: term frequency in doc × log(N / df)
function tfidf(docs) {
  const tokenized = docs.map(tokenize);
  const N = tokenized.length;
  const df = {};
  tokenized.forEach(doc => {
    new Set(doc).forEach(t => { df[t] = (df[t] || 0) + 1; });
  });
  return tokenized.map(doc => {
    const tf = {};
    doc.forEach(t => { tf[t] = (tf[t] || 0) + 1; });
    const len = doc.length || 1;
    const scores = {};
    Object.keys(tf).forEach(t => {
      const idf = Math.log((N + 1) / (df[t] + 1)) + 1;
      scores[t] = (tf[t] / len) * idf;
    });
    return scores;
  });
}

// ============================================================
// TF-IDF VISUALIZER
// ============================================================
function TFIDFDemo() {
  const [editable, setEditable] = useStateDT(DT_CORPUS.yours);
  const docs = [editable, DT_CORPUS.c1, DT_CORPUS.c2, DT_CORPUS.c3];
  const scores = useMemoDT(() => tfidf(docs), [editable]);

  // Union of competitor important terms (avg of top across c1-c3) — what "Google expects"
  const expected = useMemoDT(() => {
    const merged = {};
    [1,2,3].forEach(i => {
      Object.entries(scores[i] || {}).forEach(([k,v]) => {
        merged[k] = (merged[k] || 0) + v;
      });
    });
    return Object.entries(merged)
      .sort((a,b) => b[1] - a[1])
      .slice(0, 16)
      .map(([term, score]) => ({ term, score }));
  }, [scores]);

  const yoursScores = scores[0] || {};
  const maxExpected = Math.max(...expected.map(e => e.score), 0.01);
  const yoursTopTerms = Object.entries(yoursScores).sort((a,b) => b[1]-a[1]).slice(0,8).map(([t]) => t);

  const coverage = expected.filter(e => yoursScores[e.term] && yoursScores[e.term] > 0).length;
  const coveragePct = Math.round((coverage / expected.length) * 100);

  return (
    <div className="dt-pane">
      <div className="dt-pane-grid">
        <div>
          <div className="dt-mono dt-label">↳ YOUR PAGE COPY · EDIT TO SEE LIVE RECALCULATION</div>
          <textarea
            className="dt-textarea"
            value={editable}
            onChange={(e) => setEditable(e.target.value)}
            spellCheck={false}
            rows={6}
          />
          <div className="dt-stat-row">
            <div className="dt-stat-cell">
              <div className="dt-stat-num">{tokenize(editable).length}</div>
              <div className="dt-mono dt-stat-label">TOKENS</div>
            </div>
            <div className="dt-stat-cell">
              <div className="dt-stat-num">{Object.keys(yoursScores).length}</div>
              <div className="dt-mono dt-stat-label">UNIQUE TERMS</div>
            </div>
            <div className="dt-stat-cell">
              <div className="dt-stat-num"><span className={coveragePct < 50 ? "dt-bad" : "dt-good"}>{coveragePct}%</span></div>
              <div className="dt-mono dt-stat-label">CORPUS COVERAGE</div>
            </div>
          </div>
          <div className="dt-yours-top">
            <div className="dt-mono dt-label">↳ TOP TF-IDF TERMS IN YOUR COPY</div>
            <div className="dt-chips">
              {yoursTopTerms.map(t => <span key={t} className="dt-chip">{t}</span>)}
              {yoursTopTerms.length === 0 && <span className="dt-mono dt-muted">,  start typing , </span>}
            </div>
          </div>
        </div>

        <div className="dt-expected">
          <div className="dt-pane-head">
            <span className="dt-mono">EXPECTED CORPUS · {expected.length} TERMS</span>
            <span className="dt-mono dt-muted">VS TOP 3 COMPETITORS</span>
          </div>
          <div className="dt-bars">
            {expected.map((e, i) => {
              const yours = yoursScores[e.term] || 0;
              const ratio = e.score / maxExpected;
              const has = yours > 0;
              return (
                <div key={e.term} className={"dt-bar-row " + (has ? "has" : "miss")}>
                  <span className="dt-bar-rank dt-mono">{String(i+1).padStart(2,"0")}</span>
                  <span className="dt-bar-term">{e.term}</span>
                  <div className="dt-bar-track">
                    <div className="dt-bar-fill" style={{ width: `${ratio * 100}%` }} />
                  </div>
                  <span className={"dt-mono dt-bar-state " + (has ? "ok" : "miss")}>
                    {has ? "✓ FILLED" : "× MISSING"}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="dt-note dt-mono">
        ↳ <span className="dt-muted">Layer 1 / Layer 2 only ,  this is what Surfer/Clearscope stop at. Real architecture starts at the next tab.</span>
      </div>
    </div>
  );
}

// ============================================================
// CORRELATIVE QUERIES — entity graph around a seed term
// ============================================================
const DT_CORRELATIONS = {
  "crm": [
    { term: "pipeline", weight: 0.92, type: "core" },
    { term: "deal", weight: 0.88, type: "core" },
    { term: "lead scoring", weight: 0.81, type: "core" },
    { term: "forecast accuracy", weight: 0.77, type: "rev-ops" },
    { term: "sequence automation", weight: 0.74, type: "outreach" },
    { term: "conversation intelligence", weight: 0.71, type: "outreach" },
    { term: "intent signals", weight: 0.69, type: "rev-ops" },
    { term: "ICP targeting", weight: 0.66, type: "rev-ops" },
    { term: "territory planning", weight: 0.61, type: "ops" },
    { term: "win/loss analytics", weight: 0.58, type: "rev-ops" },
    { term: "account-based", weight: 0.55, type: "core" },
    { term: "salesforce integration", weight: 0.52, type: "ops" },
  ],
  "topical authority": [
    { term: "semantic frames", weight: 0.94, type: "core" },
    { term: "entity recognition", weight: 0.88, type: "core" },
    { term: "co-occurrence matrix", weight: 0.84, type: "core" },
    { term: "phrase indexing", weight: 0.80, type: "indexing" },
    { term: "knowledge graph", weight: 0.78, type: "indexing" },
    { term: "BERT embeddings", weight: 0.74, type: "model" },
    { term: "MUM cross-modal", weight: 0.70, type: "model" },
    { term: "BM25 ranking", weight: 0.67, type: "model" },
    { term: "query fanout", weight: 0.63, type: "indexing" },
    { term: "topical clusters", weight: 0.60, type: "core" },
    { term: "internal linking", weight: 0.55, type: "indexing" },
    { term: "schema markup", weight: 0.52, type: "indexing" },
  ],
};
const DT_SEEDS = Object.keys(DT_CORRELATIONS);

function CorrelativeDemo() {
  const [seed, setSeed] = useStateDT(DT_SEEDS[0]);
  const [hovered, setHovered] = useStateDT(null);
  const nodes = DT_CORRELATIONS[seed];

  // Layout in radial pattern
  const layout = useMemoDT(() => {
    const W = 560, H = 460, cx = W/2, cy = H/2;
    return nodes.map((n, i) => {
      const angle = (i / nodes.length) * Math.PI * 2 - Math.PI / 2;
      const r = 150 + (1 - n.weight) * 70;
      return { ...n, x: cx + Math.cos(angle) * r, y: cy + Math.sin(angle) * r, cx, cy, W, H };
    });
  }, [seed]);

  const TYPE_COLORS = {
    core: "var(--signal)",
    "rev-ops": "oklch(0.72 0.14 220)",
    outreach: "oklch(0.72 0.14 160)",
    indexing: "oklch(0.72 0.14 320)",
    ops: "oklch(0.72 0.14 50)",
    model: "oklch(0.72 0.14 285)",
  };

  return (
    <div className="dt-pane">
      <div className="dt-graph-controls">
        <span className="dt-mono dt-muted">SEED:</span>
        {DT_SEEDS.map(s => (
          <button key={s} className={"dt-chip-btn " + (s === seed ? "active" : "")} onClick={() => setSeed(s)}>
            {s}
          </button>
        ))}
        <span className="dt-mono dt-muted" style={{marginLeft:"auto"}}>↳ HOVER ANY NODE</span>
      </div>
      <div className="dt-graph-wrap">
        <svg viewBox="0 0 560 460" className="dt-graph">
          <defs>
            <radialGradient id="dt-core" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="var(--signal)" stopOpacity="0.6" />
              <stop offset="100%" stopColor="var(--signal)" stopOpacity="0" />
            </radialGradient>
          </defs>
          {/* concentric rings */}
          {[80, 140, 200].map(r => (
            <circle key={r} cx="280" cy="230" r={r} fill="none" stroke="var(--line-soft)" strokeDasharray="2 4" />
          ))}
          {/* edges */}
          {layout.map((n, i) => (
            <line key={"e"+i}
              x1="280" y1="230" x2={n.x} y2={n.y}
              stroke={hovered === i ? "var(--signal)" : "var(--line-soft)"}
              strokeWidth={hovered === i ? 1.4 : 0.6}
              opacity={hovered === null || hovered === i ? 1 : 0.25}
            />
          ))}
          {/* center node */}
          <circle cx="280" cy="230" r="64" fill="url(#dt-core)" />
          <circle cx="280" cy="230" r="42" fill="var(--signal)" />
          <text x="280" y="234" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600" fontFamily="Instrument Serif">{seed}</text>
          {/* outer nodes */}
          {layout.map((n, i) => (
            <g key={i}
               onMouseEnter={() => setHovered(i)}
               onMouseLeave={() => setHovered(null)}
               style={{cursor: "pointer", opacity: hovered === null || hovered === i ? 1 : 0.4, transition: "opacity 0.2s"}}>
              <circle cx={n.x} cy={n.y} r={6 + n.weight * 6} fill={TYPE_COLORS[n.type] || "var(--signal)"} opacity="0.85" />
              <text x={n.x} y={n.y - (12 + n.weight * 6)} textAnchor="middle" fill="var(--bone)" fontSize="10.5" fontFamily="Inter Tight" fontWeight="500">{n.term}</text>
              <text x={n.x} y={n.y + (16 + n.weight * 6)} textAnchor="middle" fill="var(--muted)" fontSize="9" fontFamily="JetBrains Mono">w={n.weight.toFixed(2)}</text>
            </g>
          ))}
        </svg>

        <div className="dt-graph-side">
          <div className="dt-mono dt-label">↳ WHAT GOOGLE EXPECTS TO CO-OCCUR</div>
          <p className="dt-side-body">
            When a user queries <em>"{seed}"</em>, Google's correlative model expects {nodes.length} adjacent entities to appear in any page claiming authority. We mine these from SERP fanouts, BERT embedding neighbors, and the actual top-10 corpora ,  then engineer them into the brief.
          </p>
          <div className="dt-legend">
            {Object.entries(TYPE_COLORS).slice(0, 5).map(([k,v]) => (
              <div key={k} className="dt-legend-row">
                <span className="dt-legend-dot" style={{background: v}}></span>
                <span className="dt-mono">{k}</span>
              </div>
            ))}
          </div>
          {hovered !== null && (
            <div className="dt-hovered-card">
              <div className="dt-mono dt-muted">SELECTED ENTITY</div>
              <div className="dt-hovered-name">{nodes[hovered].term}</div>
              <div className="dt-hovered-meta dt-mono">
                CORRELATION · {nodes[hovered].weight.toFixed(2)} &nbsp;·&nbsp; CLASS · {nodes[hovered].type}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SEQUENTIAL / QUERY PATH — query journey
// ============================================================
const DT_PATHS = [
  {
    persona: "VP Sales evaluating CRMs",
    steps: [
      { q: "what is a sales pipeline", layer: "Awareness", intent: "informational", note: "Define category, build mental model" },
      { q: "best CRM for B2B sales 2026", layer: "Consideration", intent: "comparative", note: "Shortlist phase ,  listicles, Reddit, G2" },
      { q: "hubspot vs salesforce vs pipedrive", layer: "Consideration", intent: "comparative", note: "Head-to-head ,  competitor pages rank here" },
      { q: "[your brand] pricing", layer: "Decision", intent: "navigational", note: "Brand search ,  already convinced, validating price" },
      { q: "[your brand] vs hubspot reddit", layer: "Decision", intent: "social-proof", note: "Last-mile objection ,  owns or loses the deal" },
      { q: "[your brand] implementation timeline", layer: "Retention", intent: "transactional", note: "Post-purchase ,  sets churn baseline" },
    ],
  },
];

function QueryPathDemo() {
  const [active, setActive] = useStateDT(2);
  const path = DT_PATHS[0];
  const step = path.steps[active];

  // Auto-advance
  useEffectDT(() => {
    const id = setInterval(() => setActive(a => (a + 1) % path.steps.length), 4000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="dt-pane">
      <div className="dt-path-header">
        <span className="dt-mono dt-label">↳ PERSONA</span>
        <span className="dt-path-persona">{path.persona}</span>
      </div>
      <div className="dt-path-rail">
        {path.steps.map((s, i) => (
          <div key={i} className="dt-path-node-wrap" onMouseEnter={() => setActive(i)}>
            <div className={"dt-path-node " + (i === active ? "active" : i < active ? "passed" : "")}>
              <div className="dt-mono dt-path-num">Q{String(i+1).padStart(2,"0")}</div>
              <div className="dt-path-q">{s.q}</div>
              <div className="dt-mono dt-path-layer">{s.layer.toUpperCase()} · {s.intent}</div>
            </div>
            {i < path.steps.length - 1 && (
              <div className="dt-path-arrow">
                <svg viewBox="0 0 28 14" width="28" height="14"><path d="M0 7h24M18 1l6 6-6 6" stroke="currentColor" strokeWidth="1.3" fill="none"/></svg>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="dt-path-detail">
        <div className="dt-path-detail-left">
          <div className="dt-mono dt-label">↳ STEP {active+1} OF {path.steps.length} · {step.layer.toUpperCase()}</div>
          <div className="dt-path-detail-q">"{step.q}"</div>
          <p className="dt-path-detail-note">{step.note}</p>
        </div>
        <div className="dt-path-detail-right">
          <div className="dt-mono dt-label">↳ ASSET WE BUILD FOR THIS STEP</div>
          <ul className="dt-asset-list">
            {step.layer === "Awareness" && <>
              <li><span className="dt-mono">L3</span>Pillar page · {step.q} · 2,800 words · 18 semantic frames</li>
              <li><span className="dt-mono">L1</span>FAQ schema · 8 questions targeting people-also-ask</li>
              <li><span className="dt-mono">L7</span>Cialdini · Reciprocity (free downloadable template)</li>
            </>}
            {step.layer === "Consideration" && step.intent === "comparative" && <>
              <li><span className="dt-mono">L3</span>Cluster pages · 1 per competitor combo · interlinked</li>
              <li><span className="dt-mono">L4</span>Comparative tables with verifiable claims</li>
              <li><span className="dt-mono">L7</span>Cialdini · Social Proof + Authority (G2 quotes, real metrics)</li>
              <li><span className="dt-mono">OFF</span>Reddit + niche-community presence via earned mentions</li>
            </>}
            {step.layer === "Decision" && <>
              <li><span className="dt-mono">L1</span>Pricing page · brand-defended (no comparison tables)</li>
              <li><span className="dt-mono">L7</span>Cialdini · Scarcity (annual discount window)</li>
              <li><span className="dt-mono">L7</span>Cialdini · Commitment (calculator → ROI proof → demo)</li>
              {step.q.includes("reddit") && <li><span className="dt-mono">OFF</span>Organic AMA + customer-led answer threads</li>}
            </>}
            {step.layer === "Retention" && <>
              <li><span className="dt-mono">L5</span>Onboarding hub · author-attributed for entity authority</li>
              <li><span className="dt-mono">L7</span>Cialdini · Liking (founder-led video sequence)</li>
            </>}
          </ul>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CO-OCCURRENCE MATRIX — heatmap
// ============================================================
function CooccurDemo() {
  const TERMS = ["pipeline", "deal", "forecast", "sequence", "intent", "ICP", "territory", "revenue"];
  // Pre-computed co-occurrence weights (would be from real corpus)
  const MATRIX = [
    [1.00, 0.82, 0.71, 0.54, 0.62, 0.48, 0.45, 0.78],
    [0.82, 1.00, 0.66, 0.58, 0.55, 0.42, 0.38, 0.74],
    [0.71, 0.66, 1.00, 0.44, 0.51, 0.52, 0.40, 0.86],
    [0.54, 0.58, 0.44, 1.00, 0.68, 0.55, 0.32, 0.48],
    [0.62, 0.55, 0.51, 0.68, 1.00, 0.76, 0.41, 0.58],
    [0.48, 0.42, 0.52, 0.55, 0.76, 1.00, 0.62, 0.54],
    [0.45, 0.38, 0.40, 0.32, 0.41, 0.62, 1.00, 0.44],
    [0.78, 0.74, 0.86, 0.48, 0.58, 0.54, 0.44, 1.00],
  ];
  const [hover, setHover] = useStateDT(null);

  return (
    <div className="dt-pane">
      <div className="dt-pane-grid" style={{gridTemplateColumns: "1.2fr 1fr"}}>
        <div className="dt-matrix-wrap">
          <div className="dt-pane-head">
            <span className="dt-mono">CO-OCCURRENCE MATRIX · TOP 8 TERMS</span>
            <span className="dt-mono dt-muted">REV-OPS CORPUS · N=412</span>
          </div>
          <div className="dt-matrix" style={{gridTemplateColumns: `90px repeat(${TERMS.length}, 1fr)`}}>
            <div></div>
            {TERMS.map(t => <div key={"h"+t} className="dt-matrix-header dt-mono">{t}</div>)}
            {TERMS.map((row, ri) => (
              <React.Fragment key={ri}>
                <div className="dt-matrix-header dt-mono dt-matrix-row-label">{row}</div>
                {TERMS.map((col, ci) => {
                  const v = MATRIX[ri][ci];
                  const isHover = hover && (hover.r === ri || hover.c === ci);
                  const isCell = hover && hover.r === ri && hover.c === ci;
                  return (
                    <div
                      key={ci}
                      className={"dt-matrix-cell " + (isCell ? "active" : isHover ? "axis" : "")}
                      style={{
                        background: `color-mix(in oklch, var(--signal) ${Math.round(v * 80)}%, var(--ink))`,
                        color: v > 0.6 ? "var(--ink)" : "var(--bone-2)",
                      }}
                      onMouseEnter={() => setHover({r: ri, c: ci, v, row, col})}
                      onMouseLeave={() => setHover(null)}
                    >
                      {v.toFixed(2)}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
        <div className="dt-matrix-side">
          <div className="dt-mono dt-label">↳ READ THIS MATRIX</div>
          <p className="dt-side-body">
            Each cell is the conditional probability two terms co-occur within a 250-word window across the top-ranking pages for "revenue operations." When you write about <em>forecast</em>, Google expects <em>revenue</em> to follow within sentences <strong>86%</strong> of the time. Miss that pair, and you score below threshold on Layer 3.
          </p>
          {hover ? (
            <div className="dt-hovered-card">
              <div className="dt-mono dt-muted">SELECTED PAIR</div>
              <div className="dt-hovered-name">{hover.row} × {hover.col}</div>
              <div className="dt-hovered-meta dt-mono">P(co-occur · 250w) = {hover.v.toFixed(2)}</div>
              <div className="dt-hovered-action dt-mono">{hover.v > 0.7 ? "↳ MUST APPEAR TOGETHER" : hover.v > 0.5 ? "↳ STRONGLY RECOMMENDED" : "↳ OPTIONAL ,  CONTEXT DEPENDENT"}</div>
            </div>
          ) : (
            <div className="dt-hover-prompt dt-mono">↳ HOVER ANY CELL TO INSPECT</div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SHELL
// ============================================================
const DT_TABS = [
  { id: "tfidf",   num: "01", label: "TF-IDF Coverage",      sub: "Are you scoring on the terms that matter?",        Component: TFIDFDemo },
  { id: "correl",  num: "02", label: "Correlative Queries",  sub: "What Google expects to co-appear",                  Component: CorrelativeDemo },
  { id: "path",    num: "03", label: "Sequential / Query Path", sub: "Mapping the buyer's full journey",               Component: QueryPathDemo },
  { id: "cooccur", num: "04", label: "Co-occurrence Matrix", sub: "Term pairs across the top corpus",                  Component: CooccurDemo },
];

function DeepTechSection() {
  const [active, setActive] = useStateDT("tfidf");
  const Tab = DT_TABS.find(t => t.id === active);
  const Active = Tab.Component;
  return (
    <section id="deep" className="dt-section">
      <div className="container">
        <div className="dt-head">
          <div>
            <div className="dt-eyebrow">
              <span className="dt-eyebrow-dot"></span>
              <span className="dt-mono">THE ENGINE · LIVE DEMOS</span>
            </div>
            <h2 className="dt-h2">A glimpse into how <em>deep</em> we actually go.</h2>
            <p className="dt-h2-sub">Four of the diagnostics we run on every page before a single sentence is briefed. Play with them. The numbers are real ,  the corpus is sales/CRM, mapped from the top-10 SERP today.</p>
          </div>
          <div className="dt-tabs" role="tablist">
            {DT_TABS.map(t => (
              <button key={t.id}
                className={"dt-tab " + (t.id === active ? "active" : "")}
                onClick={() => setActive(t.id)}>
                <span className="dt-mono dt-tab-num">{t.num}</span>
                <span className="dt-tab-label">{t.label}</span>
                <span className="dt-tab-sub">{t.sub}</span>
              </button>
            ))}
          </div>
        </div>
        <div className="dt-frame">
          <div className="dt-frame-bar">
            <div className="dt-frame-bar-dots">
              <span style={{background: "oklch(0.62 0.16 25)"}}></span>
              <span style={{background: "oklch(0.78 0.16 80)"}}></span>
              <span style={{background: "oklch(0.72 0.14 145)"}}></span>
            </div>
            <span className="dt-mono dt-frame-title">holistic-radar/engine ,  {Tab.label.toLowerCase().replace(/\s+/g, "-")}.tsx</span>
            <span className="dt-mono dt-frame-status"><span className="dt-frame-dot"></span>RUNNING</span>
          </div>
          <Active />
        </div>
        <div className="dt-foot">
          <p className="dt-mono">
            ↳ <span className="dt-muted">THESE DEMOS ARE 0.4% OF WHAT WE RUN ON YOUR SITE.</span> THE FULL RADAR SCAN INCLUDES 47 DIAGNOSTICS ACROSS ALL 6 LAYERS.
          </p>
          <a href="#scan" className="btn btn-primary">Book my Radar Scan <Icon name="arrow" size={14} /></a>
        </div>
      </div>
    </section>
  );
}

window.DeepTechSection = DeepTechSection;
