// BrandRocket — bottom sections (budget, value breakdown, team, software, final CTA, footer)

/* ==================== OPPORTUNITY MAP (was Budget Allocation) ==================== */
function BudgetAllocation() {
  React.useEffect(() => {
    function fit(){
      var wrap = document.querySelector('.opp-section .stage-wrap');
      var stage = document.getElementById('oppStage');
      if(!wrap || !stage) return;
      var s = Math.min(1, wrap.clientWidth / 1000);
      stage.style.transform = 'translateX(-50%) scale(' + s + ')';
      wrap.style.height = (540 * s) + 'px';
    }
    fit();
    window.addEventListener('resize', fit);
    var t = setTimeout(fit, 300);
    return () => { window.removeEventListener('resize', fit); clearTimeout(t); };
  }, []);

  return (
    <section className="section opp-section">
      <div className="container">
        <div className="sec-head">
          <div className="opp-eyebrow">Paid Media Opportunity Map</div>
          <h2>Your Competitors Hope You<br/><span className="mark">Never Read This Report</span></h2>
          <p>We scan your public marketing and show you the revenue you're leaving on the table — channel by channel.</p>
        </div>

        <div className="stage-wrap">
          <div className="opp-stage" id="oppStage">
            <svg className="flightpaths" viewBox="0 0 1000 540" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <g stroke="#0F6F86" fill="none" opacity="0.10">
                <circle cx="500" cy="285" r="120"/>
                <circle cx="500" cy="285" r="195"/>
                <circle cx="500" cy="285" r="265"/>
                <circle cx="500" cy="285" r="345"/>
              </g>
              <g fill="none" stroke="#34B2CC" strokeWidth="2.2" strokeDasharray="3 7" strokeLinecap="round" opacity="0.9">
                <path d="M228,150 C268,172 278,190 300,214"/>
                <path d="M772,150 C732,172 722,190 700,214"/>
                <path d="M228,392 C272,400 282,402 300,404"/>
                <path d="M772,392 C728,400 718,402 700,404"/>
              </g>
              <g fill="#FEBE40" stroke="#143A44" strokeWidth="1.4">
                <circle cx="228" cy="150" r="6"/>
                <circle cx="772" cy="150" r="6"/>
                <circle cx="228" cy="392" r="6"/>
                <circle cx="772" cy="392" r="6"/>
              </g>
            </svg>

            <div className="opp-center">
              <div className="mini-dash">
                <div className="md-bar"><span className="md-dot"></span><span className="md-dot"></span><span className="md-dot"></span><span className="md-url">ads.google.com / performance</span></div>
                <div className="md-body">
                  <div className="md-top">
                    <div><div className="md-title">Campaign Performance</div><div className="md-sub">Search + Performance Max · 30 days</div></div>
                    <div className="md-date">Last 30 days</div>
                  </div>
                  <div className="md-metrics">
                    <div className="md-metric"><div className="md-l">Conversions</div><div className="md-v">1,284</div><div className="md-d">▲ 32%</div></div>
                    <div className="md-metric"><div className="md-l">ROAS</div><div className="md-v">4.1×</div><div className="md-d">▲ 0.6×</div></div>
                    <div className="md-metric"><div className="md-l">Cost/Conv</div><div className="md-v">$42</div><div className="md-d">▼ 18%</div></div>
                  </div>
                  <svg className="md-chart" viewBox="0 0 444 120" preserveAspectRatio="none" aria-hidden="true">
                    <defs><linearGradient id="mdfill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#34B2CC" stopOpacity="0.26"/><stop offset="100%" stopColor="#34B2CC" stopOpacity="0"/></linearGradient></defs>
                    <g stroke="#EEF2F5" strokeWidth="1"><line x1="0" y1="30" x2="444" y2="30"/><line x1="0" y1="65" x2="444" y2="65"/><line x1="0" y1="100" x2="444" y2="100"/></g>
                    <path d="M0,95 C60,88 95,80 132,82 C176,85 205,58 244,55 C292,51 330,36 362,30 C398,23 422,22 438,20 L438,118 L0,118 Z" fill="url(#mdfill)"/>
                    <path d="M0,95 C60,88 95,80 132,82 C176,85 205,58 244,55 C292,51 330,36 362,30 C398,23 422,22 438,20" fill="none" stroke="#34B2CC" strokeWidth="2.6" strokeLinecap="round"/>
                    <circle cx="438" cy="20" r="5" fill="#FEBE40" stroke="#fff" strokeWidth="2"/>
                  </svg>
                </div>
              </div>
            </div>

            <img className="opp-mascot" src="/assets/mascot-peek.png" alt="" />

            <div className="callout co-tl">
              <span className="co-bar" style={{background:'var(--br-blue-deep)'}}></span>
              <div className="co-top">
                <svg className="co-flag" viewBox="0 0 24 24" width="16" height="16"><path d="M6 3v18M6 4h11l-2.5 4 2.5 4H6" fill="#FEBE40" stroke="#143A44" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round"/></svg>
                <span className="co-label">Paid Search</span>
              </div>
              <div className="co-fig">+$58K<span>/mo</span></div>
              <div className="co-sub">untapped high-intent keywords</div>
            </div>

            <div className="callout co-tr">
              <span className="co-bar" style={{background:'var(--br-blue)'}}></span>
              <div className="co-top">
                <svg className="co-flag" viewBox="0 0 24 24" width="16" height="16"><path d="M6 3v18M6 4h11l-2.5 4 2.5 4H6" fill="#FEBE40" stroke="#143A44" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round"/></svg>
                <span className="co-label">Competitor Gap</span>
              </div>
              <div className="co-fig">+$31K<span>/mo</span></div>
              <div className="co-sub">keywords your rivals own</div>
            </div>

            <div className="callout co-bl">
              <span className="co-bar" style={{background:'var(--br-sky)'}}></span>
              <div className="co-top">
                <svg className="co-flag" viewBox="0 0 24 24" width="16" height="16"><path d="M6 3v18M6 4h11l-2.5 4 2.5 4H6" fill="#FEBE40" stroke="#143A44" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round"/></svg>
                <span className="co-label">YouTube</span>
              </div>
              <div className="co-fig">+$24K<span>/mo</span></div>
              <div className="co-sub">video demand you're missing</div>
            </div>

            <div className="callout co-br">
              <span className="co-bar" style={{background:'var(--br-cta)'}}></span>
              <div className="co-top">
                <svg className="co-flag" viewBox="0 0 24 24" width="16" height="16"><path d="M6 3v18M6 4h11l-2.5 4 2.5 4H6" fill="#FEBE40" stroke="#143A44" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round"/></svg>
                <span className="co-label">Meta Retargeting</span>
              </div>
              <div className="co-fig">+$18K<span>/mo</span></div>
              <div className="co-sub">cart-abandon recovery</div>
            </div>
          </div>
        </div>

        <div className="opp-cta-row">
          <a href="/free-growth-plan" className="btn btn-primary">Get Your Free Growth Plan →</a>
          <span className="opp-cta-note">Built from your public data. Yours in 5 days — no call required.</span>
        </div>
      </div>
    </section>
  );
}

