/* ============================================================
   BrandRocket — SHARED PAGE SECTIONS
   ------------------------------------------------------------
   Sections that appear on MORE THAN ONE page live here, ONCE.
   Edit a section in this file and every page that imports it
   updates automatically — no copy-paste across pages.

   HOW TO USE ON A PAGE:
   Load this file AFTER React/ReactDOM/Babel and BEFORE the
   page's own <script>:
       <script type="text/babel" data-presets="env,react" src="/shared-sections.jsx"></script>
   Then use the component by name in that page's App, e.g.:
       <SharedLandingCRO />

   Each section is exported to window at the bottom so every
   page's script can see it.
   ============================================================ */

/* Landing-page + CRO section.
   Used on: PPC Agency, Facebook Ads. Add new pages to this list
   as you reuse it, so we know what an edit here affects. */
function SharedLandingCRO() {
  const cards = [
    { t:'One Page. One Job.', p:'Every page we build targets a single offer and a single action — no nav, no distractions, no leaks. The visitor your ad sent has exactly one thing to do.', icon:(<svg viewBox="0 0 24 24" fill="none" stroke="var(--br-blue-deep)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.4" fill="var(--br-blue)" stroke="none"/></svg>) },
    { t:'Built On Your Buyer\u2019s Words.', p:'We mine real voice-of-customer language so the page sounds like the person you\u2019re trying to win — not like a brochure written by committee.', icon:(<svg viewBox="0 0 24 24" fill="none" stroke="var(--br-blue-deep)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5h16v11H8l-4 3z"/><path d="M8 10h8M8 13h5"/></svg>) },
    { t:'Cheaper Clicks, Not Just More Leads.', p:'A tight message-match between ad and page lifts your Quality Score — so Google charges you less for the very same clicks. CRO that pays you back twice.', icon:(<svg viewBox="0 0 24 24" fill="none" stroke="var(--br-blue-deep)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19V5M4 19h16M8 16v-4M13 16V9M18 16v-7"/></svg>) },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="ppc-head"><h2>You Already Paid for the Click. <span className="mark">Now Make It Count.</span></h2><p>Most landing pages waste the traffic that lands on them. We rebuild yours around your actual buyer, your real customer’s words, and an 18-section CRO framework — so the same ad spend has a fighting chance at producing real leads.</p></div>
        <div style={{display:'flex', gap:'28px', flexWrap:'wrap', justifyContent:'center', maxWidth:'940px', margin:'0 auto'}}>
          {cards.map((c,i) => (
            <div key={i} style={{flex:'1 1 240px', minWidth:'240px', maxWidth:'300px', textAlign:'center'}}>
              <div style={{width:'58px', height:'58px', margin:'0 auto 14px', display:'grid', placeItems:'center'}}>{c.icon}</div>
              <h3 style={{fontFamily:'var(--font-head)', fontSize:'18px', fontWeight:800, color:'var(--br-text-strong)', margin:'0 0 8px'}}>{c.t}</h3>
              <p style={{fontSize:'14.5px', color:'var(--br-muted)', lineHeight:1.6, margin:0}}>{c.p}</p>
            </div>
          ))}
        </div>
        <div style={{display:'flex', gap:'14px', justifyContent:'center', flexWrap:'wrap', marginTop:'36px'}}>
          <a href="/free-growth-plan" className="btn btn-primary">Get Your Free Growth Plan</a>
          <a href="/landing-page-development" className="btn btn-secondary">See how we build pages →</a>
        </div>
      </div>
    </section>
  );
}

/* Reporting section ("See the Numbers, Understand the Story").
   Used on: PPC Agency, Facebook Ads. */
function SharedReporting() {
  return (
    <section className="section">
      <div className="container">
        <div className="ppc-head"><h2>See the Numbers, <span className="mark">Understand the Story</span></h2><p>You'll receive detailed performance dashboards AND personalized video updates that break down what the data means for your business. No jargon, no metric salad — just clear explanations of whether your ads are making money or wasting it.</p></div>
        <div className="rep-vis">
          <div className="rep-dash">
            <div className="rep-bar"><i style={{background:'#ED6A5E'}}></i><i style={{background:'#F4BF4F'}}></i><i style={{background:'#61C554'}}></i><span className="rep-title">Performance — This Month</span></div>
            <div className="rep-body">
              <svg viewBox="0 0 320 96" width="100%" height="96" preserveAspectRatio="none" aria-hidden="true">
                <defs><linearGradient id="repFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#34B2CC" stopOpacity=".28"/><stop offset="100%" stopColor="#34B2CC" stopOpacity="0"/></linearGradient></defs>
                <path d="M0,80 L40,70 L80,74 L120,54 L160,58 L200,38 L240,42 L280,22 L320,14 L320,96 L0,96 Z" fill="url(#repFill)"/>
                <polyline points="0,80 40,70 80,74 120,54 160,58 200,38 240,42 280,22 320,14" fill="none" stroke="#0F6F86" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <div className="rep-kpis">
                <div className="rep-kpi"><div className="k-num">312</div><div className="k-lbl">Leads</div></div>
                <div className="rep-kpi"><div className="k-num">$41</div><div className="k-lbl">Cost / Lead</div></div>
                <div className="rep-kpi"><div className="k-num">4.8x</div><div className="k-lbl">ROAS</div></div>
              </div>
              <div className="rep-loom">
                <div className="lm-thumb"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                <div className="lm-txt"><b>Your monthly walkthrough</b><span>A short Loom, in plain English</span></div>
              </div>
            </div>
          </div>
          <div className="rep-mascot-slot"><span>we translate the<br/>numbers for you</span></div>
        </div>
      </div>
    </section>
  );
}

