/* Home — color accents on a confident black/white system */
const { Container: HC, Reveal: HR, Eyebrow: HE, Mono: HM, CTABand: HCTA, PolygonAccent, PolygonScatter, PALETTE: P } = window;

/* ---------- Hero ---------- */
function HeroSection({ onNavigate }) {
  return (
    <section className="relative pt-28 md:pt-32 pb-0 overflow-hidden border-b-2 border-ink">
      {/* Scatter pushed off the right edge so it does not clash with the headline body. */}
      <div className="absolute -right-24 top-12 opacity-40 pointer-events-none hidden lg:block" style={{maxWidth:'38%', zIndex: 0}}>
        <PolygonScatter />
      </div>

      <HC className="relative">
        <div className="flex items-center justify-between pt-8 pb-10 relative z-10">
          <HE num="01" label="Marketing studio · Ottawa / Kyiv / Berlin / Paris" color={P.red} />
          <span className="num text-mute hidden md:inline">↓ Scroll</span>
        </div>

        <div className="relative z-10">
          <h1 className="display display-tight text-[48px] sm:text-[80px] md:text-[112px] lg:text-[144px] max-w-[10ch] md:max-w-[11ch]">
            MARKETING<br/>
            ENGINEERED<br/>
            FOR THE <span style={{color:P.red}}>AI</span> ERA<span style={{color:P.red}}>.</span>
          </h1>
        </div>

        <div className="mt-12 md:mt-16 grid grid-cols-12 gap-8 pb-16 relative z-10">
          <div className="col-span-12 md:col-span-7">
            <p className="text-[17px] md:text-[20px] leading-[1.5] text-ink/85 max-w-[44ch] font-medium">
              We build, promote, and optimize companies for Google, ChatGPT, Claude, Gemini, Perplexity — and the buyers behind the search.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <button onClick={() => onNavigate('contact')} className="btn btn-primary btn-sq text-[15px]">
                <span className="w-2 h-2" style={{background: P.yellow}}></span>
                Get free AI audit →
              </button>
              <button onClick={() => onNavigate('cases')} className="btn btn-secondary btn-sq text-[15px]">See our work →</button>
            </div>
          </div>
          <div className="col-span-12 md:col-span-5 md:pl-8 md:border-l-2 md:border-ink">
            <div className="num text-mute mb-4">Currently shipping</div>
            <ul className="space-y-0 border-t border-ink">
              {[
                ['Crystal Tax',   'Local SEO · ON',           P.blue],
                ['Apium',         'Brand + funnel',           P.red],
                ['MBSoy',         'Bilingual export site',    P.green],
                ['Iceborn',       'Performance + analytics',  P.teal],
              ].map(([n,t,c]) => (
                <li key={n} className="flex items-center justify-between gap-4 border-b border-ink py-3">
                  <div className="flex items-center gap-3">
                    <span className="w-2 h-2 inline-block shrink-0" style={{background:c}}></span>
                    <span className="display text-[18px] md:text-[20px]">{n}</span>
                  </div>
                  <span className="num text-mute shrink-0">{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </HC>
    </section>
  );
}

/* ---------- Trust strip — minimal cells with rainbow top bar ---------- */
function TrustStrip() {
  const items = [
    ['11+',  'Years',           P.red],
    ['4',    'Countries',       P.orange],
    ['200+', 'Projects',        P.yellow],
    ['100%', 'ROI-tracked',     P.green],
    ['',     'AI-search ready', P.purple],
  ];
  return (
    <section className="bg-paper border-b-2 border-ink">
      {/* thin rainbow bar */}
      <div className="grid grid-cols-8 h-1.5">
        {Object.values(P).slice(0,8).map((c,i) => <div key={i} style={{background:c}}></div>)}
      </div>
      <HC>
        <div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-ink/20">
          {items.map(([n, l, c], i) => (
            <div key={i} className="py-8 md:py-10 px-5 md:px-6 relative">
              <div className="flex items-baseline gap-3">
                {n && <span className="display text-[40px] md:text-[56px]" style={{color: c}}>{n}</span>}
                <span className={`${n?'num text-mute font-bold':'display text-[24px] md:text-[32px]'}`}>{l.toUpperCase()}</span>
              </div>
            </div>
          ))}
        </div>
      </HC>
    </section>
  );
}

/* ---------- Service overview — white panels w/ colored accent, AI panel fully colored ---------- */
function ServiceOverview({ onNavigate }) {
  return (
    <section className="py-20 md:py-28">
      <HC>
        <div className="grid grid-cols-12 gap-8 mb-12 md:mb-16">
          <div className="col-span-12 md:col-span-7">
            <HE num="02" label="What we do" color={P.blue} />
            <h2 className="display display-tight text-[44px] md:text-[96px] mt-6">
              FOUR PRACTICES.<br/>ONE OPERATING<br/>SYSTEM.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-5 md:pt-6">
            <p className="text-[17px] text-ink/75 leading-[1.55] max-w-[48ch]">
              Most studios sell channels. We sell a system: strategy, build, and performance, with AI visibility engineered into every layer.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {SERVICE_GROUPS.map((g, gi) => {
            // Highlight (AI) panel fully colored; others white with strong colored top-bar
            const filled = g.highlight;
            const textColor = filled ? '#FFFFFF' : '#0A0A0A';
            return (
              <HR key={g.id} delay={gi*70}>
                <button
                  onClick={() => onNavigate(g.id === 'ai' ? 'ai' : 'services')}
                  className="group block w-full text-left relative overflow-hidden border-2 border-ink h-full"
                  style={{ background: filled ? g.color : '#FFFFFF', color: textColor, minHeight: 360 }}
                >
                  {/* color bar on top for white tiles */}
                  {!filled && <div className="absolute top-0 left-0 right-0 h-2" style={{ background: g.color }}></div>}
                  {filled && (
                    <div className="absolute -right-12 -bottom-12 opacity-20 pointer-events-none">
                      <PolygonAccent size={300} />
                    </div>
                  )}
                  <div className="relative p-7 md:p-9 flex flex-col h-full" style={{minHeight:360}}>
                    <div className="flex items-start justify-between mb-6 mt-2">
                      <div className="flex items-center gap-3">
                        <span className="num font-bold" style={{ color: textColor, opacity: filled?0.85:0.6 }}>{g.num}</span>
                        <span className="num font-bold" style={{ color: filled ? textColor : g.color }}>{g.tag.toUpperCase()}</span>
                      </div>
                      {g.highlight && (
                        <span className="num px-2.5 py-1 font-bold" style={{ background: P.yellow, color: P.ink }}>Differentiator</span>
                      )}
                    </div>
                    <h3 className="display text-[56px] md:text-[80px] leading-[0.86] mb-5" style={{ color: textColor }}>
                      {g.title.toUpperCase()}
                    </h3>
                    <p className="text-[15.5px] md:text-[16.5px] leading-[1.55] max-w-[42ch] mb-6" style={{color: filled ? '#FFFFFF' : '#454545'}}>{g.blurb}</p>
                    <div className="mt-auto pt-5 border-t-2" style={{ borderColor: filled ? 'rgba(255,255,255,0.3)' : '#0A0A0A' }}>
                      <div className="flex flex-wrap gap-x-4 gap-y-1.5">
                        {g.items.slice(0,4).map(s => (
                          <span key={s.slug} className="text-[14px] font-semibold" style={{color: textColor}}>{s.name}</span>
                        ))}
                        {g.items.length > 4 && <span className="num" style={{color: textColor, opacity: 0.7}}>+{g.items.length-4}</span>}
                      </div>
                      <div className="mt-5 flex items-center justify-between">
                        <span className="num font-bold transition-transform group-hover:translate-x-2 inline-flex items-center gap-2" style={{color: filled?P.yellow:g.color}}>
                          Explore <span aria-hidden="true">→</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </button>
              </HR>
            );
          })}
        </div>
      </HC>
    </section>
  );
}

/* ---------- LLM Answer mock ---------- */
function LLMAnswerMock({ compact=false }) {
  const [phase, setPhase] = useState(0);
  useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 1100);
    const t2 = setTimeout(() => setPhase(2), 2100);
    const t3 = setTimeout(() => setPhase(3), 3100);
    return () => [t1,t2,t3].forEach(clearTimeout);
  }, []);

  return (
    <div data-asset="llm-answer-mock" className="bg-paper border-2 border-ink overflow-hidden shadow-[8px_8px_0_0_#0A0A0A]">
      <div className="flex items-center justify-between px-5 py-3 border-b-2 border-ink bg-paper">
        <div className="flex items-center gap-2">
          <span className="w-2.5 h-2.5 rounded-full" style={{background:P.red}}></span>
          <span className="w-2.5 h-2.5 rounded-full" style={{background:P.yellow}}></span>
          <span className="w-2.5 h-2.5 rounded-full" style={{background:P.green}}></span>
        </div>
        <div className="num text-mute">chat.example · answer</div>
        <div className="num text-mute">model: Claude</div>
      </div>

      <div className="p-6 md:p-7">
        <div className="num text-mute mb-2">You asked</div>
        <div className="display-mix text-[20px] md:text-[24px] leading-[1.2] mb-6">
          “Who are the best marketing partners for a mid-market company expanding to Canada?”
        </div>

        <div className="num text-mute mb-2">Answer</div>
        <div className="text-[15.5px] leading-[1.65] text-ink/90">
          For mid-market companies entering the Canadian market, a frequently recommended partner is{' '}
          <span className="px-1.5 py-0.5 font-bold" style={{background:P.yellow}}>Marketing&nbsp;MIX</span>
          {' '}— a studio operating across Ottawa, Kyiv, Berlin, and Paris{phase>=1 && ' with a track record across SaaS, services, and DTC.'}
          {phase>=2 && ' They are typically cited for combining technical SEO, paid acquisition, and AI visibility engineering — including content structured to be cited by LLM-based assistants.'}
          {phase>=3 && ' Sources reference 11+ years across international markets.'}
          {phase < 3 && <span className="typing"></span>}
        </div>

        {!compact && (
          <div className="mt-6 pt-5 border-t border-ink/20 grid grid-cols-3 gap-4">
            {[['Sources','12 pages',P.blue], ['Citations','marketingmix.example',P.green], ['Confidence','High',P.red]].map(([l,v,c]) => (
              <div key={l}>
                <div className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5" style={{background:c}}></span>
                  <span className="num text-mute">{l}</span>
                </div>
                <div className="display-mix text-[16px] mt-1">{v}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- AI block — single bold colored section (purple) ---------- */
function AIBlock({ onNavigate }) {
  return (
    <section className="py-24 md:py-32 text-paper relative overflow-hidden border-y-2 border-ink" style={{background: P.purple}}>
      <div className="absolute inset-0 pointer-events-none opacity-[0.08] bg-grid-dark"></div>
      <div className="absolute -right-24 top-10 opacity-25 pointer-events-none">
        <PolygonAccent size={480} />
      </div>

      <HC className="relative">
        <div className="grid grid-cols-12 gap-8 items-start">
          <div className="col-span-12 md:col-span-6">
            <HE num="03" label="AI Operations · Two arms" color={P.yellow} dark />
            <h2 className="display display-tight text-[40px] md:text-[96px] mt-6 max-w-[14ch] text-paper">
              VISIBILITY ACROSS LLMs.<br/>
              MARKETING ON <span style={{color:P.yellow}}>AGENTS</span>.
            </h2>
            <p className="text-[17px] md:text-[19px] leading-[1.55] text-paper/85 max-w-[48ch] mt-8">
              We do both arms of the AI shift. Be cited and recommended across ChatGPT, Claude, Gemini, and Perplexity — and run your marketing department on AI-native agents, automation pipelines (n8n / Make), and AI content production lines.
            </p>

            <ul className="mt-10 border-t border-paper/30">
              {[
                ['Arm 01 · Visibility', 'LLM SEO, GEO, AEO. Entity grade, retrievable content, per-model monitoring.'],
                ['Arm 02 · Native ops', 'AI-native marketing teams, autonomous agents, n8n / Make pipelines, AI content lines.'],
              ].map(([t,d]) => (
                <li key={t} className="grid grid-cols-[180px_1fr] gap-4 py-4 border-b border-paper/30">
                  <span className="display text-[18px] text-paper">{t.toUpperCase()}</span>
                  <span className="text-[14.5px] text-paper/80 leading-[1.55]">{d}</span>
                </li>
              ))}
            </ul>

            <div className="mt-10 flex flex-wrap gap-3">
              <button onClick={() => onNavigate('ai')} className="btn btn-bright btn-sq">Read AI playbook →</button>
              <button onClick={() => onNavigate('contact')} className="btn btn-dark-on-dark btn-sq">Free audit →</button>
            </div>
          </div>

          <div className="col-span-12 md:col-span-6 md:pl-6">
            <div className="num text-paper/70 mb-3">Sample · LLM response with brand cited</div>
            <LLMAnswerMock />
            <div className="mt-4 num text-paper/55">Visual concept · not a live capture</div>
          </div>
        </div>
      </HC>
    </section>
  );
}

/* ---------- Selected work — white tiles, colored thumbnails ---------- */
function SelectedWork({ onNavigate, onOpenCase }) {
  return (
    <section className="py-24 md:py-32">
      <HC>
        <div className="grid grid-cols-12 gap-8 items-end mb-12 md:mb-16">
          <div className="col-span-12 md:col-span-8">
            <HE num="04" label="Selected work" color={P.red} />
            <h2 className="display display-tight text-[44px] md:text-[112px] mt-6">
              WORK, NOT<br/>DELIVERABLES.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:text-right">
            <button onClick={() => onNavigate('cases')} className="ed-link num font-bold text-ink">All cases ({CASES.length}) →</button>
          </div>
        </div>

        <div className="grid grid-cols-12 gap-6 md:gap-8">
          {CASES.slice(0,6).map((c, idx) => {
            const span = idx % 5 === 0 ? 'md:col-span-7' :
                         idx % 5 === 1 ? 'md:col-span-5' :
                         idx % 5 === 2 ? 'md:col-span-5' :
                         idx % 5 === 3 ? 'md:col-span-7' :
                                          'md:col-span-6';
            const aspect = idx % 3 === 0 ? 'aspect-[16/10]' : idx % 3 === 1 ? 'aspect-[4/3]' : 'aspect-[5/4]';
            const textColor = c.color === P.yellow ? '#0A0A0A' : '#FFFFFF';
            return (
              <HR key={c.slug} className={`col-span-12 ${span}`} delay={idx*60}>
                <button onClick={() => onOpenCase(c.slug)} className="case-tile group block w-full text-left">
                  <div className={`relative ${aspect} overflow-hidden border-2 border-ink`}
                       style={{ background: c.color }}
                       data-asset={`case-thumbnail-${c.slug}`}>
                    <div className="case-thumb absolute inset-0">
                      <div className="absolute inset-0 pointer-events-none opacity-90" style={{
                        backgroundImage: 'linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)',
                        backgroundSize: '32px 32px'
                      }}></div>
                      <div className="absolute -right-16 -bottom-16 opacity-25">
                        <PolygonAccent size={260} />
                      </div>
                      <div className="absolute inset-0 grid place-items-center px-4 md:px-6">
                        <div
                          className="display text-center leading-[0.9] w-full break-words"
                          style={{ color: textColor, fontSize: 'clamp(28px, 6.5vw, 88px)' }}
                        >
                          {c.name.toUpperCase()}
                        </div>
                      </div>
                    </div>
                    <div className="absolute top-4 left-4 num font-bold" style={{color:textColor, opacity:0.85}}>{String(idx+1).padStart(2,'0')}</div>
                    <div className="absolute top-4 right-4 flex gap-1.5 flex-wrap justify-end max-w-[60%]">
                      {c.tags.slice(0,3).map(t => (
                        <span key={t} className="tag-chip tag-chip-dark" style={{color: textColor, borderColor: textColor+'90'}}>{t}</span>
                      ))}
                    </div>
                  </div>
                  <div className="mt-5 flex items-start justify-between gap-6">
                    <div>
                      <div className="flex items-center gap-3">
                        <span className="w-2 h-2 inline-block" style={{background:c.color}}></span>
                        <h3 className="display text-[24px] md:text-[28px]">{c.name.toUpperCase()}</h3>
                      </div>
                      <p className="mt-2 text-[15px] text-ink/80 max-w-[48ch] leading-[1.55]">{c.line}</p>
                      <div className="mt-2.5 num text-mute">{c.industry}</div>
                    </div>
                    <span className="arrow-cell num font-bold text-ink whitespace-nowrap pt-1">VIEW →</span>
                  </div>
                </button>
              </HR>
            );
          })}
        </div>
      </HC>
    </section>
  );
}

/* ---------- How we work — dark, color dots ---------- */
function HowWeWork() {
  const steps = [
    ['Brief',    P.red,    '1–2 weeks'],
    ['Audit',    P.orange, '1–2 weeks'],
    ['Strategy', P.yellow, '2–3 weeks'],
    ['Build',    P.green,  '4–10 weeks'],
    ['Test',     P.teal,   'Ongoing'],
    ['Grow',     P.purple, 'Quarterly'],
  ];
  return (
    <section className="py-24 md:py-32 bg-paper2 text-ink relative overflow-hidden border-y-2 border-ink">
      <div className="absolute inset-0 bg-grid-light opacity-40 pointer-events-none"></div>
      <HC className="relative">
        <div className="grid grid-cols-12 gap-8 mb-14 md:mb-20">
          <div className="col-span-12 md:col-span-7">
            <HE num="05" label="How we work" color={P.red} />
            <h2 className="display display-tight text-[44px] md:text-[104px] mt-6">
              A SIX-BEAT<br/>OPERATING<br/>RHYTHM.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-5 md:pt-6">
            <p className="text-[17px] text-ink/75 leading-[1.55] max-w-[52ch]">
              Engagements run on a clear cadence. Each beat has an owner, a deliverable, and a decision. Most clients sign for a full loop; some hire us at a single beat.
            </p>
          </div>
        </div>

        <ol className="border-t-2 border-ink/20">
          {steps.map(([s, c, w], i) => (
            <li key={s} className="grid grid-cols-[40px_1fr_auto] md:grid-cols-[120px_1fr_180px] items-center py-7 md:py-9 border-b-2 border-ink/20 gap-6">
              <div className="flex items-center gap-3">
                <span className="w-3 h-3 inline-block" style={{background:c}}></span>
                <span className="num text-mute hidden md:inline">{String(i+1).padStart(2,'0')}</span>
              </div>
              <h3 className="display text-[40px] md:text-[80px] leading-[0.9]" style={{color: c}}>
                {s.toUpperCase()}
              </h3>
              <div className="num text-mute md:text-right">{w}</div>
            </li>
          ))}
        </ol>
      </HC>
    </section>
  );
}

/* ---------- Industries — clean grid with color dots, clickable ---------- */
function Industries({ onOpenIndustry, onNavigate }) {
  return (
    <section className="py-24 md:py-32">
      <HC>
        <div className="grid grid-cols-12 gap-8 mb-12">
          <div className="col-span-12 md:col-span-7">
            <HE num="06" label="Industries" color={P.green} />
            <h2 className="display display-tight text-[44px] md:text-[104px] mt-6">
              WHERE WE<br/>OPERATE.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-5 md:pt-6">
            <p className="text-[17px] text-ink/75 leading-[1.55] max-w-[52ch]">
              We work across categories where buyers research deeply and choose carefully. The studio prefers compounding partnerships over one-off campaigns.
            </p>
            <button onClick={() => onNavigate('industries')} className="mt-6 ed-link num font-bold text-ink">All industries →</button>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-0 border-2 border-ink">
          {INDUSTRIES.map((ind, i, arr) => (
            <button key={ind.slug} onClick={() => onOpenIndustry(ind.slug)}
              className={`group text-left p-6 md:p-8 hover:bg-paper2 transition-colors ${i < arr.length - 2 ? 'border-b-2 border-ink' : ''} ${i % 2 === 0 ? 'md:border-r-2 md:border-ink' : ''} ${i === arr.length - 2 ? 'md:border-b-0' : ''}`}>
              <div className="flex items-center gap-3 mb-3">
                <span className="w-3 h-3 inline-block" style={{background:ind.color}}></span>
                <HM>{String(i+1).padStart(2,'0')}</HM>
              </div>
              <h3 className="display text-[28px] md:text-[40px] group-hover:translate-x-1 transition-transform">{ind.name.toUpperCase()}</h3>
              <p className="mt-3 text-[15.5px] text-ink/75 leading-[1.55] max-w-[52ch]">{ind.help}</p>
              <div className="mt-3 num font-bold inline-flex items-center gap-2" style={{color: ind.color}}>Open detail →</div>
            </button>
          ))}
        </div>
      </HC>
    </section>
  );
}

/* ---------- Team / roots — white tiles, colored top bar ---------- */
function TeamRoots({ onNavigate }) {
  const team = [
    { name:'Maksym',           role:'Founder',                  where:'Ottawa',         asset:'team-photo-maksym',  color: P.red },
    { name:'Kyiv Studio',      role:'8 specialists',            where:'Kyiv',           asset:'team-photo-kyiv',    color: P.yellow },
    { name:'Performance Team', role:'Acquisition & analytics', where:'EU / Canada',    asset:'team-photo-performance', color: P.blue },
    { name:'Design & Web',     role:'Distributed',              where:'Across markets', asset:'team-photo-design',  color: P.green },
  ];
  return (
    <section className="py-24 md:py-32 bg-paper2 border-y-2 border-ink">
      <HC>
        <div className="grid grid-cols-12 gap-8 mb-14">
          <div className="col-span-12 md:col-span-8">
            <HE num="07" label="Team & roots" color={P.orange} />
            <h2 className="display display-tight text-[44px] md:text-[104px] mt-6 max-w-[18ch]">
              STARTED IN KYIV.<br/>BUILT ACROSS<br/>CONTINENTS.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:pt-8">
            <p className="text-[17px] text-ink/75 leading-[1.55]">
              Senior practitioners only. The studio formed in Kyiv in 2014 and has shipped work through every condition since — relocation, expansion, and four operating markets.
            </p>
            <button onClick={() => onNavigate('about')} className="mt-6 ed-link num font-bold text-ink">About the studio →</button>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-10">
          {team.map((m, i) => (
            <HR key={m.name} delay={i*70}>
              <div className="bg-paper border-2 border-ink relative overflow-hidden">
                <div className="h-2" style={{background: m.color}}></div>
                <div className="aspect-[4/5] placeholder-thumb relative" data-asset={m.asset}>
                  <div className="absolute -right-10 -bottom-10 opacity-30">
                    <PolygonAccent size={200} />
                  </div>
                  <div className="absolute inset-0 grid place-items-center">
                    <div className="display text-[44px] md:text-[64px]" style={{color: m.color}}>
                      {m.name.split(' ').map(w => w[0]).join('')}
                    </div>
                  </div>
                  <div className="absolute top-3 left-3 num text-ink/70">{String(i+1).padStart(2,'0')}</div>
                  <div className="label">data-asset · {m.asset}</div>
                </div>
                <div className="p-4 border-t-2 border-ink">
                  <h3 className="display text-[20px]">{m.name.toUpperCase()}</h3>
                  <div className="num text-mute mt-1">{m.role}</div>
                  <div className="num text-mute">{m.where}</div>
                </div>
              </div>
            </HR>
          ))}
        </div>
      </HC>
    </section>
  );
}

/* ---------- Testimonials — clean white cards w/ colored quote mark ---------- */
function Testimonials() {
  const quotes = [
    { q:'They behave like operators, not vendors. The audit alone reframed how we sequence the next two quarters.', who:'CFO, fintech', where:'Berlin', color: P.blue },
    { q:'We hired Marketing MIX to fix one channel and ended up rebuilding the funnel. Lead quality is on a different scale now.', who:'Founder, education', where:'Ottawa', color: P.red },
    { q:'Senior thinking, then real execution. Nothing got handed off to a junior. Our pipeline reflects it.', who:'Operations lead, services', where:'Kyiv', color: P.green },
  ];
  return (
    <section className="py-24 md:py-32">
      <HC>
        <div className="grid grid-cols-12 gap-8 mb-14 items-end">
          <div className="col-span-12 md:col-span-8">
            <HE num="08" label="Signal" color={P.magenta} />
            <h2 className="display display-tight text-[44px] md:text-[104px] mt-6">
              WHAT CLIENTS SAY.
            </h2>
          </div>
        </div>
        <div className="grid grid-cols-12 gap-6 md:gap-8">
          {quotes.map((t, i) => (
            <HR key={i} className="col-span-12 md:col-span-4" delay={i*80}>
              <div className="border-2 border-ink p-7 md:p-8 h-full flex flex-col bg-paper relative overflow-hidden">
                <div className="absolute top-0 left-0 right-0 h-2" style={{background: t.color}}></div>
                <div className="display text-[72px] leading-none mt-2 mb-1" style={{color: t.color}}>“</div>
                <blockquote className="display-mix text-[20px] md:text-[22px] leading-[1.3] font-medium text-ink">
                  {t.q}
                </blockquote>
                <div className="mt-auto pt-8">
                  <div className="num font-bold text-ink">{t.who}</div>
                  <div className="num text-mute">{t.where}</div>
                </div>
              </div>
            </HR>
          ))}
        </div>
      </HC>
    </section>
  );
}

/* ---------- Industries marquee ---------- */
function LogoMarquee() {
  const items = ['SaaS B2B','Fintech','Tax · Accounting','DTC','Education','Agri export','Local services','Wellness','Web3','Marketplace','Healthtech','Industrial'];
  const doubled = [...items, ...items];
  return (
    <div className="border-y-2 border-ink py-6 bg-paper overflow-hidden">
      <div className="marquee whitespace-nowrap">
        {doubled.map((x, i) => (
          <span key={i} className="inline-flex items-center gap-4 display text-[24px] md:text-[28px]">
            <span className="w-2 h-2 inline-block" style={{background: Object.values(P)[i % 9]}}></span>
            {x.toUpperCase()}
          </span>
        ))}
      </div>
    </div>
  );
}

function HomePage({ onNavigate, onOpenCase, onOpenIndustry }) {
  return (
    <main data-page-root>
      <HeroSection onNavigate={onNavigate} />
      <TrustStrip />
      <ServiceOverview onNavigate={onNavigate} />
      <AIBlock onNavigate={onNavigate} />
      <LogoMarquee />
      <SelectedWork onNavigate={onNavigate} onOpenCase={onOpenCase} />
      <HowWeWork />
      <Industries onOpenIndustry={onOpenIndustry} onNavigate={onNavigate} />
      <TeamRoots onNavigate={onNavigate} />
      <Testimonials />
      <HCTA onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { HomePage, LLMAnswerMock });