/* ==================== VALUE BREAKDOWN ==================== */
function ValueBreakdown() {
  React.useEffect(() => {
    function fit(){
      var wrap = document.querySelector('.reveal-wrap');
      var stage = document.getElementById('revealStage');
      if(!wrap || !stage) return;
      var s = Math.min(1, wrap.clientWidth / 700);
      stage.style.transform = 'translateX(-50%) scale(' + s + ')';
      wrap.style.height = (380 * s) + 'px';
    }
    fit();
    window.addEventListener('resize', fit);
    var t = setTimeout(fit, 300);
    return () => { window.removeEventListener('resize', fit); clearTimeout(t); };
  }, []);
  const items = [
    {title:'Business & Market Analysis', desc:"We prove we actually get your business — your positioning, your market, and who you're really up against."},
    {title:'Competitive Ad Landscape',   desc:"Who's bidding on your keywords, what their ads claim, and where they're beating you — or bluffing."},
    {title:'Paid Media Opportunities',   desc:'The keywords, platforms, and audiences you’re leaving on the table — sized in real dollars.'},
    {title:'Budget & Performance Benchmarks', desc:'What “good” actually looks like in your category, so you know if your numbers are winning or lying.'},
    {title:'Strategic Roadmap',          desc:"A prioritized do-this-first plan — not a vague 'let's optimize and see' hand-wave."},
    {title:'Custom Pricing',             desc:"Exactly what it'd cost to work with us. No 'book a call to find out' games."},
  ];
  const VBIcon = ({ i }) => {
    const icons = [
      <path d="M4 21V4l8-1v18M12 21V8l8-1v15M3 21h18" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />,
      <><rect x="3" y="4" width="11" height="9" rx="1.5" stroke="currentColor" strokeWidth="2" fill="none"/><rect x="10" y="11" width="11" height="9" rx="1.5" stroke="currentColor" strokeWidth="2" fill="none"/></>,
      <><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" fill="none"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" fill="none"/><circle cx="12" cy="12" r="1" fill="currentColor"/></>,
      <path d="M3 20h18M7 20v-6M12 20v-11M17 20v-4" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />,
      <path d="M6 21V4h13l-3 4 3 4H6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />,
      <><path d="M20 13l-7 7-9-9V4h7z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/></>,
    ];
    return <svg viewBox="0 0 24 24" width="22" height="22">{icons[i]}</svg>;
  };
  return (
    <section className="section vb-section">
      <div className="container">
        <div className="sec-head">
          <h2>Most "Free Plans" Are a Sales Pitch in a<br/><span className="mark">Trench Coat. Not This One.</span></h2>
          <p>Six modules of real findings you can act on — with us, or without us.</p>
        </div>
        <div className="vb-row">
          {items.map((v, i) => (
            <div className="vb-card" key={i}>
              <div className="vb-icon"><VBIcon i={i} /></div>
              <h4>{v.title}</h4>
              <p>{v.desc}</p>
            </div>
          ))}
        </div>
        <div className="reveal-wrap">
          <div className="reveal-stage" id="revealStage">
            <svg className="rings" viewBox="0 0 700 380" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <g stroke="#0F6F86" fill="none" opacity="0.08">
                <circle cx="350" cy="195" r="118"/>
                <circle cx="350" cy="195" r="180"/>
                <circle cx="350" cy="195" r="245"/>
              </g>
            </svg>

            <div className="rp rp-left">
              <div className="rp-band" style={{background:'var(--br-blue-deep)'}}><span className="b-dot"></span><span className="b-t">Competitive Ad Landscape</span></div>
              <div className="rp-body">
                <div className="rp-h" style={{width:'68%'}}></div>
                <div className="rp-bars">
                  <span style={{height:'45%', background:'var(--br-sky)'}}></span>
                  <span style={{height:'72%', background:'var(--br-blue)'}}></span>
                  <span style={{height:'58%', background:'var(--br-blue-deep)'}}></span>
                  <span style={{height:'90%', background:'var(--br-cta)'}}></span>
                  <span style={{height:'38%', background:'var(--br-sky)'}}></span>
                </div>
                <div className="rp-line"></div><div className="rp-line" style={{width:'82%'}}></div><div className="rp-line" style={{width:'64%'}}></div>
              </div>
            </div>

            <div className="rp rp-right">
              <div className="rp-band" style={{background:'var(--br-teal)'}}><span className="b-dot"></span><span className="b-t">Strategic Roadmap</span></div>
              <div className="rp-body">
                <div className="rp-h" style={{width:'72%'}}></div>
                <div className="rp-check"><em></em><i></i></div>
                <div className="rp-check"><em></em><i style={{width:'85%'}}></i></div>
                <div className="rp-check"><em></em><i style={{width:'70%'}}></i></div>
                <div className="rp-check"><em></em><i style={{width:'90%'}}></i></div>
                <div className="rp-line" style={{marginTop:10, width:'60%'}}></div>
              </div>
            </div>

            <div className="rp rp-front">
              <div className="rp-band" style={{background:'var(--br-navy)'}}><span className="b-dot"></span><span className="b-t">Paid Media Opportunities</span></div>
              <div className="rp-body">
                <div className="rp-h" style={{width:'58%'}}></div>
                <div className="rp-chips">
                  <div className="rp-chip"><i></i><b>+$58K</b></div>
                  <div className="rp-chip"><i></i><b>4.1×</b></div>
                  <div className="rp-chip"><i></i><b>$42</b></div>
                </div>
                <svg className="rp-chart" viewBox="0 0 190 64" preserveAspectRatio="none" aria-hidden="true">
                  <defs><linearGradient id="rpfill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#34B2CC" stopOpacity="0.28"/><stop offset="100%" stopColor="#34B2CC" stopOpacity="0"/></linearGradient></defs>
                  <path d="M0,52 C30,48 46,40 70,42 C96,44 110,24 134,20 C160,16 176,12 190,9 L190,64 L0,64 Z" fill="url(#rpfill)"/>
                  <path d="M0,52 C30,48 46,40 70,42 C96,44 110,24 134,20 C160,16 176,12 190,9" fill="none" stroke="#34B2CC" strokeWidth="2.4" strokeLinecap="round"/>
                  <circle cx="190" cy="9" r="4" fill="#FEBE40" stroke="#fff" strokeWidth="1.6"/>
                </svg>
                <div className="rp-line"></div><div className="rp-line" style={{width:'76%'}}></div>
              </div>
            </div>
          </div>
        </div>
        <div style={{textAlign:'center', marginTop:18}}>
          <span className="reveal-tag"><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M6 3v18M6 4h11l-2.5 4 2.5 4H6" fill="#FEBE40" stroke="#143A44" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round"/></svg>A real 10–15 page document — yours to keep, no call required</span>
        </div>

        <form className="gp-form" onSubmit={(e) => e.preventDefault()}>
          <div className="gp-fields">
            <input type="text" placeholder="Your name" aria-label="Your name" required />
            <input type="url" placeholder="Your business website" aria-label="Your business website" required />
            <input type="email" placeholder="Work email" aria-label="Work email" required />
          </div>
          <button type="submit" className="btn btn-primary">Get Your Free Growth Plan →</button>
          <p className="gp-form-note">We build it from your public website — no account access, no spam. The URL is what we scan.</p>
        </form>
      </div>
    </section>
  );
}