/* Shared site footer — used on EVERY page. Edit once, updates everywhere.
   Inline styles reference CSS vars defined in styles.css (present on all pages).
   Year auto-updates so it never goes stale. */
function SharedFooter({ bg = '#123648', label } = {}) {
  const linkStyle = { color: '#A9C0CC', textDecoration: 'none', fontSize: '14px', lineHeight: 2 };
  const headStyle = { fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: '12px', letterSpacing: '1.4px', textTransform: 'uppercase', color: '#fff', marginBottom: '10px' };
  const col = (label, links) => (
    <div>
      <div style={headStyle}>{label}</div>
      {links.map((l, i) => (<a key={i} href={l[1]} style={linkStyle} className="foot-link">{l[0]}</a>)).reduce((acc, el) => [...acc, el, <br key={'b'+acc.length} />], [])}
    </div>
  );
  return (
    <footer style={{ background: bg, color: '#A9C0CC', paddingTop: '54px' }}>
      {label && <div className="container" style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 13, letterSpacing: 1, color: '#fff', opacity: .8, paddingBottom: 20 }}>{label}</div>}
      <div className="container foot-grid">
        <div>
          <img src="/assets/brandrocket.png" alt="BrandRocket" style={{ height: 36, marginBottom: 16, filter: 'brightness(0) invert(1)', opacity: .95 }} />
          <p style={{ margin: 0, fontSize: '14px', lineHeight: 1.6, maxWidth: '30ch' }}>Honest marketing that grows your business.</p>
        </div>
        {col('Services', [['PPC Agency', '/ppc-agency'], ['Google Ads Agency', '/google-ads-agency'], ['SEM Agency', '/search-engine-marketing'], ['Facebook Ads Agency', '/facebook-ads-agency'], ['LinkedIn Ads Agency', '/linkedin-ads-agency'], ['Lead Generation Agency', '/industries/lead-generation'], ['Creative Production', '/creative-production'], ['Landing Page Development', '/landing-page-development'], ['Conversion Rate Optimization', '/conversion-rate-optimization']])}
        {col('Who We Help', [['B2B', '/industries/b2b'], ['SaaS', '/industries/saas'], ['eCommerce', '/industries/ecommerce'], ['Local Service Businesses', '/industries/local-services']])}
        {col('Company', [['About', '/about'], ['Results', '/results'], ['Rates', '/rates'], ['Contact', '/contact'], ['Blog', '/resources']])}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,.12)' }}>
        <div className="container" style={{ display: 'flex', flexWrap: 'wrap', gap: '14px', justifyContent: 'space-between', alignItems: 'center', padding: '18px 0', fontSize: '13px' }}>
          <span>© {new Date().getFullYear()} BrandRocket. All rights reserved.</span>
          <span style={{ display: 'flex', gap: '20px' }}><a href="/privacy" style={linkStyle} className="foot-link">Privacy</a><a href="/terms" style={linkStyle} className="foot-link">Terms</a></span>
        </div>
      </div>
    </footer>
  );
}

/* Shared top nav — used on EVERY page. Pass current="ppc|google|sem|facebook|linkedin|creative|landing|cro|saas|ecommerce|local|professional"
   to highlight the active link. Add a new page here ONCE and every page's nav updates. */
