// Home page — Get Visible redesign
const { useEffect: _ue, useRef: _ur, useState: _us } = React;

function Hero(){
  const [mouse, setMouse] = React.useState({x: 0.5, y: 0.5});
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setMouse({x: (e.clientX - r.left)/r.width, y: (e.clientY - r.top)/r.height});
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  const tilt = {
    transform: `perspective(1200px) rotateX(${(mouse.y - 0.5) * -2}deg) rotateY(${(mouse.x - 0.5) * 2}deg)`
  };

  return (
    <section className="hero" ref={ref}>
      <div className="hero__grid">
        <div className="hero__meta">
          <span className="pill"><span className="dot"/>Booking 2 engagements for Q3</span>
        </div>

        <h1 className="hero__headline display" style={tilt}>
          <span>Digital marketing</span>
          <span>without the <em className="serif">guesswork.</em></span>
          <span>Delivering <span className="hl">data-driven</span></span>
          <span>results since <span className="hero__year">2011</span>.</span>
        </h1>

        <div className="hero__rail">
          <div className="hero__rail-item">
            <div className="micro">What we do</div>
            <div className="hero__rail-text">A full-funnel growth studio for brands that measure marketing in revenue, not impressions.</div>
          </div>
          <div className="hero__rail-item">
            <div className="micro">Who it's for</div>
            <div className="hero__rail-text">SMB, mid-market, and enterprise teams ready to trade gut calls for compounding performance.</div>
          </div>
        </div>

        <div className="hero__cta">
          <a className="btn btn--primary" href="#contact">Get a proposal <span className="arrow">→</span></a>
          <a className="btn btn--ghost" href="case-study.html">See the work <span className="arrow">→</span></a>
        </div>
      </div>

      {/* Scroll hint */}
      <div className="hero__scroll">
        <span className="mono">Scroll</span>
        <span className="hero__scroll-line"><span/></span>
        <span className="mono">01 / 06</span>
      </div>

      {/* Bottom meta ticker */}
      <div className="hero__ticker">
        <div className="hero__ticker-row">
          <span className="mono">● Live</span>
          <span className="mono">Scottsdale, AZ · 14 specialists · 180+ engagements</span>
          <span className="mono">Google Premier Partner · Meta Business Partner · HubSpot Elite</span>
        </div>
      </div>
    </section>
  );
}

