/* Raintree Ads — components */

const openCalendly = (e) => {
  if (e) e.preventDefault();
  if (typeof Calendly !== 'undefined') {
    Calendly.initPopupWidget({
      url: 'https://calendly.com/will-raintreeads/discover-call?hide_event_type_details=1&hide_gdpr_banner=1&background_color=03080f&text_color=eaf3fb&primary_color=7de6f0',
      prefill: {},
      utm: {},
      pageSettings: {
        backgroundColor: '03080f',
        textColor: 'eaf3fb',
        primaryColor: '7de6f0',
        hideEventTypeDetails: true,
        hideLandingPageDetails: false,
        hideGdprBanner: true
      }
    });
  }
  return false;
};

const Arrow = ({ size = 14 }) =>
<svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Logo = () =>
<a href="#" className="nav-logo" aria-label="Raintree Ads">
    <img src="assets/raintree-logo-cropped.png" alt="Raintree Ads" style={{ width: "250px", objectFit: "contain", height: "40px" }} />
  </a>;


const Nav = () =>
<nav className="nav" style={{ backgroundColor: 'rgba(6, 13, 24, 0)' }}>
    <Logo />
    <ul className="nav-links">
      <li><a href="#services">Services</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#process">Process</a></li>
      <li><a href="#team">Team</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a href="" onClick={openCalendly} className="nav-cta" style={{ width: "120px" }}>Book a call <Arrow /></a>
  </nav>;