function SharedNav({ current }) {
  const cur = (k) => current === k ? 'current' : undefined;
  const caret = () => (<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>);
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]);
  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 {caret()}</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" className={cur('ppc')}>PPC Agency</a>
              <a href="/google-ads-agency" className={cur('google')}>Google Ads Agency</a>
              <a href="/search-engine-marketing" className={cur('sem')}>SEM Agency</a>
              <a href="/facebook-ads-agency" className={cur('facebook')}>Facebook Ads Agency</a>
              <a href="/linkedin-ads-agency" className={cur('linkedin')}>LinkedIn Ads Agency</a>
              <a href="/industries/lead-generation" className={cur('leadgen')}>Lead Generation Agency</a>
            </div>
            <div className="nav-col"><span className="nav-col-label">Creative</span>
              <a href="/creative-production" className={cur('creative')}>Creative Production</a>
            </div>
            <div className="nav-col"><span className="nav-col-label">Conversion</span>
              <a href="/landing-page-development" className={cur('landing')}>Landing Page Development</a>
              <a href="/conversion-rate-optimization" className={cur('cro')}>Conversion Rate Optimization</a>
            </div>
          </div></div>
        </div>
        <div className="nav-drop">
          <button className="nav-drop-trigger" type="button">Who We Help {caret()}</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/b2b" className={cur('b2b')}>B2B</a>
              <a href="/industries/saas" className={cur('saas')}>SaaS</a>
              <a href="/industries/ecommerce" className={cur('ecommerce')}>eCommerce</a>
              <a href="/industries/local-services" className={cur('local')}>Local Service Businesses</a>
            </div>
          </div></div>
        </div>
        <div className="nav-drop">
          <button className="nav-drop-trigger" type="button">Resources {caret()}</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" className={cur('results')}>Results</a>
        <a href="/rates" className={cur('rates')}>Rates</a>
      </div>
      <a href="/free-growth-plan" className="btn btn-primary nav-cta-desk">Get Your Free Growth Plan</a>
      <button className="nav-burger" type="button" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}><span></span><span></span><span></span></button>
      {open && (
        <div className="nav-mobile-overlay" onClick={close}>
          <nav className="nav-mobile" onClick={(e) => e.stopPropagation()}>
            <div className="nm-group"><span className="nm-label">Services</span>
              <a href="/ppc-agency" className={cur('ppc')} onClick={close}>PPC Agency</a>
              <a href="/google-ads-agency" className={cur('google')} onClick={close}>Google Ads Agency</a>
              <a href="/search-engine-marketing" className={cur('sem')} onClick={close}>SEM Agency</a>
              <a href="/facebook-ads-agency" className={cur('facebook')} onClick={close}>Facebook Ads Agency</a>
              <a href="/linkedin-ads-agency" className={cur('linkedin')} onClick={close}>LinkedIn Ads Agency</a>
              <a href="/industries/lead-generation" className={cur('leadgen')} onClick={close}>Lead Generation Agency</a>
              <a href="/creative-production" className={cur('creative')} onClick={close}>Creative Production</a>
              <a href="/landing-page-development" className={cur('landing')} onClick={close}>Landing Page Development</a>
              <a href="/conversion-rate-optimization" className={cur('cro')} onClick={close}>Conversion Rate Optimization</a>
            </div>
            <div className="nm-group"><span className="nm-label">Who We Help</span>
              <a href="/industries/b2b" className={cur('b2b')} onClick={close}>B2B</a>
              <a href="/industries/saas" className={cur('saas')} onClick={close}>SaaS</a>
              <a href="/industries/ecommerce" className={cur('ecommerce')} onClick={close}>eCommerce</a>
              <a href="/industries/local-services" className={cur('local')} onClick={close}>Local Service Businesses</a>
            </div>
            <div className="nm-group"><span className="nm-label">Resources</span>
              <a href="/resources#blog" onClick={close}>Blog & Articles</a>
              <a href="/resources/guides" onClick={close}>Industry Guides</a>
              <a href="/resources#videos" onClick={close}>Videos</a>
            </div>
            <div className="nm-group">
              <a href="/results" className={cur('results')} onClick={close}>Results</a>
              <a href="/rates" className={cur('rates')} onClick={close}>Rates</a>
            </div>
            <a href="/free-growth-plan" className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginTop:'6px'}}>Get Your Free Growth Plan</a>
          </nav>
        </div>
      )}
    </div></div>
  );
}

/* ⭐ CENTRAL CASE-STUDY DATA (real clients, July 2026). Names cleared per ad agreement.
   PDFs only (not indexed) — cards link to the PDF. No logos → segment color + monogram.
   Lifespring HELD pending corrected (non-confidential) PDF — add one row here when it lands.
   segColors drive the card cap/monogram/pill. channels map to assets/logos/<x>.svg. */
