// Main BrandRocket homepage components.
const { useState, useEffect } = React;

/* ==================== NAV + ANNOUNCEMENT ==================== */
function AnnouncementBar() {
  return (
    <div className="announce">
      🚀 We Hit 88% of Client Goals in Q1 — <a href="/free-growth-plan">You should be next →</a>
    </div>
  );
}

function Nav() {
  return (
    <div className="nav-wrap">
      <div className="container nav">
        <a href="#" className="nav-logo">
          <img src="/assets/brandrocket.png" alt="BrandRocket" className="nav-logo-img" />
        </a>
        <div className="nav-links">
          <div className="nav-drop">
            <button className="nav-drop-trigger" type="button">Services <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg></button>
            <div className="nav-panel">
              <div className="nav-panel-inner">
                <div className="nav-col">
                  <span className="nav-col-label">Paid Advertising</span>
                  <a href="/ppc-agency">PPC Agency</a>
                  <a href="#">Google Ads Agency</a>
                  <a href="/facebook-ads-agency">Facebook Ads Agency</a>
                  <a href="/linkedin-ads-agency">LinkedIn Ads Agency</a>
                  <a href="/industries/lead-generation">Lead Generation Agency</a>
                </div>
                <div className="nav-col">
                  <span className="nav-col-label">Creative</span>
                  <a href="#">Creative Production</a>
                </div>
                <div className="nav-col">
                  <span className="nav-col-label">Conversion</span>
                  <a href="/landing-page-development">Landing Page Development</a>
                  <a href="#">Conversion Rate Optimization</a>
                </div>
              </div>
            </div>
          </div>
          <div className="nav-drop">
            <button className="nav-drop-trigger" type="button">Who We Help <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg></button>
            <div className="nav-panel">
              <div className="nav-panel-inner">
                <div className="nav-col">
                  <span className="nav-col-label">By Business Type</span>
                  <a href="/industries/saas">SaaS</a>
                  <a href="#">eCommerce</a>
                  <a href="#">Local Service Businesses</a>
                  <a href="#">Professional Services</a>
                </div>
              </div>
            </div>
          </div>
          <div className="nav-drop">
            <button className="nav-drop-trigger" type="button">Resources <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg></button>
            <div className="nav-panel">
              <div className="nav-panel-inner">
                <div className="nav-col">
                  <span className="nav-col-label">Learn</span>
                  <a href="/resources#blog">Blog & Articles</a>
                  <a href="/resources/guides">Industry Guides</a>
                  <a href="/resources#videos">Videos</a>
                </div>
              </div>
            </div>
          </div>
          <a href="/results">Results</a>
          <a href="/rates">Rates</a>
        </div>
        <a href="/free-growth-plan" className="btn btn-primary">Get Your Free Growth Plan</a>
      </div>
    </div>
  );
}

/* ==================== HERO ==================== */
function Hero() {
  return (
    <section className="hero">
      <div className="hero-cloud hero-cloud-1" style={{position:'absolute', top:60, left:'80%'}}><Cloud w={90} color="#fff" opacity={.9} /></div>
      <div className="hero-cloud hero-cloud-2" style={{position:'absolute', top:120, left:'95%'}}><Cloud w={70} color="#fff" opacity={.85} /></div>
      <div className="hero-cloud hero-cloud-3" style={{position:'absolute', bottom:80, left:'70%'}}><Cloud w={60} color="#fff" opacity={.7} /></div>

      <div className="container hero-grid">
        <div>
          <h1>
            Small Business Marketing That Delivers <span className="hl">Results</span>, Not Excuses
          </h1>
          <p className="lede">
            Smart, targeted campaigns across Google, Facebook, and LinkedIn — built to attract your best customers, eliminate wasted spend, and drive real revenue growth.
          </p>
          <div className="hero-cta">
            <a href="/free-growth-plan" className="btn btn-primary">Get Your Free Growth Plan</a>
          </div>
        </div>
        <div className="hero-vis">
          <img className="mascot-hover" src="/assets/mascot-wave.png" alt="BrandRocket mascot waving" />
        </div>
      </div>
    </section>
  );
}

/* ==================== DATA CATEGORIES ==================== */
function CatIcon({ kind }) {
  const paths = {
    finance: <path d="M4 8h16M6 12h6M6 16h10M14 4l4 4-4 4" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />,
    market: <path d="M4 18l5-6 4 4 7-9M16 7h4v4" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />,
    audience: <><circle cx="9" cy="9" r="3" stroke="currentColor" strokeWidth="2" fill="none" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5M16 11a3 3 0 100-6M21 20c0-2-1.5-3.5-4-4" stroke="currentColor" strokeWidth="2" fill="none" /></>,
    competitor: <><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="2" fill="none" /><path d="M12 8v4l3 2" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" /></>,
    customer: <path d="M12 2L4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6l-8-4z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round" />,
  };
  return <svg viewBox="0 0 24 24" width="22" height="22">{paths[kind]}</svg>;
}