/* ==================== TEAM ==================== */
function Team() {
  const depts = ['All', 'Paid Media', 'CRO', 'SEO', 'Creative', 'Analytics', 'Strategy'];
  const [active, setActive] = React.useState(0);

  const seed = (i) => {
    const palettes = [
      ['#FFD3A8','#F58220'], ['#C7E2F4','#2EA3F2'], ['#D6F0E7','#34B2CC'],
      ['#FCE0DC','#E89BB1'], ['#E8DFFA','#A89BE0'], ['#FCE9B5','#FFB400'],
      ['#D4EDC9','#7AC3A1'], ['#FFE2D1','#F6A87A'],
    ];
    return palettes[i % palettes.length];
  };
  const team = Array.from({length: 14}, (_, i) => ({
    name: ['Alex M.','Jordan R.','Sam K.','Casey D.','Riley P.','Morgan B.','Jamie L.','Taylor V.','Avery N.','Quinn S.','Drew W.','Sky H.','Reese O.','Blake C.'][i],
    title: ['Sr. Paid Strategist','CRO Lead','SEO Director','Creative Director','Analytics Lead','Account Director','Sr. PPC Manager','Designer','Copywriter','VP Strategy','Data Analyst','Media Buyer','SEO Specialist','Sr. Designer'][i],
  }));
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <h2>Top 1% Marketers Who <span className="mark">Actually Give a Damn</span><br/>About Your Growth</h2>
          <p>Award-winning specialists across every channel — and yes, you'll be on a first-name basis with the people running your ads.</p>
        </div>
        <div className="team-tabs">
          {depts.map((d,i) => (
            <button key={i} className={`tab ${i===active?'active':''}`} onClick={() => setActive(i)}>{d}</button>
          ))}
        </div>
        <div className="team-row">
          {team.map((t, i) => {
            const [c1, c2] = seed(i);
            return (
              <div className="team-card" key={i}>
                <div className="team-photo" style={{background: `linear-gradient(180deg, ${c1}, #fff)`}}>
                  <svg viewBox="0 0 100 130" width="90" height="115">
                    {/* shoulders */}
                    <path d="M0 130 Q 50 90 100 130 Z" fill={c2} />
                    {/* head */}
                    <ellipse cx="50" cy="55" rx="22" ry="26" fill="#F4D2B0" />
                    {/* hair */}
                    <path d="M28 50 Q 50 22 72 50 Q 72 38 50 30 Q 28 38 28 50 Z" fill={c2} opacity=".9" />
                  </svg>
                </div>
                <div className="team-name">{t.name}</div>
                <div className="team-title">{t.title}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ==================== SOFTWARE SHOWCASE ==================== */
function Software() {
  return (
    <section className="section sw-section">
      <div className="container">
        <div className="sec-head">
          <h2>Our Software <span style={{color:'var(--br-cta)'}}>(Kite)</span> Tracks, Alerts,<br/>&amp; Helps You Hit Every Goal</h2>
          <p>Built in-house over 4 years. Anomaly detection, pacing alerts, and always-on attribution for every BrandRocket client.</p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap: 32, alignItems:'center'}}>
          <div style={{position:'relative'}}>
          <img src="/assets/mascot-surprised.png" alt="" style={{position:'absolute', top:-60, left:-60, width:130, height:130, objectFit:'contain', zIndex:2, pointerEvents:'none'}} />
          <div className="sw-frame">
            <div className="browser-bar">
              <div className="dot"></div><div className="dot"></div><div className="dot"></div>
              <div className="browser-url">kite.brandrocket.net</div>
            </div>
            <div style={{padding: 24}}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:16, alignItems:'center'}}>
                <div>
                  <div style={{fontSize:11, textTransform:'uppercase', color:'var(--br-muted)', letterSpacing:1}}>Account: Apple Inc.</div>
                  <div style={{fontSize:22, fontWeight:800, fontFamily:'var(--font-head)', color:'var(--br-text-strong)'}}>Conversion Pacing</div>
                </div>
                <div style={{display:'flex', gap:6}}>
                  <span style={{fontSize:11, padding:'4px 10px', background:'#FEE6CC', color:'var(--br-cta)', borderRadius:99, fontWeight:700}}>2 alerts</span>
                  <span style={{fontSize:11, padding:'4px 10px', background:'#D6F0E7', color:'#28A745', borderRadius:99, fontWeight:700}}>On track</span>
                </div>
              </div>
              {/* Line chart */}
              <svg viewBox="0 0 600 200" width="100%" height="200" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="area" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0" stopColor="#2EA3F2" stopOpacity=".25" />
                    <stop offset="1" stopColor="#2EA3F2" stopOpacity="0" />
                  </linearGradient>
                </defs>
                {/* grid */}
                {[40, 80, 120, 160].map(y => <line key={y} x1="0" x2="600" y1={y} y2={y} stroke="#EEF2F6" />)}
                {/* goal area */}
                <path d="M0,140 L100,128 L200,116 L300,100 L400,84 L500,68 L600,52 L600,200 L0,200 Z" fill="#FCE9B5" opacity=".55" />
                {/* actual line */}
                <path d="M0,150 L100,132 L200,108 L300,82 L400,68 L500,48 L600,28" stroke="#2EA3F2" strokeWidth="3" fill="none" />
                <path d="M0,150 L100,132 L200,108 L300,82 L400,68 L500,48 L600,28 L600,200 L0,200 Z" fill="url(#area)" />
                {/* goal line */}
                <path d="M0,150 L600,40" stroke="#F58220" strokeWidth="2" strokeDasharray="4 4" fill="none" />
                {/* dots */}
                {[[0,150],[100,132],[200,108],[300,82],[400,68],[500,48],[600,28]].map(([x,y],i) =>
                  <circle key={i} cx={x} cy={y} r="4" fill="#fff" stroke="#2EA3F2" strokeWidth="2.5" />
                )}
              </svg>
              </div>
              <div style={{display:'flex', gap:32, marginTop:16, fontSize:13}}>
                <div><span style={{color:'var(--br-muted)'}}>This week</span> <strong style={{color:'var(--br-text-strong)'}}>2,148</strong></div>
                <div><span style={{color:'var(--br-muted)'}}>vs last week</span> <strong style={{color:'#28A745'}}>+12.4%</strong></div>
                <div><span style={{color:'var(--br-muted)'}}>Forecast</span> <strong style={{color:'var(--br-text-strong)'}}>9,820 / mo</strong></div>
              </div>
            </div>
          </div>
          <div>
            <div style={{display:'grid', gap:14}}>
              {[
                {ic:'⚡', t:'Live anomaly alerts', s:'Get pinged when CPC, CTR, or conversion rate drift outside your normal band.'},
                {ic:'🎯', t:'Goal pacing', s:'Always know whether you\'re ahead, on, or behind month-to-date pacing.'},
                {ic:'🔗', t:'Unified attribution', s:'Server-side conversion tracking that survives cookie deprecation.'},
              ].map((x,i) => (
                <div key={i} style={{padding:18, background:'#fff', borderRadius:12, border:'1px solid var(--br-border)', boxShadow:'var(--shadow-sm)'}}>
                  <div style={{fontSize:24, marginBottom:6}}>{x.ic}</div>
                  <div style={{fontWeight:700, color:'var(--br-text-strong)', marginBottom:4}}>{x.t}</div>
                  <div style={{fontSize:13, color:'var(--br-muted)'}}>{x.s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==================== FINAL CTA ==================== */
function FinalCTA() {
  return (
    <section className="final-cta" id="contact">
      <svg className="cta-wave-top" viewBox="0 0 1440 60" preserveAspectRatio="none" aria-hidden>
        <path fill="#0F6F86" d="M0,60 L0,42 C 30,42 40,28 70,28 C 100,28 110,42 140,42 C 170,42 180,22 215,22 C 250,22 260,42 290,42 C 320,42 332,30 365,30 C 400,30 410,42 440,42 C 470,42 482,18 520,18 C 560,18 572,42 600,42 C 630,42 642,30 678,30 C 715,30 725,42 755,42 C 785,42 798,22 835,22 C 875,22 885,42 915,42 C 945,42 958,32 992,32 C 1028,32 1040,42 1070,42 C 1100,42 1112,20 1150,20 C 1190,20 1202,42 1230,42 C 1260,42 1272,30 1308,30 C 1345,30 1355,42 1385,42 C 1410,42 1420,36 1440,36 L1440,60 Z" />
      </svg>
      <div className="fc-cloud fc-cloud-1" style={{top:30,  left:'10%'}}><Cloud w={100} color="#fff" opacity={.32} /></div>
      <div className="fc-cloud fc-cloud-2" style={{top:80,  left:'-10%'}}><Cloud w={70}  color="#fff" opacity={.30} /></div>
      <div className="fc-cloud fc-cloud-3" style={{top:160, left:'60%'}}><Cloud w={120} color="#fff" opacity={.25} /></div>
      <div className="fc-cloud fc-cloud-4" style={{top:220, left:'5%'}}><Cloud w={80}  color="#fff" opacity={.28} /></div>
      <div className="fc-cloud fc-cloud-5" style={{top:50,  left:'70%'}}><Cloud w={60}  color="#fff" opacity={.35} /></div>
      <div className="container">
        <h2>Stop Dating Agencies.<br/>Get a Straight Answer.</h2>
        <p className="lede">One honest conversation about where your money's going — and where it should be.</p>
        <a href="#" className="btn btn-primary" style={{fontSize:17, padding:'20px 36px'}}>Get Your Free Growth Plan →</a>
      </div>
    </section>
  );
}
function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="nav-logo" style={{marginBottom:12}}>
              <img src="/assets/brandrocket.png" alt="BrandRocket" style={{height:36, filter:'brightness(0) invert(1)'}} />
            </div>
            <p style={{fontSize:14, color:'#9DAEC0', marginBottom:14}}>Honest marketing that grows your business.</p>
            <p style={{fontSize:13, color:'#9DAEC0'}}>2727 E. Camelback Rd #416<br/>Phoenix, AZ 85016<br/>602-600-6240</p>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              <li><a href="#">Google Ads</a></li>
              <li><a href="#">Facebook Ads</a></li>
              <li><a href="#">YouTube Ads</a></li>
              <li><a href="#">LinkedIn Ads</a></li>
              <li><a href="#">CRO</a></li>
            </ul>
          </div>
          <div>
            <h5>Resources</h5>
            <ul>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Case Studies</a></li>
              <li><a href="#">Podcast</a></li>
              <li><a href="#">Industry Guides</a></li>
              <li><a href="#">Free Growth Plan</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Rates</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </div>
          <div>
            <h5>Connect</h5>
            <ul>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Twitter / X</a></li>
              <li><a href="#">YouTube</a></li>
              <li><a href="#">Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 BrandRocket. All rights reserved.</span>
          <div style={{display:'flex', gap:18}}>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.BudgetAllocation = BudgetAllocation;
window.ValueBreakdown = ValueBreakdown;
window.Team = Team;
window.Software = Software;
window.FinalCTA = FinalCTA;
window.Footer = Footer;