const CS_SEG = {
  Healthcare: '#0F6F86', B2B: '#7C6FD6', eCommerce: '#E08A1E', Education: '#34B2CC',
};
const CS_CHAN = {
  google: { src: '/assets/logos/google.svg', alt: 'Google Ads' },
  meta: { src: '/assets/logos/meta-color.svg', alt: 'Meta' },
  linkedin: { src: '/assets/logos/linkedin.svg', alt: 'LinkedIn' },
};
const CASE_STUDIES = [
  { mono:'BC', client:'Brenner Chiropractic', biz:'Single-location chiropractic', seg:'Healthcare', stat:'966 patient inquiries across a 3.5-year, two-channel program', channels:['google','meta'], tenure:'3.5 yrs', video:true, pdf:'/uploads/Brenner-Chiropractic_CaseStudy_2026-07-02.pdf' },
  { mono:'TT', client:'Tile Tools', biz:'Tile & masonry tools (Shopify)', seg:'eCommerce', stat:'Revenue doubled year-over-year at roughly 5× ROAS', channels:['google','meta'], tenure:'2.5 yrs', video:false, pdf:'/uploads/Tile-Tools_CaseStudy_2026-06-28.pdf' },
  { mono:'CR', client:'Crescent Roots', biz:'Multi-therapist psychology', seg:'Healthcare', stat:'From broken measurement to a predictable lead engine', channels:['google'], tenure:'14 mo', video:true, pdf:'/uploads/Crescent-Roots_CaseStudy_2026-06-29.pdf' },
  { mono:'VB', client:'VendiBean', biz:'B2B beverage technology', seg:'B2B', stat:'Inbound leads more than doubled, plus a new LinkedIn channel', channels:['google','linkedin'], tenure:'~3 yrs', video:true, pdf:'/uploads/VendiBean_CaseStudy_2026-06-29.pdf' },
  { mono:'BS', client:'Buck Steel', biz:'Commercial steel buildings', seg:'B2B', stat:'One-state proven model scaled into a multi-state pipeline', channels:['google'], tenure:'Since 2022', video:false, pdf:'/uploads/Buck-Steel_CaseStudy_2026-06-29.pdf' },
  { mono:'CC', client:'City Chiro Sports Center', biz:'Two-location sports chiropractic', seg:'Healthcare', stat:'Ad spend nearly doubled and phone calls grew 80%+', channels:['google'], tenure:'5 mo', video:false, pdf:'/uploads/City-Chiro-Sports_CaseStudy_2026-06-28.pdf' },
  { mono:'FF', client:'Freckled Frog Dance Studio', biz:"Children's dance studio", seg:'Education', stat:'Leads roughly tripled; 200+ new students fueled a franchise', channels:['google'], tenure:'Since 2023', video:true, pdf:'/uploads/Freckled-Frog_CaseStudy_2026-06-29.pdf' },
  { mono:'IM', client:'InMotion Pain Solutions', biz:'Pain management', seg:'Healthcare', stat:'Phone calls now ~3.7× the pre-BrandRocket baseline', channels:['google'], tenure:'18 mo', video:false, pdf:'/uploads/InMotion-Pain-Solutions_CaseStudy_2026-06-29.pdf' },
  { mono:'PP', client:'Pacific Psych Centers', biz:'Multi-location psychiatry', seg:'Healthcare', stat:'Eight continuous years of patient acquisition', channels:['google'], tenure:'Since 2018', video:false, pdf:'/uploads/Pacific-Psych-Centers_CaseStudy_2026-07-01.pdf' },
  { mono:'PD', client:'Potomac Debate Academy', biz:'Online debate academy', seg:'Education', stat:'Scaled to roughly 900–1,000 students nationwide', channels:['google'], tenure:'Since 2020', video:true, pdf:'/uploads/Potomac-Debate-Academy_CaseStudy_2026-06-29.pdf' },
  { mono:'RV', client:'Robinson Vacuum Tanks', biz:'Vacuum truck manufacturer', seg:'B2B', stat:'Grew from one channel to three over a six-year program', channels:['google','meta','linkedin'], tenure:'Since 2020', video:false, pdf:'/uploads/Robinson-Vacuum-Tanks_CaseStudy_2026-06-29.pdf' },
  { mono:'ST', client:'Sawyer Twain', biz:'Luxury game-room furniture', seg:'eCommerce', stat:'~21× ROAS, up from roughly 8× the prior year', channels:['meta'], tenure:'2026', video:false, pdf:'/uploads/Sawyer-Twain_CaseStudy_2026-06-30.pdf' },
  { mono:'TR', client:'True Rescue', biz:'Safety & rescue equipment', seg:'eCommerce', stat:'Q1 revenue tripled, ROAS doubled, B2B leads close at 37%', channels:['google','meta'], tenure:'Since 2023', video:false, pdf:'/uploads/True-Rescue_CaseStudy_2026-06-29.pdf' },
];

