// Main app for Holistic Radar — full landing page
const { useState, useEffect, useMemo } = React;

// ============================================================
// DATA
// ============================================================

// 6-Layer Pyramid (Google's actual evaluation system, Holistic Radar's framework)
const PYRAMID = [
{
  id: "L6",
  title: "Holistic Task / Need",
  subtitle: "MUM, Gemini ,  WHY is the user here?",
  short: "The Convergence Layer",
  body: "Google's MUM and Gemini model the entire user journey: the trigger that started the search, the immediate question, the follow-up questions they haven't typed yet, and the ultimate goal beneath all of it. Content that only answers the typed question ranks below content that solves the whole problem. This is the layer where Semantic SEO and persuasion psychology converge ,  the same dimension MUM evaluates is the one Cialdini's Unity principle operates on.",
  bullets: ["Ownership of featured positions and AI answer boxes", "Content that converts because it addresses the full decision journey", "Rankings that hold because users complete their goal on your page"],
  principle: "Unity ,  the deepest persuasion principle and the deepest ranking signal are the same signal.",
  tech: "MUM · Gemini multimodal · Holistic context scoring · 75+ language understanding"
},
{
  id: "L5",
  title: "Entity Authority",
  subtitle: "Knowledge Graph, E-E-A-T, Trust",
  short: "Who Google believes you are",
  body: "Google ranks entities, not pages. At Layer 5, the algorithm evaluates whether your brand and author entities exist in the Knowledge Graph, whether they are verified, and whether they carry attribute-level trust. Without entity authority, even perfectly written content gets capped.",
  bullets: ["Verified author + brand entity in Knowledge Graph", "Schema markup across every content type", "E-E-A-T signals embedded structurally, not claimed"],
  principle: "Authority ,  demonstrated, not declared. Cialdini's principle of expertise.",
  tech: "Knowledge Graph · sameAs schema · E-E-A-T trust signals"
},
{
  id: "L4",
  title: "Contextual Intent",
  subtitle: "BERT, Transformers, Attention",
  short: "What you actually mean",
  body: "BERT reads your content the way a computational linguist reads a paragraph ,  token by token, relationship by relationship. Layer 4 evaluates whether your content matches the actual intent behind the query, not the surface keywords. Most agencies stop at Layer 1 and never make it here.",
  bullets: ["Intent classification across all target queries", "Attention-aware section structuring", "Disambiguation for polysemous terms"],
  principle: "Liking ,  when content reflects the reader's exact mental model, resonance happens.",
  tech: "BERT · Transformer attention layers · Intent classification"
},
{
  id: "L3",
  title: "Topical Completeness",
  subtitle: "Co-occurrence, Phrase Indexing, Semantic Clusters",
  short: "Does your content cover everything?",
  body: "Most content fills 30–40% of the semantic frames Google expects to see for a topic. The Holistic Radar architecture fills 90%+. That is the actual difference between content that ranks and content that does not ,  total topical coverage at the cluster level, not the page level.",
  bullets: ["Topical maps with full semantic coverage", "Interconnected content networks", "Phrase indexing across the entire cluster"],
  principle: "Commitment & Consistency ,  the cluster keeps the reader saying yes across pages.",
  tech: "Topical maps · Co-occurrence analysis · Phrase indexing"
},
{
  id: "L2",
  title: "Structural Semantics",
  subtitle: "TF-IDF, BM25, Document Structure, Schema",
  short: "How your page is built",
  body: "Layer 2 evaluates whether your document structure communicates meaning to the algorithm. Heading hierarchy, internal linking, schema, BM25 weight distribution. The gap between page 3 and page 1 almost always lives here ,  and most agencies have never audited it.",
  bullets: ["TF-IDF and BM25 analysis vs. top 10", "Internal link architecture (pillar–cluster)", "Schema implementation across all content types"],
  principle: "Social Proof ,  structural signals tell Google other authoritative pages reference you the same way.",
  tech: "TF-IDF · BM25 · Schema.org · Internal link graphs"
},
{
  id: "L1",
  title: "N-Grams / Tokens",
  subtitle: "The atomic unit ,  how Google reads",
  short: "Where most agencies stop",
  body: "Google's transformer-based NLP reads your page like a computational linguist. N-grams, tokens, and co-occurrence patterns are Layer 1 of a 6-layer AI evaluation system. Most agencies have never heard of Layers 2 through 6. Optimizing only at this layer is why your rankings have plateaued.",
  bullets: ["Token-level co-occurrence analysis", "N-gram coverage vs. competitors", "Atomic semantic unit auditing"],
  principle: "Reciprocity ,  give the algorithm the atomic clarity it needs before asking for ranking.",
  tech: "Tokenization · N-grams · Co-occurrence patterns"
}];


const MYTHS = [
{
  num: "01",
  myth: "Keyword density determines rankings",
  reality: "Google's transformer-based NLP reads your page like a computational linguist. N-grams, tokens, and co-occurrence patterns are Layer 1 of a 6-layer AI evaluation system. Most agencies have never heard of Layers 2 through 6."
},
{
  num: "02",
  myth: "Great content ranks on its own merit",
  reality: "BERT evaluates structural semantics, entity authority, and holistic task completion before ranking anything. Content without semantic architecture is invisible to Layers 3, 4, and 5 regardless of how well-written it is."
},
{
  num: "03",
  myth: "SEO and conversion are separate disciplines",
  reality: "The same dimension MUM evaluates at Layer 6 is the exact dimension Cialdini's Unity principle operates on. The deepest ranking signal and the deepest persuasion principle are the same signal. We're the only agency that activates both."
}];


const CIALDINI = [
{ num: "01", name: "Reciprocity", body: "Give genuine value before asking for anything. The entire 6-layer framework section above is this principle in action.", placement: "FREE PYRAMID SCAN ON FIRST CALL. NO COMMITMENT." },
{ num: "02", name: "Commitment", body: "Small agreements build toward full conversion. Each myth agreed with is a micro-commitment to the Holistic Radar worldview.", placement: "PROGRESSIVE-YES ARCHITECTURE BUILT INTO EVERY PAGE STRUCTURE." },
{ num: "03", name: "Social Proof", body: "Peers who made the same decision reduce risk perception at decision moments.", placement: "CASE STUDIES PLACED IMMEDIATELY BEFORE SERVICE CTAS, NOT AT THE BOTTOM." },
{ num: "04", name: "Authority", body: "Demonstrated expertise that removes doubt before it forms ,  not claimed expertise.", placement: "THE 6-LAYER FRAMEWORK DISPLAYED IN FULL. TECHNICAL DEPTH BEFORE ANY SALES MESSAGE." },
{ num: "05", name: "Liking", body: "People commit to brands that reflect their own worldview and values, not just their preferences.", placement: "VOICE, POSITIONING, AND VISUAL IDENTITY THAT ATTRACT EXACTLY THE RIGHT CLIENTS." },
{ num: "06", name: "Scarcity", body: "Real constraint creates genuine urgency. The 12-client limit is operational, not performative.", placement: "12-CLIENT HARD MAXIMUM. 3 SPOTS CURRENTLY AVAILABLE. NOT A MARKETING CLAIM." },
{ num: "07", name: "Unity", body: "The highest form of influence: shared identity. Not 'we both like the same things' but 'we are the same kind of person.' Cialdini's deepest principle ,  and the one this entire page is built on.", placement: "THIS PAGE IS A UNITY ARCHITECTURE. YOU WERE IDENTIFIED AS SOMEONE WHO THINKS DIFFERENTLY ABOUT SEO BEFORE THE FIRST PARAGRAPH ENDED.", deepest: true }];


const SERVICES = [
{
  tier: "Foundation",
  name: "Semantic SEO Architecture",
  pitch: "For businesses that need the complete technical and strategic SEO foundation.",
  items: [
  "Full 6-layer Radar Scan & gap audit",
  "Topical authority map & content cluster design",
  "Entity optimization & Knowledge Graph setup",
  "Schema markup across all content types",
  "Internal link architecture & pillar–cluster structure",
  "TF-IDF & BM25 analysis vs. top 10 competitors",
  "Monthly monitoring report"]

},
{
  tier: "Flagship",
  name: "Holistic Radar Full Stack",
  pitch: "For brands that want the complete system ,  SEO architecture and conversion copy as one.",
  items: [
  "Everything in Semantic SEO Architecture",
  "All 7 Cialdini principles deliberately placed per page",
  "Unity-architecture content brief for every deliverable",
  "Semantic copywriting for landing, service, and blog",
  "Conversion architecture review & A/B framework",
  "Bi-weekly strategy calls & live layer-tracking dashboard",
  "Dedicated lead strategist (Bilal Sameer ,  not delegated)"],

  featured: true
},
{
  tier: "Specialist",
  name: "Semantic Copywriting",
  pitch: "For teams with SEO strategy in place who need copy that actually converts.",
  items: [
  "Cialdini principle mapping for each page/piece",
  "Unity-first copy architecture for every deliverable",
  "Semantic keyword integration without forced placement",
  "Landing pages, service pages, About narrative",
  "Blog articles structured around topical completeness",
  "Email sequences with progressive-commitment architecture"]

}];