function Categories() {
  const cats = [
    { kind: 'finance',    label: 'Financial Data',   sub: 'Revenue & ROAS' },
    { kind: 'market',     label: 'Marketing Data',   sub: 'Channels & Funnels' },
    { kind: 'audience',   label: 'Audience Data',    sub: 'Targeting & Segments' },
    { kind: 'competitor', label: 'Competitor Data',  sub: 'Benchmarks & Gaps' },
    { kind: 'customer',   label: 'Customer Data',    sub: 'LTV & Retention' },
  ];
  return (
    <section className="cats">
      <div className="container cats-row">
        {cats.map((c,i) => (
          <div className="cat" key={i}>
            <div className="cat-icon"><CatIcon kind={c.kind} /></div>
            <div>
              <div className="cat-label">{c.label}</div>
              <div className="cat-sub">{c.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ==================== GOAL MATCH ==================== */
function GoalMatch() {
  const platforms = [
    {
      key:'google',
      name:'Google',
      tag:'Search Ads',
      desc:'Capture high-intent demand the moment people are searching for what you sell.',
      best:'Best for: lead gen, e-commerce, local services',
      logo:(
        <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden>
          <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.5l6.8-6.8C35.6 2.4 30.2 0 24 0 14.6 0 6.5 5.4 2.5 13.3l7.9 6.1C12.4 13.7 17.7 9.5 24 9.5z"/>
          <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.9 7.2l7.6 5.9c4.4-4.1 7.1-10.1 7.1-17.6z"/>
          <path fill="#FBBC05" d="M10.4 28.6c-.5-1.5-.8-3.1-.8-4.6s.3-3.1.8-4.6l-7.9-6.1C.9 16.4 0 20.1 0 24s.9 7.6 2.5 10.7l7.9-6.1z"/>
          <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.6-5.9c-2.1 1.4-4.8 2.3-8.3 2.3-6.3 0-11.6-4.2-13.6-10l-7.9 6.1C6.5 42.6 14.6 48 24 48z"/>
        </svg>
      ),
    },
    {
      key:'youtube',
      name:'YouTube',
      tag:'Video Ads',
      desc:'Get in front of the right viewers with video that builds demand before they’re even searching for you.',
      best:'Best for: awareness, demand gen, retargeting',
      logo:(
        <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden>
          <rect x="3" y="11" width="42" height="26" rx="7" fill="#FF0000"/>
          <path d="M20 18l11 6-11 6z" fill="#fff"/>
        </svg>
      ),
    },
    {
      key:'meta',
      name:'Meta',
      tag:'Facebook & Instagram',
      desc:'Reach the right audiences with creative that scrolls past the noise and converts.',
      best:'Best for: e-commerce, B2C brands, retargeting',
      logo:(
        <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden>
          <defs>
            <linearGradient id="metaGrad" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#0064E1"/>
              <stop offset="100%" stopColor="#19AFFF"/>
            </linearGradient>
          </defs>
          <path d="M24 24 C19 15 9 15 9 24 C9 33 19 33 24 24 C29 15 39 15 39 24 C39 33 29 33 24 24 Z" fill="none" stroke="url(#metaGrad)" strokeWidth="5.2" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      key:'linkedin',
      name:'LinkedIn',
      tag:'B2B & Recruiting',
      desc:'Target decision-makers by job, company, and industry — built for serious B2B pipelines.',
      best:'Best for: B2B SaaS, enterprise, professional services',
      logo:(
        <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden>
          <rect x="2" y="2" width="44" height="44" rx="6" fill="#0A66C2"/>
          <rect x="11" y="20" width="6" height="18" fill="#fff"/>
          <circle cx="14" cy="13.5" r="3.5" fill="#fff"/>
          <path fill="#fff" d="M21 20h6v2.5c1-1.7 3.2-3 6.2-3 5 0 6.8 2.8 6.8 7.7V38h-6v-9.5c0-2.3-.8-3.8-3-3.8s-3.5 1.5-3.5 3.8V38h-6V20z"/>
        </svg>
      ),
    },
  ];

  return (
    <section className="goal-match section">
      <div className="container">
        <div className="gm-head">
          <h2>We Match Your Revenue Goals to the<br/>Platforms That'll Hit Them</h2>
          <p className="gm-sub">
            Need 20 qualified leads per month? Want to double your online sales? We'll reverse-engineer your goal across Google, YouTube, Meta, and LinkedIn — then show you which mix gets you there for the least money.
          </p>
        </div>
        <div className="gm-grid">
          {platforms.map(p => (
            <div className={"gm-card" + (p.key === 'google' ? ' gm-card--has-mascot' : '')} key={p.key}>
              {p.key === 'google' && (
                <img
                  src="/assets/mascot-lean.png"
                  alt=""
                  aria-hidden="true"
                  className="gm-mascot-lean"
                />
              )}
              <div className="gm-card-top">
                <div className="gm-logo">{p.logo}</div>
                <div>
                  <div className="gm-name">{p.name}</div>
                  <div className="gm-tag">{p.tag}</div>
                </div>
              </div>
              <p className="gm-desc">{p.desc}</p>
              <div className="gm-best">{p.best}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== SUCCESS RATE ==================== */
function SuccessRate() {
  const tiers = [
    { range: '$3K – $10K', label: 'Scrappy startups', sub: 'Just getting traction' },
    { range: '$10K – $50K', label: 'Growth-stage', sub: 'Scaling what works' },
    { range: '$50K – $150K', label: 'Established', sub: 'Optimizing the engine' },
    { range: '$150K – $300K+', label: 'Enterprise', sub: 'Multi-channel orchestration' },
  ];
  return (
    <section className="section success-rate">
      <div className="container">
        <div className="sec-head">
          <h2>Our Client Success Rate Is <span className="mark">Higher Than Our Coffee Consumption</span><br/>(And That's Saying Something)</h2>
          <p>From $3K/month budgets to $300K/month spenders, we've helped businesses at every stage. Your free plan shows what's possible for your budget.</p>
        </div>
        <div className="sr-row">
          {tiers.map((t, i) => (
            <div className="sr-card" key={i}>
              <div className="sr-range">{t.range}<span className="sr-mo">/mo</span></div>
              <div className="sr-label">{t.label}</div>
              <div className="sr-sub">{t.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== LOGO WALL ==================== */
function LogoWall() {
  const logos = Array.from({ length: 10 }, (_, i) => i);
  return (
    <section className="section logos-section" id="results">
      <div className="container">
        <div className="sec-head">
          <h2>We Don't Measure Success by How Many <span className="mark">Logos</span> Fit on a Page</h2>
          <p>Logos just prove someone hired us. They don't prove we made anyone money. Ask for the real numbers — what we spent and what it brought back — and we'll walk you through every one.</p>
        </div>
        <div className="logo-wall">
          {logos.map((i) => (
            <div className="logo-cell" key={i}>
              <span className="lg-text lg-pending">Pending</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== TESTIMONIALS ==================== */
function Testimonials() {
  const items = [
    { name:'Jason Beers',    company:'Crescent Roots Psychological Services', bg:'#0F6F86'},
    { name:'Stacy Reese',    company:'Freckled Frog Dance Studio',            bg:'#2D7F6E'},
    { name:'Teal Cooper',    company:'VendiBean',                             bg:'#3B6EA5'},
    { name:'Pavel Sukhobok', company:'Potomac Debate Academy',               bg:'#4C5A8F'},
  ];
  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="container">
        <div className="t-row">
          {items.map((t, i) => (
            <div className="t-card" key={i} style={{background: `linear-gradient(160deg, ${t.bg}, ${t.bg}dd)`}}>
              <div className="t-play"></div>
              <div className="t-name">{t.name}</div>
              <div className="t-title">{t.company}</div>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'flex-end', marginTop: 18, gap: 12, alignItems:'center'}}>
          <span className="handwriting" style={{fontSize: 22}}>↑ Real clients. Real results. Hit play.</span>
        </div>
      </div>
    </section>
  );
}

/* ==================== REVIEW BADGES ==================== */
function ReviewBadges() {
  return (
    <section className="section-tight" style={{background:'var(--br-bg-soft)'}}>
      <div className="container badges-row">
        <div className="badge-card">
          <div style={{width:48, height:48, borderRadius:'50%', background:'#E94B35', color:'#fff', display:'grid', placeItems:'center', fontWeight:900, fontFamily:'var(--font-head)'}}>C</div>
          <div>
            <div className="badge-stars">★★★★★</div>
            <div><span className="badge-rating">4.9</span> <span style={{color:'var(--br-muted)', fontSize:13}}>on Clutch</span></div>
          </div>
        </div>
        <div className="badge-card">
          <div style={{width:48, height:48, borderRadius:'50%', background:'#FF492C', color:'#fff', display:'grid', placeItems:'center', fontWeight:900, fontFamily:'var(--font-head)'}}>G2</div>
          <div>
            <div className="badge-stars">★★★★★</div>
            <div><span className="badge-rating">4.8</span> <span style={{color:'var(--br-muted)', fontSize:13}}>on G2 (240 reviews)</span></div>
          </div>
        </div>
        <div className="badge-card">
          <div style={{width:48, height:48, borderRadius:'50%', background:'#4285F4', color:'#fff', display:'grid', placeItems:'center', fontWeight:900, fontSize:11}}>★</div>
          <div>
            <div className="badge-stars">★★★★★</div>
            <div><span className="badge-rating">5.0</span> <span style={{color:'var(--br-muted)', fontSize:13}}>Google Partner</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AnnouncementBar = AnnouncementBar;
window.Nav = Nav;
window.Hero = Hero;
window.GoalMatch = GoalMatch;
window.SuccessRate = SuccessRate;
window.Categories = Categories;
window.LogoWall = LogoWall;
window.Testimonials = Testimonials;
window.ReviewBadges = ReviewBadges;