function CaseCard({ c }) {
  const seg = CS_SEG[c.seg] || 'var(--br-blue-deep)';
  return (
    <article className="cs-card" style={{'--seg': seg}}>
      <div className="cs-cap"></div>
      <div className="cs-body">
        <div className="cs-top">
          <div className="cs-mono">{c.mono}</div>
          <div className="cs-id"><div className="cs-name">{c.client}</div><div className="cs-biz">{c.biz}</div></div>
        </div>
        <p className="cs-stat">{c.stat}</p>
        <div className="cs-tags"><span className="cs-pill">{c.seg}</span><span className="cs-pill tenure">{c.tenure}</span></div>
        <div className="cs-foot">
          <div className="cs-chan">{c.channels.map(k => (<img key={k} src={CS_CHAN[k].src} alt={CS_CHAN[k].alt} title={CS_CHAN[k].alt} />))}</div>
          <div className="cs-links">
            {c.video && <span className="cs-watch"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>Video</span>}
            <a className="cs-read" href={c.pdf} target="_blank" rel="noopener">Read (PDF) →</a>
          </div>
        </div>
      </div>
    </article>
  );
}

/* Shared case-study grid. Service pages: pass filter={{channel}} or {{seg}} + limit (static subset).
   Results page: pass showFilters to get the interactive industry + channel chips over all studies. */
function SharedCaseStudies({ heading, subhead, filter, limit, showFilters } = {}) {
  const [seg, setSeg] = React.useState('All');
  const [chan, setChan] = React.useState('All');
  let list = CASE_STUDIES;
  if (filter && filter.seg) list = list.filter(c => c.seg === filter.seg);
  if (filter && filter.channel) list = list.filter(c => c.channels.includes(filter.channel));
  if (showFilters) {
    if (seg !== 'All') list = list.filter(c => c.seg === seg);
    if (chan !== 'All') list = list.filter(c => c.channels.includes(chan));
  }
  if (limit) list = list.slice(0, limit);
  const SEGS = ['All','Healthcare','B2B','eCommerce','Education'];
  const CHANS = [['All','All'],['google','Google Ads'],['meta','Meta'],['linkedin','LinkedIn']];
  return (
    <section className="section tr-section" id="results">
      <div className="container">
        <div className="ppc-head"><h2>{heading || <>Real Campaigns. Real Numbers. <span className="mark">Real Businesses.</span></>}</h2><p>{subhead || "We didn't build our reputation on enterprise logos and giant budgets. We built it helping small businesses grow profitably, one campaign at a time."}</p></div>
        {showFilters && (
          <div className="cs-filters">
            <div className="cs-fgroup"><span className="cs-flabel">Industry</span>{SEGS.map(s => (<button key={s} className={'cs-chip' + (seg===s?' active':'')} onClick={() => setSeg(s)}>{s}</button>))}</div>
            <div className="cs-sep"></div>
            <div className="cs-fgroup"><span className="cs-flabel">Channel</span>{CHANS.map(([k,lbl]) => (<button key={k} className={'cs-chip' + (chan===k?' active':'')} onClick={() => setChan(k)}>{lbl}</button>))}</div>
          </div>
        )}
        {list.length ? <div className="cs-grid">{list.map((c,i) => <CaseCard c={c} key={i} />)}</div> : <div className="cs-empty">No case studies match that combination yet — try a different filter.</div>}
      </div>
    </section>
  );
}

/* Legacy stat-pill proof grid — kept as SharedProof for any page still calling it.
   Prefer SharedCaseStudies (real data). */
function SharedProof({ heading, subhead } = {}) {
  const cases = [
    '25% decrease in cost per click','329% increase in conversion rate','42% decrease in cost per acquisition',
    '90% increase in conversions','86% increase in ROAS','195% increase in conversions',
    '128% increase in conversions','57% decrease in cost per conversion','174% increase in conversion rate',
  ];
  return (
    <section className="section tr-section" id="results">
      <div className="container">
        <div className="ppc-head"><h2>{heading || <>Real Campaigns. Real Numbers. <span className="mark">Real Businesses.</span></>}</h2><p>{subhead || "We didn't build our reputation on enterprise logos and giant budgets. We built it helping small businesses grow profitably, one campaign at a time. Full case studies drop in here as they clear."}</p></div>
        <div className="tr-grid">{cases.map((s,i) => (<div className="tr-card" key={i}><div className="tr-top"><div className="tr-logo">Pending</div><div className="tr-stat">{s}</div></div><div className="tr-bot"></div></div>))}</div>
      </div>
    </section>
  );
}

/* Shared VIDEO TESTIMONIALS grid. Placeholder posters until real video links/posters land.
   .vt-* CSS in styles.css. Parameterized: heading/subhead/items. */