function Belief(){
  useReveal();
  return (
    <section className="belief">
      <div className="wrap belief__wrap">
        <div className="belief__left">
          <span className="micro">01 — What we believe</span>
        </div>
        <div className="belief__right">
          <p className="belief__text reveal">
            Most agencies <span className="strike">sell you hours.</span> We sell you a system — one that turns search intent, social signal, and spend into a pipeline you can forecast. <em className="serif">No dashboards as decoration.</em> No campaigns without a thesis. Every dollar does a job, every job has a number, and every number ladders up to the one that actually matters: revenue you can attribute.
          </p>
          <div className="belief__kpis">
            <div className="kpi reveal">
              <div className="kpi__num display"><span data-count="4.7">0.0</span>×</div>
              <div className="kpi__label">Avg ROAS lift<br/>across paid search accounts</div>
            </div>
            <div className="kpi reveal">
              <div className="kpi__num display"><span data-count="312">0</span>%</div>
              <div className="kpi__label">Organic traffic growth<br/>12-month median, new clients</div>
            </div>
            <div className="kpi reveal">
              <div className="kpi__num display"><span data-count="94">0</span></div>
              <div className="kpi__label">Net retention —<br/>2024 and 2025 combined</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  {no:"S/01", name:"Paid search", deck:"Google & Bing. Profitable from the first auction, not the fourth quarter.", tags:["PPC","Shopping","YouTube"]},
  {no:"S/02", name:"Search optimization", deck:"Technical, editorial, and authority — compounded over quarters, not chased in weeks.", tags:["Technical","Content","Links"]},
  {no:"S/03", name:"Paid social", deck:"Meta, TikTok, LinkedIn. Creative that tests, audiences that clear CAC.", tags:["Meta","TikTok","LinkedIn"]},
  {no:"S/04", name:"Content & editorial", deck:"Narrative, not noise. Briefs your operators would actually read.", tags:["Strategy","Editorial","SEO"]},
  {no:"S/05", name:"Analytics & attribution", deck:"GA4, server-side, MMM. Enough plumbing to trust the number on the board.", tags:["GA4","Warehouse","MMM"]},
  {no:"S/06", name:"Creative & brand", deck:"Systems that scale across feeds, pages, and pitch decks — without going generic.", tags:["Identity","Ads","Social"]},
  {no:"S/07", name:"Web design & dev", deck:"Sites built to rank, load, and convert — Framer, Webflow, or bespoke Next.", tags:["Framer","Webflow","Next.js"]},
];

function Services(){
  return (
    <section className="services" id="services-section">
      <div className="services__head">
        <div className="wrap services__head-wrap">
          <span className="micro">02 — The practice</span>
          <h2 className="display services__h2">
            Seven disciplines, <em className="serif">one</em> compounding system.
          </h2>
        </div>
      </div>

      <div className="services__list">
        {SERVICES.map((s, i) => (
          <a key={s.no} className="srv" href="services.html">
            <div className="srv__no mono">{s.no}</div>
            <div className="srv__name display">{s.name}</div>
            <div className="srv__deck">{s.deck}</div>
            <div className="srv__tags">
              {s.tags.map(t => <span key={t} className="srv__tag mono">{t}</span>)}
            </div>
            <div className="srv__arr">→</div>
          </a>
        ))}
      </div>
    </section>
  );
}

const CASES = [
  {
    idx: "CS/01",
    client: "Keystone Home Services",
    sector: "Home services · 42 markets",
    head: "Rebuilt paid search from the account up — 3.2× the leads at half the CPL.",
    metric1: {num:"3.2×", lbl:"Qualified leads / mo"},
    metric2: {num:"−54%", lbl:"Cost per lead"},
    metric3: {num:"18 mo", lbl:"Engagement"},
    tag: "Paid search · CRO"
  },
  {
    idx: "CS/02",
    client: "Northwind Outdoor Co.",
    sector: "DTC outdoor apparel",
    head: "Editorial SEO took organic from support channel to primary revenue driver.",
    metric1: {num:"+412%", lbl:"Organic revenue"},
    metric2: {num:"#1–3", lbl:"1,940 priority queries"},
    metric3: {num:"9 mo", lbl:"To ROI positive"},
    tag: "SEO · Content"
  },
  {
    idx: "CS/03",
    client: "Meridian Capital Group",
    sector: "B2B financial services",
    head: "A LinkedIn + intent program booked 41 enterprise meetings in a single quarter.",
    metric1: {num:"41", lbl:"Enterprise meetings"},
    metric2: {num:"$9.4M", lbl:"Qualified pipeline"},
    metric3: {num:"Q2 '25", lbl:"Single quarter"},
    tag: "Paid social · ABM"
  }
];

function Work(){
  return (
    <section className="work" id="work-section">
      <div className="wrap work__head">
        <div>
          <span className="micro">03 — Selected work</span>
          <h2 className="display work__h2">Numbers on the board.</h2>
        </div>
        <a className="link" href="case-study.html">All case studies <span>→</span></a>
      </div>

      <div className="work__list">
        {CASES.map((c, i) => (
          <a key={c.idx} className="case" href="case-study.html">
            <div className="case__left">
              <div className="case__idx mono">{c.idx}</div>
              <div className="case__client display">{c.client}</div>
              <div className="case__sector">{c.sector}</div>
              <div className="case__tag mono">{c.tag}</div>
            </div>
            <div className="case__mid">
              <p className="case__head serif">{c.head}</p>
              <div className="case__metrics">
                <div className="case__metric">
                  <div className="case__mnum display">{c.metric1.num}</div>
                  <div className="case__mlbl">{c.metric1.lbl}</div>
                </div>
                <div className="case__metric">
                  <div className="case__mnum display">{c.metric2.num}</div>
                  <div className="case__mlbl">{c.metric2.lbl}</div>
                </div>
                <div className="case__metric">
                  <div className="case__mnum display">{c.metric3.num}</div>
                  <div className="case__mlbl">{c.metric3.lbl}</div>
                </div>
              </div>
            </div>
            <div className="case__right">
              <div className="ph case__thumb" style={{aspectRatio:'4/5'}}>
                Case hero {i+1}
              </div>
              <span className="case__arr">→</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function Channels(){
  return (
    <section className="ch">
      <div className="wrap ch__head">
        <span className="micro">Visible everywhere it counts</span>
        <h2 className="display ch__h2">World-class campaigns,<br/><em className="serif">every channel.</em></h2>
        <p className="ch__sub">Search results, paid placements, social feeds, analytics — built as one connected system, measured against one revenue number.</p>
      </div>
      <div className="ch__stage">
        <div className="ch__mock ch__mock--serp reveal">
          <div className="mk__bar"><span className="mk__dot"/><span className="mk__dot"/><span className="mk__dot"/><span className="mk__url">google.com/search?q=replacement+windows+phoenix</span></div>
          <div className="mk__body">
            <div className="mk__ad-tag mono">Sponsored</div>
            <div className="mk__row">
              <div className="mk__title">Keystone Home Services — Windows in 14 Days</div>
              <div className="mk__green">keystonehome.com</div>
              <div className="mk__line"/><div className="mk__line"/><div className="mk__line mk__line--short"/>
            </div>
            <div className="mk__row">
              <div className="mk__title">Atlas Freight — Now Booking Q3</div>
              <div className="mk__green">atlasfreight.com</div>
              <div className="mk__line"/><div className="mk__line mk__line--short"/>
            </div>
            <div className="mk__cap mono">↑ 1.4M impressions / mo</div>
          </div>
        </div>
        <div className="ch__mock ch__mock--ad reveal">
          <div className="mk__creative">
            <div className="mk__brand mono">FINCH OUTDOOR</div>
            <div className="mk__hd serif">Built for the<br/>long way home.</div>
            <div className="mk__cta">Shop new arrivals →</div>
          </div>
          <div className="mk__cap mono">−54% CPL · Meta + TikTok</div>
        </div>
        <div className="ch__mock ch__mock--chart reveal">
          <div className="mk__head"><div className="mk__h">Pipeline forecast · Q3</div><div className="mk__pill mono">+312%</div></div>
          <svg viewBox="0 0 320 140" className="mk__svg" preserveAspectRatio="none">
            <defs><linearGradient id="g1" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="var(--cyan)" stopOpacity="0.4"/><stop offset="1" stopColor="var(--cyan)" stopOpacity="0"/></linearGradient></defs>
            <path d="M0,120 L40,110 L80,95 L120,80 L160,72 L200,55 L240,42 L280,28 L320,18 L320,140 L0,140 Z" fill="url(#g1)"/>
            <path d="M0,120 L40,110 L80,95 L120,80 L160,72 L200,55 L240,42 L280,28 L320,18" fill="none" stroke="var(--cyan)" strokeWidth="1.5"/>
            {[0,40,80,120,160,200,240,280,320].map((x,i)=>(<circle key={i} cx={x} cy={[120,110,95,80,72,55,42,28,18][i]} r="2.5" fill="var(--cyan)"/>))}
          </svg>
          <div className="mk__stats">
            <div><div className="mono">SQLs</div><div className="serif">412</div></div>
            <div><div className="mono">CPL</div><div className="serif">$84</div></div>
            <div><div className="mono">ROAS</div><div className="serif">4.7×</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function People(){
  const ppl = [
    {name:'Strategy', role:'Audit · Forecast · Brief', h: 220},
    {name:'Paid media', role:'Search · Social · CTV', h: 280},
    {name:'Editorial', role:'Briefs · Long-form · CMS', h: 240},
    {name:'Analytics', role:'GA4 · Warehouse · MMM', h: 300},
    {name:'Creative', role:'Identity · Ads · Sites', h: 230},
  ];
  return (
    <section className="ppl">
      <div className="wrap ppl__head">
        <span className="micro">The team behind the numbers</span>
        <h2 className="display ppl__h2">Real operators,<br/>at every step.</h2>
      </div>
      <div className="wrap ppl__strip">
        {ppl.map((p,i)=>(
          <figure key={p.name} className="ppl__cell" style={{paddingTop: i%2===0 ? 0 : 40}}>
            <image-slot id={`gv-team-${i}`} shape="rounded" radius="22" placeholder={`Drop a ${p.name.toLowerCase()} photo`} style={{width:'100%', height: p.h, background:'#1a1f25', display:'block', borderRadius:22}}></image-slot>
            <figcaption className="ppl__cap">
              <div className="display ppl__name">{p.name}</div>
              <div className="mono ppl__role">{p.role}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

function Method(){
  useReveal();
  const steps = [
    { k:"M/01", t:"Audit", d:"Two weeks in your data warehouse, ad accounts, and sales floor. We show up with questions. We leave with a thesis." },
    { k:"M/02", t:"Model", d:"A forecast for every channel — a number you could take to your board. If we can't make it credible, we say so." },
    { k:"M/03", t:"Launch", d:"We stand up the system. Campaigns, creative, tracking, reporting — one integrated build, not seven separate retainers." },
    { k:"M/04", t:"Compound", d:"Weekly cadence, monthly readouts, quarterly pivots. The curve flattens for no one, so we keep finding the next 10%." },
  ];
  return (
    <section className="method" id="approach">
      <div className="wrap">
        <div className="method__head">
          <span className="micro">04 — How we work</span>
          <h2 className="display method__h2">
            No two engagements look the same.<br/>
            <em className="serif">The shape of them does.</em>
          </h2>
        </div>
        <div className="method__grid">
          {steps.map((s, i) => (
            <div key={s.k} className="method__cell reveal" style={{transitionDelay: `${i*80}ms`}}>
              <div className="method__k mono">{s.k}</div>
              <div className="method__t display">{s.t}</div>
              <div className="method__d">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Logos(){
  const names = ["Keystone","Northwind","Meridian","Stonewall","Harper & Co.","Finch","Atlas Freight","Rivermark","Peak & Pine","Cardinal","Blackbird","Emberline"];
  return (
    <section className="logos">
      <div className="wrap logos__head">
        <span className="micro">Trusted by operators at</span>
      </div>
      <div className="logos__marquee">
        <div className="marquee">
          {[...names, ...names].map((n, i) => (
            <span key={i} className="logos__item display">{n}<span className="logos__dot">·</span></span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonial(){
  return (
    <section className="testimonial">
      <div className="wrap testimonial__wrap">
        <span className="micro">05 — In their words</span>
        <blockquote className="testimonial__q serif">
          "They don't pitch you the dashboard. They pitch you the number. In three quarters they rebuilt our acquisition economics — and then they argued with us about which metric to chase next. That's the partner we'd hoped existed."
        </blockquote>
        <div className="testimonial__by">
          <div className="ph testimonial__avatar" style={{width:56, height:56, borderRadius:'50%'}}>MH</div>
          <div>
            <div className="testimonial__name">Monica Hale</div>
            <div className="testimonial__role">SVP Growth, Keystone Home Services</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const INSIGHTS = [
  {
    tag: "Essay",
    date: "Apr 2026",
    read: "8 min read",
    title: "The end of last-click, and what replaces it",
    deck: "Attribution isn't broken — the story we tell with it is. A practitioner's defense of media-mix modeling, without the enterprise price tag."
  },
  {
    tag: "Field note",
    date: "Mar 2026",
    read: "5 min read",
    title: "What a profitable Google Ads account looks like on day 90",
    deck: "The diagnostic we run every Monday — and the three charts that tell you, in under a minute, whether the account is going to make its quarter."
  },
  {
    tag: "Report",
    date: "Feb 2026",
    read: "12 min read",
    title: "The Get Visible benchmark: 2026 paid search costs by vertical",
    deck: "CPCs, CVR bands, and LTV:CAC tolerances across 180+ active accounts — our annual state-of-the-auction."
  }
];

function Insights(){
  return (
    <section className="insights" id="insights">
      <div className="wrap insights__head">
        <div>
          <span className="micro">06 — Insights</span>
          <h2 className="display insights__h2">Writing for operators, <em className="serif">not algorithms.</em></h2>
        </div>
        <a className="link" href="#">Read the journal <span>→</span></a>
      </div>
      <div className="wrap insights__grid">
        {INSIGHTS.map((it, i) => (
          <a key={i} className="insight" href="#">
            <div className="insight__meta mono"><span>{it.tag}</span><span>·</span><span>{it.date}</span><span>·</span><span>{it.read}</span></div>
            <h3 className="insight__title serif">{it.title}</h3>
            <p className="insight__deck">{it.deck}</p>
            <span className="insight__arr">Read →</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function CTA(){
  return (
    <section className="sp-section" id="start">
      <div className="sp-section__head">
        <div>
          <span className="micro">07 — Get a proposal</span>
          <h2 className="display sp-section__h2">Tell us where you are, and where you need to be.</h2>
        </div>
        <p className="sp-section__sub">No forced "book a demo" funnel. Fill this out honestly and a partner replies — within one business day — with a one-page read and three benchmarks we'd hold ourselves to in the first 90 days.</p>
      </div>
      <div className="sp-section__wrap">
        <StartForm variant="v1"/>
      </div>
    </section>
  );
}

function CTAOld(){
  return (
    <section className="cta">
      <div className="wrap cta__wrap">
        <div className="cta__left">
          <span className="micro">07 — Start</span>
          <h2 className="display cta__h2">
            Let's put a number<br/>
            on the <em className="serif">next quarter.</em>
          </h2>
          <p className="cta__sub">
            Tell us where you are and where you need to be. We'll come back with a honest read — a one-page forecast, the first three bets, and whether we're the right team to make them.
          </p>
          <div className="cta__actions">
            <a className="btn btn--primary" href="mailto:hello@getvisible.com">Book an intro call <span className="arrow">→</span></a>
            <a className="btn btn--ghost" href="case-study.html">Read a case study <span className="arrow">→</span></a>
          </div>
        </div>
        <div className="cta__right">
          <dl className="cta__facts">
            <div><dt className="mono">Response time</dt><dd>Within 1 business day.</dd></div>
            <div><dt className="mono">Engagement size</dt><dd>$15k – $120k / mo.</dd></div>
            <div><dt className="mono">Onboard window</dt><dd>14 days, signed to live.</dd></div>
            <div><dt className="mono">Reporting cadence</dt><dd>Weekly ops, monthly ex-team.</dd></div>
          </dl>
        </div>
      </div>
    </section>
  );
}

function Page(){
  useReveal();
  React.useEffect(() => {
    // KPI count-up
    const nodes = document.querySelectorAll('[data-count]');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (!e.isIntersecting) return;
        const el = e.target;
        const end = parseFloat(el.getAttribute('data-count'));
        const isFloat = end % 1 !== 0;
        const dur = 1600;
        const t0 = performance.now();
        const tick = (t) => {
          const p = Math.min((t - t0)/dur, 1);
          const eased = 1 - Math.pow(1-p, 3);
          const v = end * eased;
          el.textContent = isFloat ? v.toFixed(1) : Math.round(v).toString();
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.unobserve(el);
      });
    }, {threshold: 0.5});
    nodes.forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <CursorBlob/>
      <Nav active="home"/>
      <main>
        <Hero/>
        <Logos/>
        <Belief/>
        <Services/>
        <Channels/>
        <Work/>
        <Method/>
        <People/>
        <Testimonial/>
        <Insights/>
        <CTA/>
      </main>
      <Footer/>
      <Tweaks/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);