/* ---- Hero canvas: animated wave bands ---- */
const HeroCanvas = () => {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let t = 0;

    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = canvas.offsetWidth * dpr;
      canvas.height = canvas.offsetHeight * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    window.addEventListener('resize', resize);

    const draw = () => {
      const w = canvas.offsetWidth;
      const h = canvas.offsetHeight;
      ctx.clearRect(0, 0, w, h);

      // Slow vertical light shafts
      for (let i = 0; i < 5; i++) {
        const x = w / 5 * i + Math.sin(t * 0.0005 + i) * 60;
        const grd = ctx.createLinearGradient(x, 0, x, h);
        grd.addColorStop(0, 'rgba(140, 230, 250, 0)');
        grd.addColorStop(0.4, 'rgba(140, 230, 250, 0.04)');
        grd.addColorStop(1, 'rgba(140, 230, 250, 0)');
        ctx.fillStyle = grd;
        ctx.fillRect(x - 60, 0, 120, h);
      }

      // Plankton particles
      for (let i = 0; i < 40; i++) {
        const seedX = i * 137.5 % w;
        const seedY = i * 91.7 % h;
        const px = seedX + Math.sin(t * 0.0004 + i) * 30;
        const py = seedY + Math.cos(t * 0.0006 + i * 0.5) * 20 + t * 0.02 % h - h / 2;
        const wrappedY = (py % h + h) % h;
        const size = 0.6 + Math.sin(t * 0.002 + i) * 0.4;
        const alpha = 0.4 + Math.sin(t * 0.003 + i) * 0.3;
        ctx.beginPath();
        ctx.arc(px, wrappedY, size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(150, 230, 250, ${alpha})`;
        ctx.fill();
      }

      t += 16;
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
    };
  }, []);

  return <canvas ref={canvasRef} className="hero-canvas" />;
};

const Hero = () =>
<section className="hero" data-screen-label="01 Hero">
    <HeroCanvas />
    <div className="caustic-bg"></div>
    <div className="hero-vignette"></div>
    <div className="wordmark-huge">raintree</div>

    <div className="container hero-content">
      <span className="eyebrow">PERFORMANCE MARKETING · EST. 2025</span>
      <h1>
        We make Meta Ads<br />
        <em>profitable</em> at scale.
      </h1>
      <p className="hero-sub">Raintree Ads builds custom acquisition systems for ambitious businesses. Cross-applicable learnings from eight verticals, deployed inside one disciplined process.


    </p>
      <div className="hero-actions">
        <a href="" onClick={openCalendly} className="btn btn-primary">Start a project <Arrow /></a>
        <a href="#work" className="btn btn-ghost">See the work</a>
      </div>
    </div>

    <aside className="hero-side">
      <div className="compass-card">
        <div className="compass-head">
          <span className="compass-label">Vertical Coverage</span>
          <span className="compass-id">RT-08</span>
        </div>
        <div className="compass-viz">
          <svg viewBox="0 0 200 200" className="compass-svg">
            <defs>
              <radialGradient id="compass-glow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="var(--bio)" stopOpacity="0.18" />
                <stop offset="70%" stopColor="var(--bio)" stopOpacity="0" />
              </radialGradient>
            </defs>
            <circle cx="100" cy="100" r="90" fill="url(#compass-glow)" />
            <circle cx="100" cy="100" r="88" fill="none" stroke="rgba(180,210,240,0.12)" strokeWidth="0.5" />
            <circle cx="100" cy="100" r="64" fill="none" stroke="rgba(180,210,240,0.10)" strokeWidth="0.5" strokeDasharray="2 3" />
            <circle cx="100" cy="100" r="40" fill="none" stroke="rgba(180,210,240,0.08)" strokeWidth="0.5" />
            <line x1="100" y1="12" x2="100" y2="188" stroke="rgba(180,210,240,0.08)" strokeWidth="0.5" />
            <line x1="12" y1="100" x2="188" y2="100" stroke="rgba(180,210,240,0.08)" strokeWidth="0.5" />
            <line x1="36" y1="36" x2="164" y2="164" stroke="rgba(180,210,240,0.05)" strokeWidth="0.5" />
            <line x1="164" y1="36" x2="36" y2="164" stroke="rgba(180,210,240,0.05)" strokeWidth="0.5" />
            {[
          { a: -90, l: 'eCommerce' },
          { a: -45, l: 'Real Estate' },
          { a: 0, l: 'SaaS' },
          { a: 45, l: 'Home Svcs' },
          { a: 90, l: 'Legal' },
          { a: 135, l: 'Healthcare' },
          { a: 180, l: 'Live Events' },
          { a: -135, l: 'B2B' }].
          map((p, i) => {
            const rad = p.a * Math.PI / 180;
            const r = 70;
            const x = 100 + Math.cos(rad) * r;
            const y = 100 + Math.sin(rad) * r;
            return (
              <g key={i}>
                  <circle cx={x} cy={y} r="2.5" fill="var(--bio)" opacity="0.85">
                    <animate attributeName="opacity" values="0.4;1;0.4" dur={`${3 + i * 0.3}s`} repeatCount="indefinite" />
                  </circle>
                  <circle cx={x} cy={y} r="5" fill="var(--bio)" opacity="0.15" />
                </g>);

          })}
            <circle cx="100" cy="100" r="3" fill="var(--bio)" />
            <circle cx="100" cy="100" r="6" fill="none" stroke="var(--bio)" strokeWidth="0.5" opacity="0.5" />
            <g className="compass-sweep">
              <path d="M 100 100 L 100 10 A 90 90 0 0 1 178 60 Z" fill="var(--bio)" opacity="0.06" />
              <line x1="100" y1="100" x2="100" y2="10" stroke="var(--bio)" strokeWidth="0.6" opacity="0.6" />
            </g>
          </svg>
        </div>
        <div className="compass-foot">
          <div className="compass-row"><span className="k">Verticals</span><span className="v">10+</span></div>
          <div className="compass-row"><span className="k">Cross-pollination</span><span className="v active">Active</span></div>
        </div>
      </div>
      <div className="signal-card">
        <div className="signal-head">
          <span className="signal-pulse"></span>
          <span className="signal-label">NOW DEPLOYING NEW CAMPAIGNS </span>
        </div>
        <div className="signal-body">From kickoff to first ad live in 7 days. We move fast so your pipeline doesn't wait.

      </div>
      </div>
    </aside>

    <div className="hero-meta">
      <div className="hero-coords">
        <span>LAT 34.052N</span>
        <span>LON 118.243W</span>
        <span>SECTOR · META</span>
      </div>
      <div className="hero-depth">
        <span>SCANNING</span>
        <span className="bar"></span>
      </div>
    </div>
  </section>;


/* ---- Logos strip ---- */
const clientLogos = [
{ src: 'assets/logos/axion.png', alt: 'Axion' },
{ src: 'assets/logos/lwland.png', alt: 'LW Land' },
{ src: 'assets/logos/wfh.png', alt: "World's Fastest Humans" },
{ src: 'assets/logos/alicia-winters.png', alt: 'Alicia Winters' },
{ src: 'assets/logos/wb.png', alt: 'WB' },
{ src: 'assets/logos/hass.png', alt: 'Hass Avocado Board' },
{ src: 'assets/logos/dewberry.png', alt: 'Dewberry Farm' },
{ src: 'assets/logos/bushel-row.png', alt: 'Bushel & Row' },
{ src: 'assets/logos/servicesetter.png', alt: 'ServiceSetter' },
{ src: 'assets/logos/peach-state.png', alt: 'Peach State Probate' },
{ src: 'assets/logos/ittybeady.png', alt: 'Itty Beady' },
{ src: 'assets/logos/memori.png', alt: 'Memorí' },
{ src: 'assets/logos/bitcoin-merch.png', alt: 'Bitcoin Merch' },
{ src: 'assets/logos/fundae.png', alt: 'Fundae' },
{ src: 'assets/logos/grizzly-golf.png', alt: 'Grizzly Golf' },
{ src: 'assets/logos/karo.png', alt: 'KARO' },
{ src: 'assets/logos/morgan-rhea.png', alt: 'Morgan Rhea' },
{ src: 'assets/logos/rogue-life.png', alt: 'Rogue Life Co.' },
{ src: 'assets/logos/rowdy-trails.png', alt: 'Rowdy Trails' },
{ src: 'assets/logos/tn-nursery.png', alt: 'TN Nursery' }];


const Logos = () => {
  // Duplicate for seamless marquee loop
  const reel = [...clientLogos, ...clientLogos];
  return (
    <section className="logos" data-screen-label="02 Clients">
      <div className="container">
        <div className="logos-label">
          <span className="label">Trusted by operators across eight verticals</span>
        </div>
      </div>
      <div className="logos-marquee">
        <div className="logos-track">
          {reel.map((l, i) =>
          <div key={i} className="logo-cell" aria-label={l.alt}>
              <img src={l.src} alt={l.alt} loading="lazy" />
            </div>
          )}
        </div>
        <div className="logos-fade logos-fade-l"></div>
        <div className="logos-fade logos-fade-r"></div>
      </div>
    </section>);

};


/* ---- Services ---- */
const ServiceIcon = ({ kind }) => {
  const stroke = { stroke: 'currentColor', strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'strategy':
      return (
        <svg width="26" height="26" viewBox="0 0 26 26">
          <circle cx="13" cy="13" r="9" {...stroke} />
          <circle cx="13" cy="13" r="5" {...stroke} />
          <circle cx="13" cy="13" r="1.5" fill="currentColor" />
          <path d="M13 1v3M13 22v3M1 13h3M22 13h3" {...stroke} />
        </svg>);

    case 'creative':
      return (
        <svg width="26" height="26" viewBox="0 0 26 26">
          <path d="M4 22V8l9-5 9 5v14" {...stroke} />
          <path d="M4 14l9 5 9-5" {...stroke} />
          <path d="M13 13v9" {...stroke} />
        </svg>);

    case 'media':
      return (
        <svg width="26" height="26" viewBox="0 0 26 26">
          <path d="M3 13c3-4 6-4 10 0s7 4 10 0" {...stroke} />
          <path d="M3 19c3-4 6-4 10 0s7 4 10 0" {...stroke} />
          <path d="M3 7c3-4 6-4 10 0s7 4 10 0" {...stroke} />
        </svg>);

    case 'analytics':
      return (
        <svg width="26" height="26" viewBox="0 0 26 26">
          <path d="M3 22h20" {...stroke} />
          <rect x="6" y="14" width="3" height="8" {...stroke} />
          <rect x="11.5" y="9" width="3" height="13" {...stroke} />
          <rect x="17" y="4" width="3" height="18" {...stroke} />
        </svg>);

  }
};

const Services = () =>
<section id="services" data-screen-label="03 Services">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">What we do</span>
        <h2 className="section-title">A complete acquisition <em>system</em>, not a checklist of tactics.</h2>
        <p className="section-sub">
          Every engagement integrates strategy, creative, media buying and analytics into one feedback loop.
          We pull learnings from across our portfolio and deploy them where they matter most for your business.
        </p>
      </div>
      <div className="services-grid">
        <div className="service-card">
          <span className="num">001 / Strategy</span>
          <div className="icon"><ServiceIcon kind="strategy" /></div>
          <h3>Acquisition strategy</h3>
          <p>Offer architecture, audience mapping, full-funnel measurement plans. We diagnose before we deploy.</p>
          <div className="niches">
            <span className="niche-tag">Offer design</span>
            <span className="niche-tag">Funnel audit</span>
            <span className="niche-tag">Forecasting</span>
          </div>
        </div>
        <div className="service-card">
          <span className="num">002 / Creative</span>
          <div className="icon"><ServiceIcon kind="creative" /></div>
          <h3>Creative production</h3>
          <p>UGC, statics, motion, and direct-response concepts produced in-house at portfolio velocity.</p>
          <div className="niches">
            <span className="niche-tag">UGC</span>
            <span className="niche-tag">Motion</span>
            <span className="niche-tag">Statics</span>
            <span className="niche-tag">Iteration loops</span>
          </div>
        </div>
        <div className="service-card">
          <span className="num">003 / Media</span>
          <div className="icon"><ServiceIcon kind="media" /></div>
          <h3>Meta Ads buying</h3>
          <p>Account structure, bidding strategy, budget pacing — engineered for predictable, profitable scale.</p>
          <div className="niches">
            <span className="niche-tag">Facebook</span>
            <span className="niche-tag">Instagram</span>
            <span className="niche-tag">Advantage+</span>
            <span className="niche-tag">CAPI</span>
          </div>
        </div>
        <div className="service-card">
          <span className="num">004 / Analytics</span>
          <div className="icon"><ServiceIcon kind="analytics" /></div>
          <h3>Measurement &amp; insight</h3>
          <p>Server-side tracking, MMM, incrementality testing. Decisions tied to dollars, not dashboards.</p>
          <div className="niches">
            <span className="niche-tag">CAPI</span>
            <span className="niche-tag">MMM</span>
            <span className="niche-tag">Geo lift</span>
            <span className="niche-tag">LTV modeling</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ---- Stats ---- */
const Stats = () =>
<section className="stats" data-screen-label="04 Stats">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">By the numbers</span>
        <h2 className="section-title">Ten verticals. <em>One discipline.</em></h2>
      </div>
    </div>
    <div className="stats-grid">
      <div className="stat">
        <span className="tag">Lifetime managed spend</span>
        <span className="num">$<em>180</em>M+</span>
        <span className="label">Profitably deployed across the Meta ecosystem since 2022.</span>
      </div>
      <div className="stat">
        <span className="tag">Active partnerships</span>
        <span className="num"><em>30</em>+</span>
        <span className="label">Brands actively scaling on Meta with Raintree as their growth partner.</span>
      </div>
      <div className="stat">
        <span className="tag">Verticals served</span>
        <span className="num"><em>8</em>+</span>
        <span className="label">eCommerce, real estate, SaaS, home services, legal, healthcare, live events &amp; more.</span>
      </div>
      <div className="stat">
        <span className="tag">Creatives shipped / yr</span>
        <span className="num"><em>5K</em>+</span>
        <span className="label">Volume is the lever. Disciplined testing turns it into compounding learning.</span>
      </div>
    </div>
  </section>;


/* ---- Cases ---- */
const cases = [
{
  name: 'Dewberry Farm',
  niche: 'Live Events · Agritourism',
  img: 'assets/case-dewberry.png',
  headline: '+192% ROAS in 30 days.',
  desc: 'Revamped campaign structure to push spend toward ticket sales over engagement, scaled creative volume, and lifted ROAS from $2 to $5.85 in the first month.',
  platforms: ['Meta'],
  metrics: [['+192%', 'ROAS / 30D'], ['$5.85', 'Final ROAS']]
},
{
  name: 'FlexiBake',
  niche: 'B2B SaaS · Bakery Software',
  img: 'assets/case-flexibake.png',
  headline: 'Cut CPL 74%. Tripled lead volume.',
  desc: 'High-volume, varied creative testing strategy paired with a campaign restructure to systematically identify and scale winning concepts.',
  platforms: ['Meta'],
  metrics: [['-74%', 'Cost per lead'], ['+289%', 'Lead volume']]
},
{
  name: 'Grizzly Golf',
  niche: 'eCommerce · Apparel',
  img: 'assets/case-grizzly.png',
  headline: '+86% revenue in six months.',
  desc: 'Six months of compounding gains on Shopify + Meta — creative iteration loops that founders Megan & Corey called out by name.',
  platforms: ['Shopify', 'Meta'],
  metrics: [['+86%', 'Revenue PoP'], ['+16%', 'ROAS PoP']]
},
{
  name: 'LW Land',
  niche: 'Real Estate · Land Development',
  img: 'assets/case-lwland.png',
  headline: 'Made Meta the primary lead channel.',
  desc: 'Reconstructed offer delivery to engage qualified prospects across both inbound calls and web leads. Took Meta from secondary to primary lead source.',
  platforms: ['HighLevel', 'Meta'],
  metrics: [['1°', 'Lead channel'], ['↑↑↑', 'Creative volume']]
},
{
  name: 'Peach State Probate',
  niche: 'Legal · Probate',
  img: 'assets/case-peachstate.png',
  headline: '-93% CPL. +241% lead volume.',
  desc: 'Tracking infrastructure rebuild plus a dynamic targeting strategy that guided the algorithm while letting machine learning capture additional leads.',
  platforms: ['lawbrokr', 'Meta'],
  metrics: [['-93%', 'Cost per lead'], ['+241%', 'Lead volume']]
}];



const Cases = () =>
<section id="work" data-screen-label="05 Work">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Selected work</span>
        <h2 className="section-title">Outcomes, not <em>impressions.</em></h2>
        <p className="section-sub">A slice of recent engagements across our portfolio. Full case studies available on request.</p>
      </div>
      <div className="cases-grid">
        {cases.map((c, i) =>
      <article key={i} className="case">
            <div className="case-media">
              <img src={c.img} alt={c.name} loading="lazy" />
              <div className="case-media-overlay"></div>
            </div>
            <div className="case-body">
              <div className="case-niche">{c.niche}</div>
              <h3>{c.headline}</h3>
              <p style={{ color: 'var(--pearl-3)', fontSize: 15 }}>{c.desc}</p>
              <div className="case-result">
                {c.metrics.map(([m, l], j) =>
            <div key={j}>
                    <div className="metric">{m}</div>
                    <div className="metric-label">{l}</div>
                  </div>
            )}
              </div>
              <div className="case-foot">
                <span className="case-name">{c.name}</span>
                <span className="case-platforms">
                  {c.platforms.map((p, k) => <span key={k} className="platform-pill">{p}</span>)}
                </span>
              </div>
            </div>
          </article>
      )}
      </div>
    </div>
  </section>;


/* ---- Process visual: animated nodes ---- */
const ProcessVisual = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf,t = 0;
    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = canvas.offsetWidth * dpr;
      canvas.height = canvas.offsetHeight * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    window.addEventListener('resize', resize);

    const nodes = [
    { x: 0.5, y: 0.15, label: 'AUDIT' },
    { x: 0.18, y: 0.45, label: 'STRATEGY' },
    { x: 0.82, y: 0.45, label: 'CREATIVE' },
    { x: 0.18, y: 0.78, label: 'MEDIA' },
    { x: 0.82, y: 0.78, label: 'INSIGHT' },
    { x: 0.5, y: 0.55, label: 'LOOP', center: true }];

    const edges = [[0, 1], [0, 2], [1, 5], [2, 5], [5, 3], [5, 4], [3, 4], [1, 2]];

    const draw = () => {
      const w = canvas.offsetWidth,h = canvas.offsetHeight;
      ctx.clearRect(0, 0, w, h);

      // Soft radial bg
      const grd = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w * 0.6);
      grd.addColorStop(0, 'rgba(80, 200, 230, 0.06)');
      grd.addColorStop(1, 'rgba(0,0,0,0)');
      ctx.fillStyle = grd;ctx.fillRect(0, 0, w, h);

      // Edges
      edges.forEach(([a, b], i) => {
        const A = nodes[a],B = nodes[b];
        ctx.beginPath();
        ctx.moveTo(A.x * w, A.y * h);
        ctx.lineTo(B.x * w, B.y * h);
        ctx.strokeStyle = 'rgba(180, 220, 240, 0.15)';
        ctx.lineWidth = 1;
        ctx.stroke();

        // Pulse along edge
        const phase = (t * 0.0008 + i * 0.2) % 1;
        const px = A.x * w + (B.x * w - A.x * w) * phase;
        const py = A.y * h + (B.y * h - A.y * h) * phase;
        ctx.beginPath();
        ctx.arc(px, py, 2.5, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(140, 230, 250, 0.9)';
        ctx.fill();
      });

      // Nodes
      nodes.forEach((n) => {
        const x = n.x * w,y = n.y * h;
        const r = n.center ? 24 : 5;
        // glow
        const g = ctx.createRadialGradient(x, y, 0, x, y, r * 4);
        g.addColorStop(0, 'rgba(140, 230, 250, 0.3)');
        g.addColorStop(1, 'rgba(140, 230, 250, 0)');
        ctx.fillStyle = g;
        ctx.beginPath();ctx.arc(x, y, r * 4, 0, Math.PI * 2);ctx.fill();

        ctx.beginPath();ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fillStyle = n.center ? 'rgba(140, 230, 250, 0.15)' : 'rgba(140, 230, 250, 1)';
        ctx.fill();
        if (n.center) {
          ctx.strokeStyle = 'rgba(140, 230, 250, 0.6)';
          ctx.lineWidth = 1;
          ctx.stroke();
        }

        // label
        ctx.fillStyle = n.center ? 'rgba(180, 220, 240, 0.7)' : 'rgba(180, 220, 240, 0.55)';
        ctx.font = '10px "JetBrains Mono", monospace';
        ctx.textAlign = 'center';
        ctx.fillText(n.label, x, y + r + 16);
      });

      t += 16;
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => {cancelAnimationFrame(raf);window.removeEventListener('resize', resize);};
  }, []);
  return <canvas ref={ref} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />;
};

const Process = () =>
<section id="process" className="process" data-screen-label="06 Process">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">How we work</span>
        <h2 className="section-title">A closed-loop system, <em>tuned every week.</em></h2>
      </div>
      <div className="process-grid">
        <div className="process-steps">
          {[
        { n: '01', t: 'Audit & diagnose', d: 'We start by understanding your unit economics, current creative, and account history. No two systems begin the same.' },
        { n: '02', t: 'Strategy & forecast', d: 'A 90-day blueprint with specific spend, creative, and KPI targets. You sign off before we build.' },
        { n: '03', t: 'Build & launch', d: 'Account architecture, creative production, tracking infrastructure, and reporting — stood up in two weeks.' },
        { n: '04', t: 'Learn & compound', d: 'Weekly creative shipping cadence. Monthly portfolio learnings applied to your account. Quarterly strategic resets.' }].
        map((s) =>
        <div key={s.n} className="step">
              <span className="step-num">{s.n}</span>
              <div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
        )}
        </div>
        <div className="process-visual">
          <ProcessVisual />
        </div>
      </div>
    </div>
  </section>;


/* ---- Team — Founder spotlight ---- */
const Team = ({ tweaks = {} }) => {
  const photoSize = tweaks.founderPhotoSize ?? 360;
  const showStats = tweaks.founderShowStats ?? true;
  const showQuote = tweaks.founderShowQuote ?? true;
  const layout = tweaks.founderLayout ?? 'side';

  return (
    <section id="team" data-screen-label="07 Team" className={`founder-section founder-${layout}`}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Who you work with</span>
          <h2 className="section-title">No layers. <em>You work directly with the founder.</em></h2>
          <p className="section-sub">Most agencies sell senior strategy and ship junior execution. Raintree is built the other way around — the person on your sales call is the person on your account.</p>
        </div>
        <div className="founder-card-v2">
          <div className="founder-portrait" style={{ width: photoSize, height: photoSize }}>
            <img src="assets/team-will.png" alt="Will Kennon" />
            <div className="founder-portrait-frame"></div>
          </div>
          <div className="founder-body-v2">
            <span className="eyebrow" style={{ color: 'var(--bio)' }}>Founder · Strategy</span>
            <h3 className="founder-name-v2">Will Kennon</h3>
            <p className="founder-bio-v2">Will founded Raintree Ads in 2018 after running performance marketing in-house for high-growth eCommerce and lead-gen brands. He’s personally managed over $50M in Meta spend and now leads strategy across every Raintree engagement.</p>
            {showStats &&
            <div className="founder-stats-v2">
                <div className="fs-item">
                  <div className="fs-num">$<em>180</em>M+</div>
                  <div className="fs-label">Meta spend managed</div>
                </div>
                <div className="fs-item">
                  <div className="fs-num"><em>10</em>+</div>
                  <div className="fs-label">Verticals scaled</div>
                </div>
                <div className="fs-item">
                  <div className="fs-num"><em>2018</em></div>
                  <div className="fs-label">Founded Raintree</div>
                </div>
              </div>
            }
            {showQuote &&
            <div className="founder-quote-v2">
                &ldquo;Most agencies optimize for what looks good in a pitch deck. We optimize for what your CFO sees at the end of the quarter.&rdquo;
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

};


/* ---- Testimonials ---- */
const tms = [
{ q: 'Will is the best at Meta Ads, he does a great job. I highly recommend him.', n: 'Tammy Sons', co: 'Owner, TN Nursery', a: 'T' },
{ q: 'Raintree took an account we thought had peaked and 4x\u2019d it in two quarters. The creative volume alone is unmatched.', n: 'Sarah Liu', co: 'CMO, Halcyon Living', a: 'S' },
{ q: 'Outstanding person to work with. Very knowledgeable and patient and most importantly gets the job done. Highly recommend!', n: 'Chris Meek', co: 'Client', a: 'C' }];

const Testimonials = () =>
<section className="testimonials" data-screen-label="08 Testimonials">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">From the bridge</span>
        <h2 className="section-title">What our partners say.</h2>
      </div>
      <div className="tm-grid">
        {tms.map((t, i) =>
      <div key={i} className="tm-card">
            <div className="tm-quote">&ldquo;{t.q}&rdquo;</div>
            <div className="tm-author">
              <div className="tm-avatar">{t.a}</div>
              <div>
                <div className="tm-name">{t.n}</div>
                <div className="tm-co">{t.co}</div>
              </div>
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


/* ---- CTA ---- */
const CTA = () =>
<section id="contact" className="cta" data-screen-label="09 Contact">
    <div className="container">
      <div className="cta-card">
        <h2>Ready to chart a <em>profitable</em> course?</h2>
        <p>Tell us about your business. We&rsquo;ll come back within 48 hours with whether we&rsquo;re a fit and a candid take on what we&rsquo;d do first.</p>
        <div className="cta-actions">
          <a href="" onClick={openCalendly} className="btn btn-primary">Book a strategy call <Arrow /></a>
          <a href="mailto:hello@raintreeads.com" className="btn btn-ghost">Email us</a>
        </div>
      </div>
    </div>
  </section>;


/* ---- Footer ---- */
const Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <Logo />
          <p className="tag">A performance marketing agency engineered for the Meta ecosystem.</p>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <a href="#services">Services</a>
          <a href="#work">Work</a>
          <a href="#process">Process</a>
          <a href="#team">Team</a>
        </div>
        <div className="footer-col">
          <h5>Verticals</h5>
          <a href="#">eCommerce</a>
          <a href="#">Real Estate</a>
          <a href="#">SaaS</a>
          <a href="#">Healthcare</a>
          <a href="#">Live Events</a>
        </div>
        <div className="footer-col">
          <h5>Contact</h5>
          <a href="#">hello@raintreeads.com</a>
          <a href="#">LinkedIn</a>
          <a href="#">Instagram</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Raintree Ads · All rights reserved</span>
        <span>Charted from Los Angeles, CA · 34.052°N 118.243°W</span>
      </div>
    </div>
  </footer>;


/* ---- App ---- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "founderPhotoSize": 360,
  "founderShowStats": true,
  "founderShowQuote": true,
  "founderLayout": "side",
  "founderAccent": "#7DE6F0"
} /*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Expose tweaks to non-hook components
  React.useEffect(() => {
    window.__tweaks = t;
    document.documentElement.style.setProperty('--bio-tweak', t.founderAccent);
    // Force re-render of Team component children when tweaks change
    window.dispatchEvent(new CustomEvent('tweaks-changed'));
  }, [t]);

  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  // Force Team to re-read tweaks on change via a dummy state bump
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => {force();}, [t]);

  return (
    <>
      <Nav />
      <Hero />
      <Logos />
      <Services />
      <Stats />
      <Cases />
      <Process />
      <Team tweaks={t} />
      <Testimonials />
      <CTA />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Founder section" />
        <TweakSlider
          label="Photo size"
          value={t.founderPhotoSize}
          min={200} max={520} step={10} unit="px"
          onChange={(v) => setTweak('founderPhotoSize', v)} />
        <TweakRadio
          label="Layout"
          value={t.founderLayout}
          options={['side', 'stacked']}
          onChange={(v) => setTweak('founderLayout', v)} />
        <TweakToggle
          label="Show stats row"
          value={t.founderShowStats}
          onChange={(v) => setTweak('founderShowStats', v)} />
        <TweakToggle
          label="Show pull-quote"
          value={t.founderShowQuote}
          onChange={(v) => setTweak('founderShowQuote', v)} />
        <TweakSection label="Theme" />
        <TweakColor
          label="Bioluminescent accent"
          value={t.founderAccent}
          onChange={(v) => setTweak('founderAccent', v)} />
      </TweaksPanel>
    </>);

};

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