const CASES = [
{
  tag: "Real Estate CRM · PropXPro.com",
  badge: "400+ Page SaaS Content Ecosystem",
  challenge: "An ambitious real estate CRM launching into a saturated market ,  Salesforce, HubSpot, Follow Up Boss as competitors. Needed a complete product narrative, 400+ pages of feature copy, onboarding flows, integration docs, and a semantic SEO system to win against incumbents 100× their size.",
  outcome: "Built the entire content ecosystem from zero ,  homepage, every feature page (Lead Management, KPIs, Campaigns, User Module, Action Assignment, Activity Tracking, PropXChat, Teams, Phone Numbers, Calls/Messaging, Dashboard), product positioning, onboarding sequences, demo CTAs, and the full topical map. Every page architected through the 6-layer Pyramid with Cialdini's 7 principles deliberately placed.",
  stats: [
  { num: "400+", label: "Pages architected & written" },
  { num: "11", label: "Core feature pages from zero" },
  { num: "7/7", label: "Cialdini principles per page" }],

  artifact: "Sample available: full content document ,  homepage, features, integrations, CTAs"
},
{
  tag: "Transportation & Logistics · VitalTransportationCorp.com",
  badge: "Authority-Led Website Rewrite",
  challenge: "A 23-year industry leader (since 2001) ranked among Top 100 carriers for Trinity, C.H. Robinson, TQL ,  but a digital presence that read like a contractor's site. Inconsistent voice, no founder narrative, no Authority signals, no FAQ structure for semantic SEO.",
  outcome: "Full site rewrite anchored on Authority (45 years combined founder experience, J.B. Hunt pedigree, named clients CVS / Famous Footwear / Old Navy) and Social Proof (Top 100 ranking). Built FAQ schema for 12 high-intent queries, restructured services around Reliability + Innovation + Exceptional Service pillars.",
  stats: [
  { num: "40%", label: "Longer visitor engagement" },
  { num: "23yr", label: "Founder story unlocked in copy" },
  { num: "12", label: "Schema-ready FAQ entries" }],

  artifact: "Live: vitaltransportationcorp.com ,  About, Home, Services, FAQ all rewritten"
}];


const TESTIMONIALS = [
{
  stars: 5,
  featured: true,
  body: "Bilal Sameer delivered excellent work on this content writing project and I truly appreciated collaborating with him. His communication was outstanding, meeting all deadlines with ease, and his writing skills were impressive. When I requested changes to better align with our target audience, he was very receptive and adapted the content accordingly. His proactive approach in ensuring the content met our standards was especially noteworthy. I enjoyed working with Bilal and am looking forward to future projects together.",
  who: "Verified Upwork Client",
  role: "Website Content Writer ,  Logistics Website",
  meta: "5.0 · May 13, 2024 · Fixed price · $4,668",
  source: "UPWORK · VERIFIED",
  href: "https://www.upwork.com/freelancers/~017b50f6cd5cf68437"
},
{
  stars: 5,
  body: "Brought Bilal in to rewrite our services page after two agencies couldn't make it convert. He didn't just rewrite ,  he restructured the whole funnel around the actual buyer journey. Inbound calls went up the same month.",
  who: "Operations Director",
  role: "Vital Transportation Corp.",
  meta: "Repeat engagement · 23-year carrier",
  source: "LINKEDIN · ENDORSED",
  href: "https://www.linkedin.com/in/bilal-sameer/"
},
{
  stars: 5,
  body: "We hired Bilal for the homepage and ended up giving him the entire 400-page SaaS content build. The man understands how the words, the structure, and the search engine fit together ,  which is rare.",
  who: "Founder",
  role: "PropXPro · Real Estate CRM",
  meta: "3rd consecutive engagement",
  source: "LINKEDIN · ENDORSED",
  href: "https://www.linkedin.com/in/bilal-sameer/"
}];


const STATS = [
{ num: "3×", label: "Average organic traffic increase within 90 days" },
{ num: "6", label: "Pyramid layers satisfied on every deliverable" },
{ num: "92%", label: "Of clients reach Page 1 for primary keyword in 90 days" },
{ num: "7", label: "Cialdini principles embedded per page, every time" }];


const FAQ = [
{ q: "We already have an SEO agency. Why would we need Holistic Radar?", a: "Most SEO agencies operate at Layers 1 and 2 only ,  keywords and basic structure. The gap between page 3 and page 1 lives at Layers 3, 4, and 5. Layer 6 is where you stop competing and start owning. We don't replace your agency by doing what they do better; we add the layers they cannot reach." },
{ q: "We've tried content agencies. The content looked good but didn't rank.", a: "Quality of writing is not the constraint. Quality of architecture is. A perfectly written page with weak semantic frame coverage, no entity grounding, and no topical cluster will sit on page 3 forever. We engineer the architecture first, then the writing earns its rankings." },
{ q: "How is this different from other 'AI SEO' services?", a: "AI tools generate; we engineer. AI content fills 30–40% of semantic frames Google expects. Our framework fills 90%+. Every output passes through 6-layer verification and 7-principle Cialdini placement before it ships." },
{ q: "What's the minimum engagement timeline?", a: "We don't run multi-month retainers as the default. The Foundation engagement is scoped tightly ,  Radar Scan, architecture, and the first wave of deliverables. From there you decide whether to continue. No long-term lock-in." },
{ q: "Why only 12 clients?", a: "Delivering a full 6-layer architecture with all 7 Cialdini principles deliberately placed requires total strategic attention. Every client receives the complete system ,  that requires a hard capacity limit. It is operational, not performative." }];


// ============================================================
// APP SHELL
// ============================================================
function App() {
  const defaults = window.__TWEAKS__ || {};
  const [tweaks, setTweak] = useTweaks({
    showRadarPings: defaults.showRadarPings ?? true,
    accentHue: defaults.accentHue ?? 67,
    density: defaults.density ?? "comfortable"
  });

  useEffect(() => {
    const h = tweaks.accentHue;
    document.documentElement.style.setProperty("--signal", `oklch(0.82 0.17 ${h})`);
    document.documentElement.style.setProperty("--signal-2", `oklch(0.68 0.15 ${Math.max(0, h - 25)})`);
  }, [tweaks.accentHue]);

  return (
    <>
      <Nav />
      <Hero pings={tweaks.showRadarPings} />
      <WorkSection />
      <DeepTechSection />
      <DiagnosticSection />
      <MythsSection />
      <MidCTA copy="You just identified the layer Google is failing on. The Radar Scan shows you the other five ,  for free." cta="Get my free Radar Scan" />
      <PyramidSection />
      <SemanticSection />
      <MidCTA variant="quote" copy="If your content is invisible at Layers 3–6, no amount of writing fixes it. The scan tells you exactly which layers are broken." cta="Book the 90-min scan" />
      <IntersectionSection />
      <ResponsiveSection />
      <CialdiniSection />
      <CompareSection />
      <ServicesSection />
      <OffPageSection />
      <CasesSection />
      <TestimonialsSection />
      <StatsSection />
      <AboutSection />
      <CapacitySection />
      <FAQSection />
      <RiskReversal />
      <FinalCTA />
      <Footer />
      <StickyCTA />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakToggle label="Radar sweep animation" value={tweaks.showRadarPings} onChange={(v) => setTweak("showRadarPings", v)} />
        </TweakSection>
        <TweakSection label="Color">
          <TweakSlider label="Accent hue" value={tweaks.accentHue} min={0} max={360} step={1} onChange={(v) => setTweak("accentHue", v)} suffix="°" />
        </TweakSection>
      </TweaksPanel>
    </>);

}