const VT_POSTERS = ['linear-gradient(135deg,#0F6F86,#34B2CC)','linear-gradient(135deg,#34B2CC,#89CEEA)','linear-gradient(135deg,#143A44,#0F6F86)','linear-gradient(135deg,#FEBE40,#F0A63C)','linear-gradient(135deg,#7C6FD6,#34B2CC)','linear-gradient(135deg,#0F6F86,#143A44)'];
function SharedVideoTestimonials({ heading, subhead, items } = {}) {
  const list = items || [
    { name:'Client Name', co:'Company', dur:'1:04' },
    { name:'Client Name', co:'Company', dur:'0:58' },
    { name:'Client Name', co:'Company', dur:'1:22' },
    { name:'Client Name', co:'Company', dur:'1:10' },
    { name:'Client Name', co:'Company', dur:'0:47' },
    { name:'Client Name', co:'Company', dur:'1:33' },
  ];
  return (
    <section className="section vt-section">
      <div className="container">
        <div className="ppc-head"><h2>{heading || <>Don't Take Our Word for It. <span className="mark">Take Theirs.</span></>}</h2><p>{subhead || "Real clients, real results, in their own words. Drop-in video testimonials from the businesses we've helped grow."}</p></div>
        <div className="vt-grid">
          {list.map((v,i) => (
            <div className="vt-card" key={i}>
              <div className="vt-poster" style={{background: VT_POSTERS[i % VT_POSTERS.length]}}>
                <div className="vt-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                {v.dur && <span className="vt-dur">{v.dur}</span>}
              </div>
              <div className="vt-name">{v.name}</div>
              <div className="vt-co">{v.co}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Shared profit/ROI CALCULATOR. One engine, each page passes its own copy, slider
   fields, and a compute() that returns the two result columns + the gold delta.
   fields: [{label, key, min, max, step, def, fmt(v)->string}]
   compute(v, {money}) -> { colA:{ct,rev,sub}, colB:{ct,rev,sub}, delta:{big,yr} }
   .calc-* CSS lives in styles.css (loaded on every page). */
function SharedCalculator({ heading, subhead, note, fields, compute, bg }) {
  const init = {}; fields.forEach(f => { init[f.key] = f.def; });
  const [v, setV] = React.useState(init);
  const set = (k, val) => setV(s => ({ ...s, [k]: val }));
  const money = (n) => (n < 0 ? '-' : '') + '$' + Math.round(Math.abs(n)).toLocaleString('en-US');
  const out = compute(v, { money });
  return (
    <section className="section" style={bg ? {background: bg} : undefined}><div className="container">
      <div className="ppc-head"><h2>{heading}</h2><p>{subhead}</p></div>
      <div className="calc">
        <div className="calc-inputs">
          {fields.map((f, i) => (
            <div className="calc-field" key={i}>
              <div className="row"><label>{f.label}</label><span className="val">{f.fmt(v[f.key])}</span></div>
              <input type="range" min={f.min} max={f.max} step={f.step} value={v[f.key]} onChange={e => set(f.key, parseFloat(e.target.value))} />
            </div>
          ))}
        </div>
        <div className="calc-output">
          <div className="calc-res">
            <div className="calc-col now"><div className="ct">{out.colA.ct}</div><div className="rev">{out.colA.rev}</div><div className="sub">{out.colA.sub}</div></div>
            <div className="calc-col opt"><div className="ct">{out.colB.ct}</div><div className="rev">{out.colB.rev}</div><div className="sub">{out.colB.sub}</div></div>
          </div>
          <div className="calc-delta"><div className="big">{out.delta.big}</div><div className="yr">{out.delta.yr}</div></div>
        </div>
      </div>
      {note && <p style={{textAlign:'center', marginTop:'18px', fontSize:14, color:'var(--br-muted)'}}>{note}</p>}
    </div></section>
  );
}

/* Shared ROAS / break-even calculator for the paid-advertising pages (PPC, Google Ads,
   SEM, Facebook, LinkedIn). Same mechanic, each page passes its own copy + conversion label. */
function SharedRoasCalc({ heading, subhead, note, convLabel = 'customer', dealLabel = 'Average order / deal value', bg }) {
  return (
    <SharedCalculator
      bg={bg}
      heading={heading}
      subhead={subhead}
      note={note}
      fields={[
        { label:'Monthly ad spend', key:'spend', min:3000, max:100000, step:500, def:15000, fmt:(v)=>'$'+Math.round(v).toLocaleString('en-US') },
        { label:'Average cost per click', key:'cpc', min:0.5, max:40, step:0.5, def:4, fmt:(v)=>'$'+v.toFixed(2) },
        { label:'Conversion rate', key:'cvr', min:0.5, max:20, step:0.5, def:4, fmt:(v)=>v+'%' },
        { label:dealLabel, key:'deal', min:100, max:50000, step:100, def:3000, fmt:(v)=>'$'+Math.round(v).toLocaleString('en-US') },
      ]}
      compute={(v,{money})=>{
        const clicks = v.cpc > 0 ? v.spend / v.cpc : 0;
        const conv = clicks * (v.cvr/100);
        const revenue = conv * v.deal;
        const cost = conv > 0 ? v.spend / conv : 0;
        const roas = v.spend > 0 ? revenue / v.spend : 0;
        return {
          colA: { ct:'Clicks / month', rev:Math.round(clicks).toLocaleString('en-US'), sub:money(v.cpc)+' per click' },
          colB: { ct:'New '+convLabel+'s / mo', rev:conv.toFixed(1), sub:money(cost)+' per '+convLabel },
          delta: { big:money(revenue), yr:'revenue / month \u00b7 '+roas.toFixed(1)+'x return on ad spend' },
        };
      }}
    />
  );
}

/* GUIDE TUTORIAL renderer. Multi-part industry-guide hub (rebuild of the brandrocket.net
   /tutorial pages). Data-driven so each guide page just passes its own copy:
   eyebrow, title, subhead, intro:[paragraphs], parts:[{h, body:[paragraphs], article, video}].
   Renders hero + numbered parts index + alternating part rows (gradient thumb placeholder,
   title, body, View the Article / Watch the Video buttons) + closing hire-us CTA.
   .guide-* / .gt-* CSS lives in styles.css. */
function GuideTutorial({ eyebrow, title, subhead, intro = [], parts = [] }) {
  const slug = (i) => 'part-' + (i + 1);
  const [video, setVideo] = React.useState(null);
  const ytId = (url) => { const m = (url || '').match(/[?&]v=([^&]+)/); return m ? m[1] : ''; };
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setVideo(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <>
      <section className="hero guides-hero">
        <div className="container">
          {eyebrow && <p className="gt-eyebrow">{eyebrow}</p>}
          <h1>{title}</h1>
          {subhead && <p className="lede">{subhead}</p>}
        </div>
      </section>
      <div className="ridges-divider" style={{background:'#E8F3F8'}} aria-hidden="true"><svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path fill="#FFFFFF" 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>
      <section className="section" style={{background:'#E8F3F8'}}>
        <div className="container">
          {intro.length > 0 && (
            <div className="gt-intro">{intro.map((p, i) => (<p key={i}>{p}</p>))}</div>
          )}
          <div className="gt-index">
            <div className="gt-index-h">What's Inside</div>
            <ol>{parts.map((p, i) => (<li key={i}><a href={'#' + slug(i)}><span className="gt-ix-n">{i + 1}</span>{p.h}</a></li>))}</ol>
          </div>
          <div className="gt-parts">
            {parts.map((p, i) => (
              <div className={"gt-part" + (i % 2 ? " rev" : "")} id={slug(i)} key={i}>
                <div className="gt-body">
                  <div className="gt-pnum">Part {i + 1}</div>
                  <h2>{p.h}</h2>
                  {p.body.map((t, j) => (<p key={j}>{t}</p>))}
                  <div className="gt-btns">
                    <a href={p.article || '#'} className="btn btn-primary">View the Article →</a>
                    {p.video && <button type="button" className="btn btn-secondary" onClick={() => setVideo(p.video)}>▶ Watch the Video</button>}
                  </div>
                </div>
                <div className="gt-vis" style={{'--gc1': p.gc1 || 'var(--br-blue-deep)', '--gc2': p.gc2 || '#34B2CC'}}>
                  {p.art ? p.art : <div className="gt-vis-in"><div className="gt-vis-n">{i + 1}</div><div className="gt-vis-t">[ Part {i + 1} artwork ]</div></div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="ridges-divider" style={{background:'#0F6F86'}} aria-hidden="true"><svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path fill="#E8F3F8" 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>
      <section className="final-cta">
        <div className="container">
          <h2>Don't Have Time for All This?<br/>Let Us Run It for You.</h2>
          <p className="lede">Get your free Growth Plan and we'll show you exactly where the opportunity is in your account, before you pay us a dime.</p>
          <a href="/free-growth-plan" className="btn btn-primary" style={{fontSize:17, padding:'20px 36px'}}>Get Your Free Growth Plan →</a>
        </div>
      </section>
      {video && (
        <div className="gt-modal" onClick={() => setVideo(null)}>
          <div className="gt-modal-in" onClick={(e) => e.stopPropagation()}>
            <button type="button" className="gt-modal-x" onClick={() => setVideo(null)} aria-label="Close video">✕</button>
            <div className="gt-modal-frame">
              <iframe src={'https://www.youtube-nocookie.com/embed/' + ytId(video) + '?autoplay=1&rel=0&playsinline=1'} title="Guide video" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

/* Long-form guide ARTICLE page (one per tutorial part). Data-driven:
   guideTitle, guideHub (href back to tutorial hub), kicker, parts:[{label, href}],
   current (0-based index of active part), partTitle, readTime, video (yt url),
   playlist (yt url), intro:[paragraphs], blocks:[{t:'h2'|'h3'|'p'|'quote', c}],
   next:{label, href}, hireTitle, hireBody. .ga-* CSS in styles.css. */
function GuideArticle({ guideTitle, guideHub, kicker, parts = [], current = 0, partTitle, readTime, video, playlist, intro = [], blocks = [], next, hireTitle, hireBody }) {
  const ytId = (url) => { const m = (url || '').match(/[?&]v=([^&]+)/) || (url || '').match(/embed\/([^?]+)/); return m ? m[1] : ''; };
  return (
    <>
      <section className="hero ga-hero">
        <div className="container">
          {guideHub ? <a className="ga-kicker" href={guideHub}>← {kicker || guideTitle}</a> : <p className="ga-kicker">{kicker || guideTitle}</p>}
          <h1>{partTitle}</h1>
          <div className="ga-meta"><span>Part {current + 1} of {parts.length}</span>{readTime && <><span className="ga-dot">•</span><span>{readTime}</span></>}</div>
        </div>
      </section>
      <div className="ridges-divider" style={{background:'#E8F3F8'}} aria-hidden="true"><svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path fill="#FFFFFF" 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>
      <section className="section" style={{background:'#E8F3F8'}}>
        <div className="container ga-layout">
          <article className="ga-article">
            {intro.map((p, i) => (<p className="ga-lede" key={i}>{p}</p>))}
            {video && (
              <div className="ga-video">
                <div className="ga-video-frame"><iframe src={'https://www.youtube-nocookie.com/embed/' + ytId(video) + '?rel=0&playsinline=1'} title={partTitle} loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe></div>
                {playlist && <a className="ga-playlist" href={playlist} target="_blank" rel="noopener">▶ Watch the full series on YouTube →</a>}
              </div>
            )}
            <div className="ga-prose">
              {blocks.map((b, i) => {
                if (b.t === 'h2') return <h2 key={i}>{b.c}</h2>;
                if (b.t === 'h3') return <h3 key={i}>{b.c}</h3>;
                if (b.t === 'quote') return <blockquote key={i}>{b.c}</blockquote>;
                return <p key={i}>{b.c}</p>;
              })}
            </div>
            {next && (
              <a className="ga-next" href={next.href}>
                <span className="ga-next-l">Next up</span>
                <span className="ga-next-t">{next.label} →</span>
              </a>
            )}
          </article>
          <aside className="ga-side">
            <div className="ga-side-card">
              <div className="ga-side-h">{guideTitle}</div>
              <ol className="ga-chapters">
                {parts.map((p, i) => (
                  <li key={i} className={i === current ? 'on' : ''}>
                    <a href={p.href}><span className="ga-ch-n">{i + 1}</span><span className="ga-ch-t">{p.label}</span></a>
                  </li>
                ))}
              </ol>
            </div>
            <div className="ga-side-cta">
              <div className="ga-side-cta-h">Don't have time for this?</div>
              <p>Let us run it for you. Get your free Growth Plan first.</p>
              <a className="btn btn-primary" href="/free-growth-plan">Get Your Free Growth Plan →</a>
            </div>
          </aside>
        </div>
      </section>
      <div className="ridges-divider" style={{background:'#0F6F86'}} aria-hidden="true"><svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path fill="#E8F3F8" 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>
      <section className="final-cta">
        <div className="container">
          <h2>{hireTitle || "Don't Have Time for All This?"}</h2>
          <p className="lede">{hireBody || "Get your free Growth Plan and we'll show you exactly where the opportunity is in your account, before you pay us a dime."}</p>
          <a href="/free-growth-plan" className="btn btn-primary" style={{fontSize:17, padding:'20px 36px'}}>Get Your Free Growth Plan →</a>
        </div>
      </section>
    </>
  );
}

/* Export every shared section to window so page scripts can use it. */
Object.assign(window, {
  SharedNav,
  SharedLandingCRO,
  SharedReporting,
  SharedProof,
  SharedCaseStudies,
  SharedVideoTestimonials,
  SharedCalculator,
  SharedRoasCalc,
  GuideTutorial,
  GuideArticle,
  SharedFooter,
});