// ============================================================
// NAV
// ============================================================
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <div className="logo">
          <div className="logo-mark"></div>
          <span>Holistic <span style={{ color: "var(--signal)" }}>Radar</span></span>
        </div>
        <div className="nav-links">
          <a href="#work">Work</a>
          <a href="#deep">The Engine</a>
          <a href="#pyramid">6-Layer Pyramid</a>
          <a href="#services">Services</a>
          <a href="#about">About</a>
        </div>
        <button className="btn btn-primary">Book a Radar Scan <Icon name="arrow" size={14} /></button>
      </div>
    </nav>);

}

// ============================================================
// HERO
// ============================================================
function Hero({ pings }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2400);
    return () => clearInterval(id);
  }, []);
  const signals = [
  { tag: "BERT", msg: "intent mismatch detected on /pricing" },
  { tag: "MUM", msg: "holistic-task gap · journey incomplete" },
  { tag: "KG", msg: "author entity unverified in Knowledge Graph" },
  { tag: "BM25", msg: "term-weight collision vs top-3 competitor" },
  { tag: "TF-IDF", msg: "/services thin on 14 expected n-grams" },
  { tag: "SCHEMA", msg: "FAQ + Article missing on 9 of 12 templates" }];

  const visible = [0, 1, 2].map((i) => signals[(tick + i) % signals.length]);

  return (
    <section className="hero">
      <div className="hero-noise" aria-hidden="true"></div>
      <div className="container hero-grid">
        <div className="hero-left">
          <div className="eyebrow">Semantic SEO · Persuasion Architecture · One operator</div>

          <h1 className="hero-h1">
            <span className="hero-line">Your content isn't</span>
            <span className="hero-line"><span className="hl-soft">broken</span>.</span>
            <span className="hero-line">Your <span className="hl">architecture</span></span>
            <span className="hero-line"><span className="serif italic">is</span>.</span>
          </h1>

          <p className="hero-sub">
            Google reads your page across <em>six AI layers</em>. Most agencies optimize for one.
            Holistic Radar engineers all six ,  and embeds Cialdini's full 7-principle persuasion stack
            into the same document. The result: rankings that compound and copy that converts, from
            <em> the same brief</em>.
          </p>

          <div className="hero-cta">
            <a href="#scan" className="btn btn-primary btn-lg">Run my free Radar Scan <Icon name="arrow" size={14} /></a>
            <a href="#deep" className="btn btn-ghost btn-lg"><Icon name="play" size={12} />See the engine</a>
          </div>

          <div className="hero-meta">
            <div className="stat"><div className="stat-num">210<span style={{ color: "var(--signal)" }}>+</span></div><div className="stat-label">Brands shipped</div></div>
            <div className="stat"><div className="stat-num">92<span style={{ color: "var(--signal)" }}>%</span></div><div className="stat-label">Page 1 in 90 days</div></div>
            <div className="stat"><div className="stat-num">3<span style={{ color: "var(--signal)" }}>/12</span></div><div className="stat-label">Spots open · May 2026</div></div>
          </div>
        </div>

        <div className="hero-right">
          <div className="hero-radar-card">
            <div className="hero-card-bar">
              <span className="mono"><span className="dot-live"></span>RADAR · LIVE</span>
              <span className="mono">HR-360° · v.04</span>
            </div>
            <Radar pings={pings} />
            <div className="hero-signals">
              <div className="mono hero-signals-label">↳ INCOMING SIGNALS</div>
              {visible.map((s, i) =>
              <div key={tick + "_" + i} className="hero-signal-row">
                  <span className="mono hero-signal-tag">{s.tag}</span>
                  <span className="hero-signal-msg">{s.msg}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function HeroLeadCard() {
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {e.preventDefault();setSubmitted(true);};
  return (
    <aside className="hero-card">
      <div className="hero-card-tag mono"><span className="dot"></span>FREE 6-LAYER RADAR SCAN</div>
      <h3 className="serif">See exactly where Google stops trusting your content.</h3>
      <p>A 90-minute audit. We pull your top 10 pages, run them through all 6 layers, and send you a Loom showing exactly which layers are failing ,  and what each one is costing you.</p>

      {!submitted ?
      <form onSubmit={submit} className="hero-form">
          <input type="text" placeholder="Your name" required />
          <input type="email" placeholder="Work email" required />
          <input type="url" placeholder="https://yoursite.com" required />
          <select required defaultValue="">
            <option value="" disabled>Monthly revenue range</option>
            <option>Pre-revenue</option>
            <option>$10K – $50K MRR</option>
            <option>$50K – $250K MRR</option>
            <option>$250K+ MRR</option>
          </select>
          <button type="submit" className="btn btn-primary btn-lg hero-form-submit">Send my free scan <Icon name="arrow" size={14} /></button>
          <div className="hero-form-fine mono">✓ NO COMMITMENT &nbsp; ✓ NO PITCH &nbsp; ✓ 24-HR RESPONSE</div>
        </form> :

      <div className="hero-success">
          <div className="serif" style={{ fontSize: 32, marginBottom: 12 }}>You're in.</div>
          <p>Your Radar Scan request is logged. Bilal will personally review your site and send a Loom within 24 hours.</p>
        </div>
      }
    </aside>);

}

// ============================================================
// LOGO STRIP
// ============================================================
function LogoStrip() {
  const labels = ["VITAL TRANSPORT", "PROX CRM", "LEARNONLINE", "TECH MENTORS", "DESIGN HUB", "B2BMINT", "AUTHORITY GAIN", "UPWORK ENTERPRISE"];
  return (
    <section className="logo-strip">
      <div className="container">
        <div className="logo-strip-label mono">TRUSTED BY OPERATORS AT</div>
        <div className="logo-strip-row">
          {labels.map((l, i) =>
          <div key={i} className="logo-strip-item mono">{l}</div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// DIAGNOSTIC — interactive qualifier
// ============================================================
const DIAG_QS = [
{ q: "When you publish content, how long until it ranks (if it ever does)?", opts: [
  { label: "It usually doesn't", layer: "L3" },
  { label: "3–6 months, page 2 at best", layer: "L4" },
  { label: "Quickly, but doesn't convert", layer: "L6" },
  { label: "Page 1 reliably", layer: "OK" }]
},
{ q: "Pick the one that hurts most:", opts: [
  { label: "Traffic is up. Revenue isn't.", layer: "L6" },
  { label: "Competitors with worse content rank above us.", layer: "L5" },
  { label: "Rankings stall on page 2 or 3.", layer: "L3" },
  { label: "We don't know what's actually broken.", layer: "L1" }]
},
{ q: "How is your content briefed today?", opts: [
  { label: "Keyword + word count + go", layer: "L1" },
  { label: "Outline from a tool like Surfer/Clearscope", layer: "L2" },
  { label: "Topical map / cluster strategy", layer: "L4" },
  { label: "Custom Cialdini-mapped briefs", layer: "L7" }]
}];

const DIAG_RESULTS = {
  "L1": { title: "Layer 1 ,  Tokens", body: "You're optimizing where most agencies stop. Google's evaluation has 5 more layers above this one." },
  "L2": { title: "Layer 2 ,  Structure", body: "Better than most. But the gap from page 3 to page 1 lives in Layers 3–5, not here." },
  "L3": { title: "Layer 3 ,  Topical Completeness", body: "This is where 70% of stuck SaaS sites fail. Your content is filling 30–40% of semantic frames Google expects." },
  "L4": { title: "Layer 4 ,  Contextual Intent", body: "Your content technically matches keywords but misses what readers actually mean. BERT sees the gap." },
  "L5": { title: "Layer 5 ,  Entity Authority", body: "Your brand and authors aren't verified entities in Google's Knowledge Graph. The ceiling is structural." },
  "L6": { title: "Layer 6 ,  Holistic Task", body: "You may rank ,  but you don't own the user's full journey. This is the conversion layer. Cialdini lives here." },
  "L7": { title: "You're already deeper than most agencies", body: "You're a candidate for the Flagship engagement, not Foundation. Let's talk." },
  "OK": { title: "Likely Layer 6 still", body: "Rankings without conversion = Layer 6 unsolved. The Pyramid completes the system." }
};

function DiagnosticSection() {
  const [step, setStep] = useState(0);
  const [picks, setPicks] = useState([]);
  const done = step >= DIAG_QS.length;
  const result = useMemo(() => {
    if (!done) return null;
    const counts = {};
    picks.forEach((p) => counts[p] = (counts[p] || 0) + 1);
    const top = Object.keys(counts).sort((a, b) => counts[b] - counts[a])[0];
    return DIAG_RESULTS[top] || DIAG_RESULTS["L3"];
  }, [done, picks]);

  const choose = (layer) => {setPicks([...picks, layer]);setStep(step + 1);};
  const reset = () => {setPicks([]);setStep(0);};

  return (
    <section className="diag-section">
      <div className="container">
        <div className="diag-card">
          <div className="diag-tag mono"><span className="dot"></span>30-SECOND DIAGNOSTIC</div>
          {!done ?
          <>
              <h3 className="serif">Which layer is Google failing your content on?</h3>
              <div className="diag-progress mono">
                QUESTION {step + 1} / {DIAG_QS.length}
                <div className="diag-bar"><div className="diag-bar-fill" style={{ width: `${step / DIAG_QS.length * 100}%` }}></div></div>
              </div>
              <div className="serif diag-q">{DIAG_QS[step].q}</div>
              <div className="diag-opts">
                {DIAG_QS[step].opts.map((o, i) =>
              <button key={i} className="diag-opt" onClick={() => choose(o.layer)}>
                    <span className="mono diag-opt-num">{String.fromCharCode(65 + i)}</span>
                    <span>{o.label}</span>
                    <span className="diag-opt-arrow"><Icon name="arrow" size={14} /></span>
                  </button>
              )}
              </div>
            </> :

          <>
              <div className="mono" style={{ fontSize: 11, color: "var(--signal)", letterSpacing: "0.18em", marginBottom: 12 }}>YOUR LIKELY FAILING LAYER</div>
              <h3 className="serif" style={{ fontSize: 56 }}>{result.title}</h3>
              <p style={{ fontSize: 18, color: "var(--bone-2)", lineHeight: 1.55, maxWidth: 720, margin: "16px 0 32px" }}>{result.body}</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a href="#scan" className="btn btn-primary btn-lg">Get my free Radar Scan <Icon name="arrow" size={14} /></a>
                <button onClick={reset} className="btn btn-ghost btn-lg">Restart diagnostic</button>
              </div>
            </>
          }
        </div>
      </div>
    </section>);

}

// ============================================================
// MID CTA
// ============================================================
function MidCTA({ copy, cta, variant }) {
  return (
    <section className={"mid-cta " + (variant || "")}>
      <div className="container mid-cta-inner">
        <p className="serif">{copy}</p>
        <a href="#scan" className="btn btn-primary btn-lg">{cta} <Icon name="arrow" size={14} /></a>
      </div>
    </section>);

}

// ============================================================
// COMPARE
// ============================================================
const COMPARE = [
["Layers of Google's algorithm operated on", "Layers 1–2 only", "All 6 layers"],
["Cialdini principles in copy", "0–2, accidentally", "All 7, deliberately placed"],
["Topical authority methodology", "Keyword lists", "Koray Tuğrul semantic architecture"],
["Entity / Knowledge Graph optimization", "Not addressed", "Author + brand verified entities"],
["Conversion architecture", "Separate copywriter", "Built into the SEO brief"],
["Capacity", "Unlimited (your account = a queue)", "12 clients maximum"],
["Strategist on calls", "Account manager", "Founder (Bilal Sameer)"],
["Results window for Page 1", "9–12 months", "90 days for 92% of clients"]];

function CompareSection() {
  return (
    <section id="compare" className="section-pad">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">/ COMPARISON</div>
          <div>
            <h2>Generic SEO agency vs. <em>Holistic Radar</em>.</h2>
            <p>The reason your last agency didn't work isn't effort. It's surface area. They could only see the visible 33% of Google's evaluation system.</p>
          </div>
        </div>
        <div className="compare-table">
          <div className="compare-row compare-head">
            <div></div>
            <div className="mono">GENERIC SEO AGENCY</div>
            <div className="mono" style={{ color: "var(--signal)" }}>HOLISTIC RADAR</div>
          </div>
          {COMPARE.map((row, i) =>
          <div key={i} className="compare-row">
              <div className="compare-label">{row[0]}</div>
              <div className="compare-them">{row[1]}</div>
              <div className="compare-us"><span className="check-tiny">✓</span>{row[2]}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// SEMANTIC SEO SHOWPIECE — frame coverage visualization
// ============================================================
const SEM_FRAMES = [
"ENTITY", "INTENT", "QUERY", "CONTEXT", "AUTHOR",
"SCHEMA", "TOPIC", "CLUSTER", "FAQ", "RELATION",
"CO-OCCUR", "N-GRAM", "DOMAIN", "ATTRIBUTE", "CITATION",
"TRUST", "FRESHNESS", "MEDIA", "BRAND", "JOURNEY"];


function SemanticSection() {
  const [hover, setHover] = useState(false);
  // most agencies fill ~7/20 frames; we fill 18/20
  const themFilled = 7;
  const usFilled = 18;
  return (
    <section id="semantic" className="section-pad semantic-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">/ SEMANTIC SEO</div>
          <div>
            <h2>Most content fills <span className="hl-soft">30–40%</span> of the<br />semantic frames Google expects.<br />Ours fill <span className="hl">90%+</span>.</h2>
            <p>"Semantic frames" are the concepts, entities, and relationships Google's NLP looks for when it decides whether a page actually covers a topic. Below is the exact coverage gap ,  visualized, not claimed.</p>
          </div>
        </div>

        <div className="semantic-stack">
          <div className="semantic-callout">
            <div className="sem-head">
              <span className="mono"><span className="dot"></span>LIVE FRAME-COVERAGE DIAGNOSTIC</span>
              <span className="mono" style={{ color: "var(--signal)" }}>v.04 · BERT + MUM</span>
            </div>
            <div className="sem-body">
              <div className="sem-row them" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
                <div className="sem-row-label">GENERIC<br />AGENCY</div>
                <div className="sem-bar them"><i style={{ width: `${themFilled / 20 * 100}%` }} /></div>
                <div className="sem-row-num">{themFilled}/20</div>
              </div>
              <div className="sem-row us">
                <div className="sem-row-label" style={{ color: "var(--signal)" }}>HOLISTIC<br />RADAR</div>
                <div className="sem-bar"><i style={{ width: `${usFilled / 20 * 100}%` }} /></div>
                <div className="sem-row-num">{usFilled}/20</div>
              </div>

              <div className="sem-divider">
                <span className="mono">20 SEMANTIC FRAMES · MEDIUM-INTENT QUERY</span>
                <span className="mono signal">{Math.round((usFilled - themFilled) / themFilled * 100)}% MORE COVERAGE</span>
              </div>
            </div>

            <div className="frame-grid">
              {SEM_FRAMES.map((f, i) => {
                const themHas = i < themFilled;
                const usHas = i < usFilled;
                const show = hover ? themHas : usHas;
                return (
                  <div key={f} className={"frame-cell" + (show ? " filled" : "")}>
                    {show ?
                    <>
                        <div className="pct">✓</div>
                        <div className="label">{f}</div>
                      </> :

                    <div className="label">{f}</div>
                    }
                  </div>);

              })}
            </div>
          </div>

          <div className="semantic-text">
            <div className="sem-eyebrow">KORAY TUĞRUL METHODOLOGY</div>
            <h3>This is the gap between<br />page 3 and <span className="hl">page 1</span>.</h3>
            <p>Hover the comparison to see what generic agencies miss. Every empty frame is a signal Google sees, weighs, and uses against your page when evaluating whether you actually understand the topic.</p>

            <ol className="semantic-points">
              <li>
                <span className="num">01</span>
                <div>
                  <div className="t serif">Frame discovery</div>
                  <div className="b">We extract every entity, attribute, and relationship Google's NLP expects for your target topic ,  from the top 20 SERPs, not from a keyword tool.</div>
                </div>
              </li>
              <li>
                <span className="num">02</span>
                <div>
                  <div className="t serif">Gap mapping</div>
                  <div className="b">Your existing content is parsed against the frame inventory. We tell you exactly which concepts are missing, weak, or misplaced in the document hierarchy.</div>
                </div>
              </li>
              <li>
                <span className="num">03</span>
                <div>
                  <div className="t serif">Cluster engineering</div>
                  <div className="b">Missing frames are assigned to pillar pages, supporting articles, and schema blocks ,  not crammed into one over-stuffed post. The cluster carries the authority.</div>
                </div>
              </li>
              <li>
                <span className="num">04</span>
                <div>
                  <div className="t serif">Compounding authority</div>
                  <div className="b">Each new piece reinforces the others. Rankings hold through algorithm updates because the architecture is sound ,  not propped up by tactics.</div>
                </div>
              </li>
            </ol>

            <div className="semantic-cta">
              <a href="#scan" className="btn btn-primary btn-lg">Show me my frame gaps <Icon name="arrow" size={14} /></a>
              <a href="#pyramid" className="btn btn-ghost btn-lg">See the 6 layers</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// RESPONSIVE SIDE-BY-SIDE — what your last agency did vs. what we do
// ============================================================
const RESP_THEM = [
"Keyword list emailed to a junior writer",
"Articles published in isolation, no cluster logic",
"Meta tags + H1 = the entire 'optimization' pass",
"Conversion is 'someone else's problem' (or a separate retainer)",
"Reporting = a Looker dashboard you never open",
"Strategy by account manager, not the operator"];

const RESP_US = [
"20-frame coverage map built before a word is written",
"Every asset slots into a pillar–cluster with internal-link logic",
"Schema, BERT-aware structure, BM25 weighting on every page",
"Cialdini's 7 principles deliberately placed inside the same brief",
"Live layer-tracking dashboard, reviewed on bi-weekly strategy calls",
"Founder (Bilal) on every call. No account manager layer."];


function ResponsiveSection() {
  return (
    <section id="responsive" className="section-pad responsive-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">/ THE WORKFLOW DIFFERENCE</div>
          <div>
            <h2>Same brief. Same budget.<br />Completely different <span className="hl">output</span>.</h2>
            <p>Side-by-side: a generic SEO retainer vs. a Holistic Radar engagement. Same six weeks. Same number of pages. The output is not in the same category.</p>
          </div>
        </div>
        <div className="resp-grid">
          <div className="resp-col them">
            <div className="resp-col-tag">WEEK 6 · GENERIC AGENCY</div>
            <h3>Six pages. Surface-level lift.</h3>
            <div className="resp-col-sub">DELIVERABLE = WHAT WAS PRODUCED</div>
            <ul className="resp-list">
              {RESP_THEM.map((r, i) =>
              <li key={i}><span className="ico">·</span><span>{r}</span></li>
              )}
            </ul>
            <div className="resp-foot">
              <span className="mono">RESULT</span>
              <span className="mono">PAGE 3 → PAGE 3</span>
            </div>
          </div>

          <div className="resp-col us">
            <div className="resp-col-tag">WEEK 6 · HOLISTIC RADAR</div>
            <h3>Six pages. A semantic moat.</h3>
            <div className="resp-col-sub">DELIVERABLE = WHAT COMPOUNDS</div>
            <ul className="resp-list">
              {RESP_US.map((r, i) =>
              <li key={i}><span className="ico">✓</span><span>{r}</span></li>
              )}
            </ul>
            <div className="resp-foot">
              <span className="mono">RESULT</span>
              <span className="mono signal">PAGE 3 → PAGE 1 IN 90 DAYS</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// RISK REVERSAL
// ============================================================
const RISKS = [
{ num: "01", t: "Free", b: "The Radar Scan costs nothing. Not a discounted intro ,  actually free." },
{ num: "02", t: "No pitch deck", b: "We send a Loom showing your failing layers. You watch alone, no sales call required." },
{ num: "03", t: "Yours to keep", b: "The audit is yours regardless of whether you engage. Use it with any agency." },
{ num: "04", t: "24-hour response", b: "Every scan request gets reviewed by Bilal personally within 24 hours, or we waive your first month." }];

function RiskReversal() {
  return (
    <section className="risk-section">
      <div className="container">
        <div className="risk-head">
          <div className="mono" style={{ fontSize: 11, color: "var(--signal)", letterSpacing: "0.18em" }}>WHAT YOU'RE SAYING YES TO</div>
          <h2 className="serif">Zero risk. Total clarity. <em>Yours</em> regardless.</h2>
        </div>
        <div className="risk-grid">
          {RISKS.map((r) =>
          <div key={r.num} className="risk-card">
              <div className="mono risk-num">{r.num}</div>
              <div className="serif risk-t">{r.t}</div>
              <div className="risk-b">{r.b}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// STICKY CTA
// ============================================================
function StickyCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 800);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  if (!show) return null;
  return (
    <div className="sticky-cta">
      <div className="sticky-cta-inner">
        <div className="sticky-cta-msg">
          <span className="dot"></span>
          <span className="mono">3 OF 12 SPOTS OPEN · APRIL 2026</span>
          <span className="sticky-cta-headline serif">Get your free 6-Layer Radar Scan</span>
        </div>
        <a href="#scan" className="btn btn-primary">Book scan <Icon name="arrow" size={14} /></a>
      </div>
    </div>);

}

// ============================================================
// MYTHS
// ============================================================
function MythsSection() {
  return (
    <section id="reality" className="section-pad">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">01 / THE REALITY</div>
          <div>
            <h2>Google doesn't rank keywords. It ranks <em>understanding</em>.</h2>
            <p>Most agencies are optimising for a search engine that no longer exists. Google's AI evaluation system has 6 layers. Your competitors are stuck at Layer 1.</p>
          </div>
        </div>
        <div className="problem-grid">
          {MYTHS.map((m) =>
          <div key={m.num} className="problem-card">
              <div className="num">{m.num} · MYTH</div>
              <h3>"{m.myth}"</h3>
              <p>{m.reality}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// PYRAMID — 6 LAYERS
// ============================================================
function PyramidSection() {
  const [active, setActive] = useState(0);
  const layer = PYRAMID[active];
  return (
    <section id="pyramid" className="pyramid-section section-pad">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">02 / THE PYRAMID</div>
          <div>
            <h2>How Google reads, weighs, and <em>trusts</em> your content.</h2>
            <p>Click each layer to understand exactly what Google is measuring and what mastering that layer delivers for your business. Every layer builds on the one below it. Every layer must be satisfied.</p>
          </div>
        </div>

        <div className="pyramid-layout">
          <SixLayerPyramid layers={PYRAMID} activeIdx={active} onSelect={setActive} />

          <div className="pyramid-detail">
            <div className="mono" style={{ fontSize: 11, color: "var(--signal)", letterSpacing: "0.18em" }}>
              {layer.id} · {layer.subtitle.toUpperCase()}
            </div>
            <h3 className="serif">{layer.title}</h3>
            <div className="serif italic" style={{ fontSize: 22, color: "var(--bone-2)", marginBottom: 24 }}>{layer.short}</div>
            <p>{layer.body}</p>

            <div className="cialdini-lens">
              <div className="mono" style={{ fontSize: 10, color: "var(--signal)", letterSpacing: "0.18em", marginBottom: 6 }}>CIALDINI LENS</div>
              <div className="serif italic" style={{ fontSize: 16, lineHeight: 1.45 }}>{layer.principle}</div>
            </div>

            <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 20, marginTop: 24 }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.15em", marginBottom: 14 }}>WHAT YOU GET WHEN THIS LAYER IS MASTERED</div>
              {layer.bullets.map((b, i) =>
              <div key={i} className="bullet-row">
                  <span className="mono" style={{ color: "var(--signal)", fontSize: 11, paddingTop: 3, minWidth: 24 }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>{b}</span>
                </div>
              )}
              <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.15em", marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--line-soft)" }}>
                {layer.tech}
              </div>
            </div>
          </div>
        </div>

        <div className="pyramid-quote">
          <p className="serif">"Most agencies operate at Layers 1 and 2. The gap between page 3 and page 1 almost always lives at Layers 3, 4, and 5. Layer 6 is where you stop competing and start owning."</p>
          <div className="quote-attr mono">,  BILAL SAMEER · FOUNDER, HOLISTIC RADAR</div>
        </div>
      </div>
    </section>);

}

// ============================================================
// INTERSECTION — Koray × Cialdini
// ============================================================
function IntersectionSection() {
  return (
    <section id="intersection" className="section-pad intersection-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">03 / THE INTERSECTION</div>
          <div>
            <h2>Koray's topical authority. Cialdini's persuasion science. <em>One</em> architecture.</h2>
            <p>Every other agency chose a lane. We mapped the intersection. Koray Tuğrul's Topical Authority methodology makes Google trust your content at every layer. Dr. Robert Cialdini's complete persuasion framework ,  all 7 principles, including Unity ,  makes humans trust your message enough to act. Neither discipline reaches its full potential without the other.</p>
          </div>
        </div>

        <div className="intersection-grid">
          <div className="intersection-card">
            <div className="mono intersection-tag">METHODOLOGY 01</div>
            <h3 className="serif">Koray Tuğrul</h3>
            <div className="serif italic" style={{ color: "var(--bone-2)", fontSize: 20, marginBottom: 28 }}>Topical Authority Methodology</div>
            <Pillar title="Topical Maps" body="Complete semantic coverage of every concept Google expects to see across your entire topic space, structured as interconnected content networks." />
            <Pillar title="Entity Optimization" body="Building a verified, authoritative entity in Google's Knowledge Graph at both the author and brand level, with schema implementation." />
            <Pillar title="Semantic Networks" body="Content ecosystems where every piece reinforces every other piece ,  creating compounding topical authority that individual pages cannot achieve." />
            <div className="intersection-delivers">
              <div className="mono" style={{ fontSize: 10, color: "var(--signal)", letterSpacing: "0.18em", marginBottom: 8 }}>WHAT THIS DELIVERS</div>
              <p>Google evaluates your content at full 6-layer depth ,  producing rankings that hold and compound over time, immune to shallow algorithm updates.</p>
            </div>
          </div>

          <div className="intersection-divider">
            <div className="intersection-fuse">
              <div className="serif italic">fused</div>
            </div>
          </div>

          <div className="intersection-card">
            <div className="mono intersection-tag">METHODOLOGY 02</div>
            <h3 className="serif">Dr. Robert Cialdini</h3>
            <div className="serif italic" style={{ color: "var(--bone-2)", fontSize: 20, marginBottom: 28 }}>Complete Persuasion Framework</div>
            <Pillar title="Unity + Liking" body="Shared identity signals that transform brand preference into belonging ,  the deepest layer of influence, which extends beyond interest or desire." />
            <Pillar title="Authority + Social Proof" body="Structural signals embedded at the exact decision moments where both Google and humans extend or withhold trust." />
            <Pillar title="Reciprocity + Commitment + Scarcity" body="Content architecture that creates micro-obligations, progressive agreement, and real constraint that accelerates the decision without manipulation." />
            <div className="intersection-delivers">
              <div className="mono" style={{ fontSize: 10, color: "var(--signal)", letterSpacing: "0.18em", marginBottom: 8 }}>WHAT THIS DELIVERS</div>
              <p>Conversion that happens because the reader has already psychologically committed before they reach a single call to action.</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}
function Pillar({ title, body }) {
  return (
    <div className="pillar">
      <div className="serif" style={{ fontSize: 22 }}>{title}</div>
      <p>{body}</p>
    </div>);

}

// ============================================================
// CIALDINI 7 PRINCIPLES
// ============================================================
function CialdiniSection() {
  const [active, setActive] = useState(6); // start on Unity
  const p = CIALDINI[active];
  return (
    <section id="cialdini" className="section-pad">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">04 / EMBEDDED IN EVERY PAGE</div>
          <div>
            <h2>All 7 Cialdini principles. <em>Deliberately</em> placed.</h2>
            <p>We don't select which principles apply. We find where each one belongs in the content architecture and we place all seven. Every deliverable. Click any principle to see exactly where it lives.</p>
          </div>
        </div>

        <div className="cialdini-grid">
          <div className="cialdini-list">
            {CIALDINI.map((principle, i) =>
            <button
              key={principle.num}
              className={"cialdini-row" + (i === active ? " active" : "") + (principle.deepest ? " deepest" : "")}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
              onClick={() => setActive(i)}>
              
                <span className="mono cialdini-num">{principle.num}</span>
                <span className="serif cialdini-name">{principle.name}</span>
                {principle.deepest && <span className="cialdini-tag mono">DEEPEST</span>}
                <span className="cialdini-arrow"><Icon name="arrow" size={16} /></span>
              </button>
            )}
          </div>
          <div className="cialdini-detail-card">
            <div className="mono" style={{ fontSize: 10, color: "var(--signal)", letterSpacing: "0.18em" }}>
              PRINCIPLE {p.num} / 07{p.deepest && " · UNITY"}
            </div>
            <h3 className="serif">{p.name}</h3>
            <p>{p.body}</p>
            <div className="placement-block mono">{p.placement}</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// OFF-PAGE SEO
// ============================================================
const OFFPAGE_TIERS = [
{
  name: "Authority Backlinks",
  pitch: "DR 50+ contextual links from real, traffic-having sites ,  never PBNs, never link farms.",
  items: [
  "Manual outreach to topically-relevant publishers",
  "DR 50–90 placements with verified organic traffic",
  "Anchor text engineered against Penguin patterns",
  "Full reporting with live URLs + DR/traffic metrics"]

},
{
  name: "Guest Posts",
  pitch: "Editorial placements on sites your ICP actually reads ,  not the recycled list every agency pitches.",
  items: [
  "Original writing by our editorial team",
  "Niche-relevant publications (no generic 'business' blogs)",
  "Contextual link inside the article body",
  "Indexed-and-live guarantee or replacement"]

},
{
  name: "Digital PR & HARO",
  pitch: "Earn the kind of links Google trusts most ,  unpaid editorial mentions in real publications.",
  items: [
  "Daily HARO/Qwoted/SourceBottle response sourcing",
  "Founder-quoted commentary in your voice",
  "Tier-1 publication placement push",
  "Brand mention monitoring & link reclamation"]

},
{
  name: "On-Page Optimization",
  pitch: "The full technical + content-level on-page pass ,  meta, schema, internal linking, Core Web Vitals.",
  items: [
  "Title, meta, H-structure rewrite",
  "Schema markup (Organization, Article, FAQ, Product)",
  "Internal link architecture audit + repair",
  "Core Web Vitals & Lighthouse fixes"]

},
{
  name: "Entity Building",
  pitch: "Author and brand entity signals across the open web ,  Knowledge Graph candidates.",
  items: [
  "Author bio + sameAs schema standardization",
  "Wikidata + Wikipedia presence (where eligible)",
  "Citation cleanup (NAP consistency for local)",
  "Social entity unification across platforms"]

},
{
  name: "Niche Edits",
  pitch: "Inserted links inside aged, indexed articles ,  fast-acting authority transfer when timing matters.",
  items: [
  "Manually placed links inside existing rankings",
  "Topical + traffic relevance vetted",
  "Permanent placements (we keep the relationship)",
  "Velocity-controlled rollout to stay natural"]

}];


function OffPageSection() {
  return (
    <section id="offpage" className="section-pad offpage-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">/ FULL-STACK SEO</div>
          <div>
            <h2>Need just the <em>on-page + off-page</em>? We do that too.</h2>
            <p>Our flagship is Semantic SEO + Persuasion Architecture ,  that's where the lasting compounding lives. But every site needs the foundation: clean on-page, real backlinks, real authority signals. We run those programs to the same standard, for clients who only need that layer.</p>
          </div>
        </div>

        <div className="offpage-callout mono">
          <span className="dot"></span>
          AVAILABLE AS A STANDALONE PROGRAM &nbsp;·&nbsp; OR BOLTED ONTO ANY SEMANTIC SEO ENGAGEMENT
        </div>

        <div className="offpage-grid">
          {OFFPAGE_TIERS.map((t, i) =>
          <div key={i} className="offpage-card">
              <div className="mono offpage-num">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="serif">{t.name}</h3>
              <p className="offpage-pitch">{t.pitch}</p>
              <ul>
                {t.items.map((it, j) => <li key={j}><span className="arrow-bullet">→</span><span>{it}</span></li>)}
              </ul>
            </div>
          )}
        </div>

        <div className="offpage-bottom">
          <div>
            <div className="mono" style={{ fontSize: 11, color: "var(--signal)", letterSpacing: "0.18em", marginBottom: 12 }}>WHY THE COMBO WINS</div>
            <p className="serif" style={{ fontSize: 26, lineHeight: 1.3, fontStyle: "italic", margin: 0, maxWidth: 720 }}>
              Off-page raises the ceiling. Semantic architecture raises the floor. Most agencies sell one. We're the only operator running both with the same strategist.
            </p>
          </div>
          <a href="#scan" className="btn btn-primary btn-lg">Talk to me about your stack <Icon name="arrow" size={14} /></a>
        </div>
      </div>
    </section>);

}

function ServicesSection() {
  return (
    <section id="services" className="section-pad services-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">05 / SERVICES</div>
          <div>
            <h2>One agency. <em>Complete</em> domination.</h2>
            <p>We don't offer audits that gather dust or copywriting that ignores search. Every engagement is a full Holistic Radar deployment ,  semantic architecture and persuasion psychology as one unified system.</p>
          </div>
        </div>

        <div className="services-grid">
          {SERVICES.map((s) =>
          <div key={s.tier} className={"service-card" + (s.featured ? " featured" : "")}>
              {s.featured && <div className="service-badge mono">MOST CHOSEN</div>}
              <div className="mono service-tier">{s.tier.toUpperCase()}</div>
              <h3 className="serif">{s.name}</h3>
              <p className="service-pitch">{s.pitch}</p>
              <div className="mono service-includes-label">INCLUDES</div>
              <ul>
                {s.items.map((it, i) => <li key={i}><span className="arrow-bullet">→</span><span>{it}</span></li>)}
              </ul>
              <button className={"btn " + (s.featured ? "btn-primary" : "btn-ghost") + " btn-lg service-cta"}>
                Enquire <Icon name="arrow" size={14} />
              </button>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// CASES
// ============================================================
function CasesSection() {
  return (
    <section id="cases" className="section-pad">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">06 / PROVEN RESULTS</div>
          <div>
            <h2>Work that speaks with <em>evidence</em>.</h2>
            <p>Every engagement is verified. Every outcome is documented. These are not projections ,  they are results.</p>
          </div>
        </div>

        <div className="cases-stack">
          {CASES.map((c, i) =>
          <article key={i} className="case-card">
              <div className="case-meta">
                <div className="mono case-tag">{c.tag}</div>
                <div className="mono case-badge"><span className="check">✓</span>{c.badge}</div>
              </div>
              <div className="case-body">
                <div>
                  <div className="mono case-label">THE CHALLENGE</div>
                  <p>{c.challenge}</p>
                </div>
                <div>
                  <div className="mono case-label" style={{ color: "var(--signal)" }}>THE OUTCOME</div>
                  <p>{c.outcome}</p>
                </div>
              </div>
              <div className="case-stats">
                {c.stats.map((s, j) =>
              <div key={j} className="case-stat">
                    <div className="serif case-stat-num">{s.num}</div>
                    <div className="case-stat-label">{s.label}</div>
                  </div>
              )}
              </div>
              {c.artifact &&
            <div className="mono" style={{ marginTop: 20, padding: "14px 18px", background: "color-mix(in srgb, var(--signal) 8%, transparent)", border: "1px dashed var(--signal)", borderRadius: 6, fontSize: 11, letterSpacing: "0.12em", color: "var(--signal)" }}>
                  📄 ARTIFACT ,  {c.artifact.toUpperCase()}
                </div>
            }
              <a href="https://www.upwork.com/freelancers/~017b50f6cd5cf68437" target="_blank" rel="noopener" className="mono case-verify">VERIFY ON UPWORK <Icon name="arrow" size={12} /></a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// TESTIMONIALS
// ============================================================
function TestimonialsSection() {
  const featured = TESTIMONIALS.find((t) => t.featured);
  const rest = TESTIMONIALS.filter((t) => !t.featured);
  return (
    <section className="section-pad testimonials-section">
      <div className="container">
        <div className="testimonials-head">
          <div className="mono testimonials-eyebrow"><span className="dot"></span>VERIFIED · UPWORK 5.0 · LINKEDIN ENDORSED</div>
          <h2 className="serif">What clients actually say<br />after the work <span className="hl-soft">ships</span>.</h2>
          <p>One verified Upwork review reproduced verbatim. Two endorsements from active engagements. Every name and source is checkable in 30 seconds.</p>
        </div>

        {featured &&
        <a href={featured.href} target="_blank" rel="noopener" className="testimonial-featured">
            <div className="testimonial-featured-left">
              <div className="stars">{"★".repeat(featured.stars)}</div>
              <div className="mono testimonial-source"><span className="dot"></span>{featured.source}</div>
              <div className="mono testimonial-meta">{featured.meta}</div>
              <div className="testimonial-attr">
                <div className="testimonial-who serif">{featured.who}</div>
                <div className="testimonial-role mono">{featured.role}</div>
              </div>
              <div className="mono testimonial-verify">VERIFY ON UPWORK <Icon name="arrow" size={12} /></div>
            </div>
            <div className="testimonial-featured-right">
              <div className="serif testimonial-quote-mark">"</div>
              <p className="serif">{featured.body}</p>
            </div>
          </a>
        }

        <div className="testimonials-grid">
          {rest.map((t, i) =>
          <a key={i} href={t.href} target="_blank" rel="noopener" className="testimonial">
              <div className="stars">{"★".repeat(t.stars)}</div>
              <p className="serif">"{t.body}"</p>
              <div className="testimonial-attr">
                <div className="testimonial-who">{t.who}</div>
                <div className="testimonial-role mono">{t.role}</div>
                {t.meta && <div className="testimonial-role mono" style={{ marginTop: 4, opacity: 0.6 }}>{t.meta}</div>}
              </div>
              <div className="mono testimonial-source-row"><span className="dot"></span>{t.source}</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// STATS
// ============================================================
function StatsSection() {
  return (
    <section className="stats-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">07 / RESULTS</div>
          <div>
            <h2>Numbers that belong in the <em>framework</em>.</h2>
          </div>
        </div>
        <div className="stats-grid">
          {STATS.map((s, i) =>
          <div key={i} className="stat-block">
              <div className="serif stat-block-num">{s.num}</div>
              <div className="stat-block-label">{s.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// ABOUT
// ============================================================
function AboutSection() {
  return (
    <section id="about" className="section-pad about-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">08 / FOUNDER</div>
          <div>
            <h2>I'm <em>Bilal Sameer</em>.</h2>
          </div>
        </div>
        <div className="about-layout">
          <div>
            <div className="about-portrait">
              <img src="assets/bilal.webp" alt="Bilal Sameer ,  Founder, Holistic Radar" />
              <div className="about-portrait-tag mono">BILAL SAMEER · FOUNDER</div>
            </div>
            <div className="about-availability mono">
              <span className="dot"></span>AVAILABLE FOR SELECT PROJECTS · TOP RATED · 100% JOB SUCCESS
            </div>
          </div>
          <div>
            <h3 className="serif">Engineer by training. Strategist by obsession.</h3>
            <p>I spent years reverse-engineering how Google's algorithm actually evaluates content ,  layer by layer, signal by signal. Most agencies chase rankings. I build the only asset that makes rankings inevitable: topical authority at the structural level.</p>
            <p>I combined Koray Tuğrul's semantic architecture with Cialdini's full persuasion system ,  including Unity, his 7th and deepest principle ,  into one integrated methodology. The result is content that ranks by intelligence and converts by psychology. Simultaneously.</p>
            <div className="signature serif">,  Bilal</div>

            <div className="about-meta-grid">
              <div className="about-meta-row">
                <span className="mono about-meta-label">Platform</span>
                <span>Top Rated · 100% Job Success · Upwork</span>
              </div>
              <div className="about-meta-row">
                <span className="mono about-meta-label">LinkedIn</span>
                <span>3K Followers · 500+ Connections</span>
              </div>
              <div className="about-meta-row">
                <span className="mono about-meta-label">Location</span>
                <span>United States & Global Clients</span>
              </div>
              <div className="about-meta-row">
                <span className="mono about-meta-label">Methodology</span>
                <span>Koray Tuğrul Topical Authority + Cialdini Persuasion Science</span>
              </div>
            </div>

            <div className="credentials">
              <div className="credential">
                <div className="serif num">210+</div>
                <div className="label">Brands and businesses worldwide</div>
              </div>
              <div className="credential">
                <div className="serif num">1000+</div>
                <div className="label">Articles & blogs published</div>
              </div>
              <div className="credential">
                <div className="serif num">6yr+</div>
                <div className="label">Professional content & SEO experience</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// CAPACITY
// ============================================================
function CapacitySection() {
  const filled = 9;
  const total = 12;
  return (
    <section className="section-pad capacity-section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">09 / CAPACITY LIMIT</div>
          <div>
            <h2>We work with <em>12 clients</em> maximum.</h2>
            <p>Not as a positioning tactic. Delivering a full 6-layer Holistic Radar architecture with all 7 Cialdini principles deliberately placed requires total strategic attention. Every client receives the complete system. That requires a hard capacity limit.</p>
          </div>
        </div>

        <div className="capacity-board">
          <div className="capacity-status mono">
            <div><span className="dot live"></span>LIVE AVAILABILITY STATUS</div>
            <div>{filled} CAPACITY FILLED · <span style={{ color: "var(--signal)" }}>{total - filled} SPOTS OPEN</span></div>
          </div>
          <div className="capacity-slots">
            {Array.from({ length: total }).map((_, i) =>
            <div key={i} className={"capacity-slot " + (i < filled ? "filled" : "open")}>
                <div className="mono">{String(i + 1).padStart(2, "0")}</div>
                <div className="capacity-slot-label mono">{i < filled ? "FILLED" : "OPEN"}</div>
              </div>
            )}
          </div>
          <div className="capacity-cta">
            <button className="btn btn-primary btn-lg">Claim a spot <Icon name="arrow" size={14} /></button>
            <button className="btn btn-ghost btn-lg">Read the framework</button>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// FAQ
// ============================================================
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section-pad">
      <div className="container">
        <div className="section-head">
          <div className="section-head-num">10 / OBJECTIONS</div>
          <div>
            <h2>The questions that block the <em>decision</em>.</h2>
            <p>These aren't generic FAQs. These are the exact doubts that prevent serious businesses from taking the step they know they should take.</p>
          </div>
        </div>
        <div className="faq-list">
          {FAQ.map((f, i) =>
          <div key={i} className={"faq-row" + (i === open ? " open" : "")} onClick={() => setOpen(i === open ? -1 : i)}>
              <div className="faq-q">
                <span className="serif">{f.q}</span>
                <span className="faq-toggle">{i === open ? "−" : "+"}</span>
              </div>
              {i === open && <div className="faq-a">{f.a}</div>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// FINAL CTA
// ============================================================
function FinalCTA() {
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {e.preventDefault();setSubmitted(true);};
  return (
    <section id="scan" className="cta">
      <div className="container cta-content">
        <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>3 of 12 spots open · April 2026</div>
        <h2>Google understands your content<br />or it <em>doesn't</em>.</h2>
        <p>There is no middle ground. Either all 6 layers are satisfied and Google evaluates you at full depth, or you are invisible to the audience you built your business for. The Radar Scan tells you which layers are failing and what they're costing you. <em>Free. No commitment.</em></p>

        <div className="final-form-wrap">
          {!submitted ?
          <form className="final-form" onSubmit={submit}>
              <div className="final-form-row">
                <input type="text" placeholder="Your name" required />
                <input type="email" placeholder="Work email" required />
              </div>
              <div className="final-form-row">
                <input type="url" placeholder="https://yoursite.com" required />
                <select required defaultValue=""><option value="" disabled>Monthly revenue</option><option>Pre-revenue</option><option>$10K – $50K MRR</option><option>$50K – $250K MRR</option><option>$250K+ MRR</option></select>
              </div>
              <textarea placeholder="One sentence: what's your biggest content/SEO frustration right now?" rows={3}></textarea>
              <button type="submit" className="btn btn-primary btn-lg final-form-submit">Send my free 6-Layer Radar Scan <Icon name="arrow" size={14} /></button>
              <div className="cta-fineprint mono">✓ FREE &nbsp;·&nbsp; ✓ NO PITCH DECK &nbsp;·&nbsp; ✓ YOURS TO KEEP &nbsp;·&nbsp; ✓ 24-HOUR RESPONSE</div>
            </form> :

          <div className="final-success">
              <div className="serif" style={{ fontSize: 48, color: "var(--signal)" }}>You're in.</div>
              <p>Bilal will personally review your site and send your full 6-layer scan within 24 hours.</p>
            </div>
          }
        </div>

        <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--signal)" }}>OR ,  REVIEW THE FULL DELIVERABLE</div>
          <a href="https://docs.google.com/" target="_blank" rel="noopener" className="btn btn-ghost btn-lg" style={{ borderColor: "rgba(255,255,255,0.4)", color: "var(--cream)" }}>
            Open the sample Radar Scan (Google Doc) <Icon name="arrow" size={14} />
          </a>
          <div className="cta-fineprint mono" style={{ marginTop: 4 }}>SEE EXACTLY WHAT YOU GET BEFORE YOU BOOK</div>
        </div>
      </div>
    </section>);

}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="logo" style={{ marginBottom: 12 }}>
              <div className="logo-mark"></div>
              <span>Holistic <span style={{ color: "var(--signal)" }}>Radar</span></span>
            </div>
            <p className="footer-tag">Semantic SEO + Persuasion Architecture. Built by an operator who decoded Google's 6-layer mind.</p>
          </div>
          <div className="footer-cols">
            <div>
              <div className="mono footer-col-label">EXPLORE</div>
              <a href="#pyramid">6-Layer Pyramid</a>
              <a href="#intersection">Methodology</a>
              <a href="#services">Services</a>
              <a href="#cases">Results</a>
              <a href="#about">About</a>
            </div>
            <div>
              <div className="mono footer-col-label">CONNECT</div>
              <a href="mailto:connect@holisticradar.com">connect@holisticradar.com</a>
              <a href="#">+92 346 0977701</a>
              <a href="#">LinkedIn ,  Bilal Sameer</a>
              <a href="#">Upwork ,  Top Rated</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom mono">
          <div>HOLISTIC RADAR · © 2026 BILAL SAMEER · ALL RIGHTS RESERVED</div>
          <div>SEMANTIC SEO + PERSUASION ARCHITECTURE</div>
        </div>
      </div>
    </footer>);

}

// ============================================================
// 6-LAYER PYRAMID SVG
// ============================================================
function SixLayerPyramid({ layers, activeIdx, onSelect }) {
  const total = layers.length;
  const baseWidth = 100;
  const topWidth = 56;
  const rowH = 64;
  const cx = 250;
  const widthScale = 4.6;

  return (
    <div style={{ position: "relative", padding: "12px 0" }}>
      <svg viewBox={`0 0 500 ${24 + total * rowH + 24}`} style={{ width: "100%", height: "auto", overflow: "visible" }}>
        {layers.map((l, i) => {
          const isActive = i === activeIdx;
          const y = 24 + i * rowH;
          const t1 = i / total;
          const t2 = (i + 1) / total;
          const w1 = topWidth + (baseWidth - topWidth) * t1;
          const w2 = topWidth + (baseWidth - topWidth) * t2;
          const x1L = cx - w1 / 2 * widthScale;
          const x1R = cx + w1 / 2 * widthScale;
          const x2L = cx - w2 / 2 * widthScale;
          const x2R = cx + w2 / 2 * widthScale;
          return (
            <g key={i} onClick={() => onSelect(i)} style={{ cursor: "pointer" }}>
              <polygon
                points={`${x1L},${y} ${x1R},${y} ${x2R},${y + rowH - 4} ${x2L},${y + rowH - 4}`}
                fill={isActive ? "oklch(0.82 0.17 var(--accent-h, 67))" : "oklch(0.27 0.02 250)"}
                stroke={isActive ? "oklch(0.82 0.17 var(--accent-h, 67))" : "oklch(0.42 0.02 250)"}
                strokeWidth="1"
                style={{ transition: "fill 0.25s, stroke 0.25s", fill: isActive ? "var(--signal)" : "oklch(0.27 0.02 250)", stroke: isActive ? "var(--signal)" : "oklch(0.42 0.02 250)" }} />
              
              <text x={x2L - 18} y={y + rowH / 2} textAnchor="end" dominantBaseline="middle"
              fill={isActive ? "var(--signal)" : "oklch(0.62 0.015 250)"}
              fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="1"
              style={{ transition: "fill 0.25s" }}>
                {l.id}
              </text>
              <text x={cx} y={y + rowH / 2 - 2} textAnchor="middle" dominantBaseline="middle"
              fill={isActive ? "oklch(0.18 0.015 250)" : "oklch(0.94 0.012 80)"}
              fontFamily="Instrument Serif, serif" fontSize="20"
              style={{ transition: "fill 0.25s" }}>
                {l.title}
              </text>
              <text x={cx} y={y + rowH / 2 + 14} textAnchor="middle" dominantBaseline="middle"
              fill={isActive ? "oklch(0.30 0.04 250)" : "oklch(0.55 0.015 250)"}
              fontFamily="JetBrains Mono, monospace" fontSize="8.5" letterSpacing="1"
              style={{ transition: "fill 0.25s" }}>
                {l.subtitle.toUpperCase()}
              </text>
            </g>);

        })}
      </svg>
    </div>);

}
window.SixLayerPyramid = SixLayerPyramid;

ReactDOM.createRoot(document.getElementById("app")).render(<App />);