const { Button, Badge, Card } = window.RankForestDesignSystem_3a10f3;

const CALENDLY_CALL = 'https://calendly.com/bostifyad';
const CALENDLY = 'Apply.html';
const CLUTCH = '#clutch';
const LINKEDIN = 'https://www.linkedin.com/in/arhamiqbal9/';
const INSTAGRAM = 'https://www.instagram.com/bostifyad/';
const FACEBOOK = '#facebook';
const EMAIL = 'mailto:hello@boostifyad.com';
const PRICE = '$750';

const dotBg = (dark) => ({
  backgroundImage: `radial-gradient(${dark ? 'rgba(255,255,255,0.06)' : 'rgba(16,27,45,0.07)'} 1px, transparent 1px)`,
  backgroundSize: '18px 18px',
});
const serif = { fontFamily: 'var(--font-accent-italic)', fontStyle: 'italic', fontWeight: 400 };

function Rotator({ words }) {
  const [i, setI] = React.useState(0);
  const [show, setShow] = React.useState(true);
  const [w, setW] = React.useState(null);
  const wordRef = React.useRef(null);
  const measure = React.useCallback((text) => {
    const ref = wordRef.current;
    if (!ref) return null;
    const cs = getComputedStyle(ref);
    const probe = document.createElement('span');
    probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap';
    probe.style.fontFamily = cs.fontFamily; probe.style.fontSize = cs.fontSize;
    probe.style.fontStyle = cs.fontStyle; probe.style.fontWeight = cs.fontWeight;
    probe.style.letterSpacing = cs.letterSpacing;
    probe.style.padding = cs.paddingTop + ' ' + cs.paddingRight + ' ' + cs.paddingBottom + ' ' + cs.paddingLeft;
    probe.textContent = text;
    document.body.appendChild(probe);
    const width = probe.offsetWidth;
    document.body.removeChild(probe);
    return width;
  }, []);
  React.useEffect(() => { setW(measure(words[0])); }, [measure, words]);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const id = setInterval(() => {
      setI((p) => {
        const nx = (p + 1) % words.length;
        setW(measure(words[nx]));
        return nx;
      });
      setShow(false);
      setTimeout(() => setShow(true), 320);
    }, 2520);
    return () => clearInterval(id);
  }, [words, measure]);
  return (
    <span className="ba-rotator" aria-live="polite" style={{ width: w == null ? undefined : w }}>
      <span ref={wordRef} className={'ba-rotator-word' + (show ? ' is-active' : '')}>{words[i]}</span>
    </span>
  );
}
const h1Style = { fontSize: 'clamp(44px,5.5vw,76px)', lineHeight: 1.04, letterSpacing: '-0.03em', fontWeight: 800, margin: 0 };
const h2Style = { fontSize: 'clamp(32px,3.5vw,52px)', lineHeight: 1.10, letterSpacing: '-0.02em', fontWeight: 800, margin: 0 };

function Logo({ dark, size = 20, w, h }) {
  return <img src={dark ? 'images/logo-footer.png' : 'images/logo-header.png'} alt="BoostifyAd" style={{ height: h || 'auto', width: w || 'auto', maxWidth: '42vw', display: 'block' }} />;
}

function Reveal({ children, delay = 0, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -80px 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return <div ref={ref} className="reveal" style={{ transitionDelay: delay + 'ms', ...style }}>{children}</div>;
}

const Eyebrow = ({ children, dark }) => (
  <div className="eyebrow" style={{ color: dark ? 'var(--lime-400)' : 'var(--muted)', fontWeight: 700 }}>{children}</div>
);

const navItems = [
  { label: 'Home', href: '#top' },
  { label: 'Services', href: '#framework' },
  { label: 'Results', href: '#where' },
  { label: 'Case Studies', href: 'Case Studies.html' },
  { label: 'Testimonials', href: '#founder' },
  { label: 'Contact Us', href: '#offer' },
];
function NavBar() {
  const [active, setActive] = React.useState('#top');
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <React.Fragment>
    <div className={'ba-navbar' + (scrolled ? ' on' : '')}>
    <nav className="ba-nav" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, fontFamily: 'var(--font-sans)', padding: scrolled ? '12px 20px' : '18px 20px', maxWidth: 1140, margin: '0 auto', transition: 'padding .25s ease' }}>
      <a href="#top" style={{ textDecoration: 'none', flexShrink: 0, minWidth: 0 }}><Logo dark={scrolled} size={26} w={scrolled ? 158 : 185} /></a>
      <div className="ba-nav-links" style={{ display: 'flex', background: scrolled ? 'rgba(255,255,255,0.08)' : 'var(--forest-900)', borderRadius: 'var(--radius-pill)', padding: scrolled ? 3 : 4, gap: 2, transition: 'background .25s ease,padding .25s ease' }}>
        {navItems.map((it) => (
          <a key={it.label} href={it.href} onClick={() => setActive(it.href)} style={{
            textDecoration: 'none', cursor: 'pointer', fontWeight: 600, fontSize: scrolled ? 13.5 : 14, padding: scrolled ? '8px 15px' : '9px 16px', borderRadius: 'var(--radius-pill)',
            background: active === it.href ? 'var(--paper-0)' : 'transparent',
            color: active === it.href ? 'var(--ink-900)' : 'var(--text-on-dark-secondary)', transition: 'background .18s ease,font-size .25s ease,padding .25s ease',
          }}>{it.label}</a>
        ))}
      </div>
      <a className="ba-nav-cta" href={CALENDLY} style={{ textDecoration: 'none' }}><Button size="sm" style={{ minWidth: scrolled ? 158 : 161, height: scrolled ? 34 : 36, fontSize: scrolled ? 12.5 : undefined, whiteSpace: 'nowrap', flexShrink: 0, transition: 'all .25s ease' }}>Get a Free Audit</Button></a>
      <button className={'ba-burger' + (open ? ' open' : '')} aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
        <span></span><span></span><span></span>
      </button>
    </nav>
    </div>
    <div className={'ba-drawer' + (open ? ' show' : '')} onClick={() => setOpen(false)}>
      <div className="ba-drawer-panel" onClick={(e) => e.stopPropagation()}>
        {navItems.map((it) => (
          <a className="ba-drawer-link" key={it.label} href={it.href} onClick={() => { setActive(it.href); setOpen(false); }}>{it.label}</a>
        ))}
        <div className="ba-drawer-cta">
          <a href={CALENDLY} style={{ textDecoration: 'none' }}><Button style={{ width: '100%', justifyContent: 'center' }}>Get a Free Audit</Button></a>
        </div>
      </div>
    </div>
    </React.Fragment>
  );
}

const caseStudies = [
  { src: 'images/case-5.jpg', cap: 'From $103K spend to $596,396 in sales at 5.74\u00d7 ROAS, Jan\u2013Jul 2025.',
    para: 'The client entered the year with an ambitious mandate: double revenue while strengthening profitability. Across the period, the account generated $596,396.94 in sales on $103,813.67 in spend, holding a 17.41% ACoS and a 5.74 ROAS.' },
  { src: 'images/case-7.jpg', cap: '$3,865,583 in lifetime sales at 5.32\u00d7 ROAS, one account.',
    para: 'This engagement reflects a multi-year partnership that began with a modest budget and a small product catalog. Over the life of the account: $721,200.77 in total spend, $3,865,583.32 in sales, an 18.78% ACoS, and a 5.32 ROAS.' },
  { src: 'images/case-2.jpg', cap: '$76,850 in sales at 5.01\u00d7 ROAS, May 23\u2013Jun 22.',
    para: 'This account arrived with advertising spread across a handful of disconnected campaigns and no real structure behind it. Ongoing bid and budget management kept cost efficiency in check as revenue climbed steadily, closing at $15,330.67 in spend, $76,850.03 in sales, a 19.95% ACoS, and a 5.01 ROAS.' },
  { src: 'images/case-1.jpg', cap: '$67,907 in sales at 5.17\u00d7 ROAS \u2014 19.35% ACoS, June.',
    para: 'Performance on this account was inconsistent at the outset, with unpredictable costs and unreliable returns. As campaigns matured, performance stabilized: $13,137.60 in spend drove $67,907.16 in sales at a 19.35% ACoS and 5.17 ROAS.' },
  { src: 'images/case-3.jpg', cap: '$51,366 in sales at 5.71\u00d7 ROAS, Jun 24\u2013Jul 24.',
    para: 'For a flagship product competing in a crowded baseball category, the objective was to capture additional market share without eroding margin. The result: $8,996.46 in spend generating $51,366.47 in sales at a 17.51% ACoS and 5.71 ROAS.' },
  { src: 'images/case-4.jpg', cap: '$40,672 in sales at 6.23\u00d7 ROAS \u2014 16.04% ACoS.',
    para: 'Looking beyond Amazon\u2019s internal traffic, we layered external channels, social and search, directly into the PPC strategy. Tight bid discipline kept cost efficiency intact even during high-intensity pushes, delivering $6,523.67 in spend against $40,672.82 in sales, a 16.04% ACoS, and a 6.23 ROAS.' },
  { src: 'images/case-8.jpg', cap: '$15,906 in sales at 6.19\u00d7 ROAS on $2,569 spend.',
    para: 'This snapshot captures a short, intensive performance push undertaken while the client faced rising costs and soft conversion rates. The push delivered a sharp improvement in efficiency: $2,569.01 in spend produced $15,906.44 in sales across 467 orders, with a 16.15% ACoS and 6.19 ROAS.' },
  { src: 'images/case-6.jpg', cap: '17.41% ACoS held across $596K in sales, 7 months.',
    para: 'The cumulative picture reflects disciplined, phased advertising management. Even as spend was scaled back to protect margin, ROAS continued to strengthen, closing with $103,813.67 in spend, $596,396.94 in sales, a 17.41% ACoS, and a 5.74 ROAS.' },
];

function CaseStudies() {
  const [box, setBox] = React.useState(null);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setBox(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <section id="where" className="ba-cs-sec" style={{ ...dotBg(true), background: 'var(--forest-900)', color: 'var(--paper-0)', position: 'relative', overflow: 'hidden' }}>
      <div className="ba-cs-glow" />
      <div className="ba-cs-wm" aria-hidden="true">BOOSTIFY AD</div>
      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <Reveal><Badge>Results</Badge></Reveal>
        <Reveal delay={60}>
          <h2 className="ba-cs-head" style={{ ...h2Style, margin: '20px auto 0', maxWidth: '18ch', textWrap: 'balance', fontSize: 'clamp(36px,4vw,58px)' }}>
            Numbers pulled <i style={{ ...serif, color: 'var(--accent)' }}>straight from the dashboard.</i>
          </h2>
        </Reveal>
        <Reveal delay={120}><p className="ba-sub" style={{ color: 'var(--text-on-dark-secondary)', margin: '18px auto 0', maxWidth: '52ch', fontSize: 18, textWrap: 'balance' }}>Real accounts we manage. Nothing composited, nothing cropped to hide the date range.</p></Reveal>
      </div>
      <div className="ba-strip-wrap" onMouseEnter={(e) => { e.currentTarget.querySelector('.ba-strip').style.animationPlayState = 'paused'; }} onMouseLeave={(e) => { if (!box) e.currentTarget.querySelector('.ba-strip').style.animationPlayState = 'running'; }}>
        <div className="ba-strip">
          {[0, 1].map((dup) => caseStudies.map((c, i) => (
            <div className="ba-strip-card" key={dup + '-' + i} aria-hidden={dup === 1 ? 'true' : undefined}>
              <p className="ba-strip-cap">{c.cap}</p>
              <p className="ba-strip-para">{c.para}</p>
              <img className="ba-strip-img" src={c.src} alt="Amazon account performance screenshot" loading="lazy" onClick={() => setBox(c.src)} />
            </div>
          )))}
        </div>
      </div>
      {box ? (
        <div className="ba-lightbox" onClick={() => setBox(null)}>
          <button className="ba-lightbox-close" aria-label="Close" onClick={() => setBox(null)}>&times;</button>
          <img className="ba-lightbox-img" src={box} alt="Account performance screenshot" onClick={(e) => e.stopPropagation()} />
        </div>
      ) : null}
    </section>
  );
}

const reviews = [
  'images/review-1.png', 'images/review-2.png', 'images/review-3.png', 'images/review-4.png',
  'images/review-5.png', 'images/review-6.png', 'images/review-7.png',
];

function Testimonials() {
  const [box, setBox] = React.useState(null);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setBox(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <section id="founder" style={{ ...dotBg(false), overflow: 'hidden', paddingTop: 0 }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <Reveal><Badge>Testimonials</Badge></Reveal>
        <Reveal delay={60}><h2 style={{ ...h2Style, margin: '20px auto 0' }}>What clients say<br /><i style={serif}>in their own words.</i></h2></Reveal>
        <Reveal delay={120}><p className="ba-sub" style={{ color: 'var(--muted)', margin: '18px auto 0', maxWidth: '52ch', fontSize: 16 }}>Unedited reviews and messages from the sellers whose accounts I manage.</p></Reveal>
      </div>
      <div className="ba-strip-wrap" style={{ marginTop: 52 }} onMouseEnter={(e) => { e.currentTarget.querySelector('.ba-strip').style.animationPlayState = 'paused'; }} onMouseLeave={(e) => { if (!box) e.currentTarget.querySelector('.ba-strip').style.animationPlayState = 'running'; }}>
        <div className="ba-strip ba-strip-rev ba-strip-ltr">
          {[0, 1].map((dup) => reviews.map((src, i) => (
            <div className="ba-rev-card" key={dup + '-' + i} aria-hidden={dup === 1 ? 'true' : undefined}>
              <img className="ba-rev-img" src={src} alt="Client review screenshot" loading="lazy" onClick={() => setBox(src)} />
            </div>
          )))}
        </div>
      </div>
      {box ? (
        <div className="ba-lightbox" onClick={() => setBox(null)}>
          <button className="ba-lightbox-close" aria-label="Close" onClick={() => setBox(null)}>&times;</button>
          <img className="ba-lightbox-img" src={box} alt="Client review screenshot" onClick={(e) => e.stopPropagation()} />
        </div>
      ) : null}
    </section>
  );
}

const csTabs = [
  {
    tab: 'Sports & Outdoors', cat: 'Sports & Outdoors', name: 'Rope', accent: 'Bat',
    img: 'images/cs-swing.jpg',
    desc: 'Leveraging patented innovation to dominate the baseball and softball training market.',
    rev: '462%', second: { l: 'Conversion Rate', v: '4.5% \u2192 13.2%' },
    before: '$49,200', after: '$178,900',
  },
  {
    tab: 'Pet Supplies', cat: 'Pet Supplies', name: '', accent: 'Pet Feeder',
    img: 'images/cs-feeder.jpg',
    desc: 'Launching a tech-forward pet brand into a crowded market and carving a premium space.',
    rev: '378%', second: { l: 'Organic Ranking', v: 'Top 3' },
    before: '$142,000', after: '$400,760',
  },
  {
    tab: 'Health & Household', cat: 'Health & Household', name: 'Force Factor', accent: 'Test X180',
    img: 'images/cs-supplement.jpg',
    desc: 'Igniting growth for a men\u2019s health supplement in a hyper-competitive niche.',
    rev: '114%', second: { l: 'Average Order Value', v: '+18%' },
    before: '$118,000', after: '$253,000',
  },
];

function CaseStudyTabs() {
  const [t, setT] = React.useState(0);
  const c = csTabs[t];
  return (
    <section id="tools" style={{ ...dotBg(false), borderRadius: '48px 48px 0 0', marginTop: -1 }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <Reveal><Badge>Case Studies</Badge></Reveal>
        <Reveal delay={40}><h2 style={{ ...h2Style, margin: '20px auto 0' }}>Helping brands thrive <i style={serif}>in competitive markets.</i></h2></Reveal>
        <Reveal delay={70}><p className="ba-sub" style={{ color: 'var(--muted)', margin: '18px auto 40px', maxWidth: '52ch', fontSize: 16 }}>Three accounts, three categories. Same system underneath each one.</p></Reveal>
        <Reveal delay={110}>
          <div className="ba-cst-tabs">
            {csTabs.map((x, i) => (
              <button key={i} className={'ba-cst-tab' + (i === t ? ' on' : '')} onClick={() => setT(i)} aria-pressed={i === t}>{x.tab}</button>
            ))}
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div className="ba-cst-card" key={t}>
            <div className="ba-cst-body">
              <div className="ba-cst-cat">{c.cat}</div>
              <h3 className="ba-cst-name">{c.name} <i style={{ ...serif, color: 'var(--accent)' }}>{c.accent}</i></h3>
              <p className="ba-cst-desc">{c.desc}</p>
              <div className="ba-cst-stats">
                <div className="ba-cst-stat">
                  <div className="ba-cst-stat-l">Monthly Revenue Results</div>
                  <div className="ba-cst-stat-v">{c.rev}</div>
                </div>
                <div className="ba-cst-stat">
                  <div className="ba-cst-stat-l">{c.second.l}</div>
                  <div className="ba-cst-stat-v">{c.second.v}</div>
                </div>
              </div>
              <div className="ba-cst-ba">
                <div className="ba-cst-ba-box">
                  <div className="ba-cst-ba-l">Before</div>
                  <div className="ba-cst-ba-v">{c.before}</div>
                </div>
                <div className="ba-cst-ba-box">
                  <div className="ba-cst-ba-l ba-cst-ba-l-on">After</div>
                  <div className="ba-cst-ba-v">{c.after}</div>
                </div>
              </div>
            </div>
            <div className="ba-cst-media"><img src={c.img} alt={c.name + ' ' + c.accent} loading="lazy" /></div>
          </div>
        </Reveal>
        <Reveal delay={190}>
          <div style={{ marginTop: 36 }}><a href="Case Studies.html" style={{ textDecoration: 'none' }}><Button>View Case Study</Button></a></div>
        </Reveal>
      </div>
    </section>
  );
}

const ticker = [
  ['Weekly optimization, not ', 'monthly', ''],
  ['Profit-first, not ', 'ROAS', '-first'],
  ['You own ', 'every campaign', ''],
  ['No long-term ', 'lock-in', ''],
  ['Reports you can ', 'actually read', ''],
  ['Direct access to the ', 'strategist', ''],
  ['Instant ', 'communication', ''],
  ['Transparent ', 'reporting', ''],
];

const problems = [
  ["Your ROAS looks fine and your bank account doesn't.", 'Revenue is up, Amazon ad spend is up more, and nobody can tell you what you actually cleared last month.'],
  ["You're paying for search terms you'd never bid on manually.", 'Auto Amazon campaigns running for months with a negative list nobody has touched since launch.'],
  ['One good ASIN is subsidizing three that lose money.', 'Account-level Amazon ACoS hides it, so it has never come up.'],
  ['Your agency reports monthly and optimizes monthly.', "Four weeks of bad bids is four weeks of budget you don't get back."],
  ['You understand your account better than the people managing it.', 'Every Amazon question goes to an account manager who has to go ask someone else.'],
  ['You launched a product and the campaign was an afterthought.', 'The Amazon honeymoon window closed before the targeting was right.'],
];

const layers = [
  ['01', 'Stop the bleed', 'The first two weeks are subtraction, not addition. We pull 90 days of Amazon search term data, negate what converts nothing, and cap the campaigns quietly draining budget. Nothing new launches until the waste is gone.'],
  ['02', 'Rebuild the structure', "Amazon match types get separated. Winners get isolated into their own campaigns with their own budgets. Losers stop borrowing spend from performers. This is the boring layer and it's where most of the gain comes from."],
  ['03', 'Bid to margin, not to ACoS', 'Bids are built from your actual profit per unit, not a target ACoS someone picked in a meeting. Amazon placement modifiers come from your data, not defaults. A 40% ACoS product can out-earn a 20% one \u2014 we bid like it.'],
  ['04', 'Compound it weekly', 'Every week: harvest converting Amazon search terms into exact, negate the dead ones, move budget toward what\u2019s working. Small corrections weekly beat large corrections quarterly.'],
];

const tools = [
  { code: 'KW', tag: 'LIVE', t: 'Keyword Research Dashboard', d: 'Drop in a Helium 10 export and get back a sortable keyword table with root-word grouping, competition scoring, and filters that hold when you reload. Built because doing this in spreadsheets got old.', cta: 'Open it' },
  { code: 'AT', tag: 'IN BUILD', t: 'Weekly Ads Tracker', d: 'Week-over-week campaign movement in one view. Catch a bid change going wrong on day 3 instead of day 30.', cta: 'Get notified' },
  { code: 'PT', tag: 'IN BUILD', t: 'Weekly Products Tracker', d: "Sales, ad spend, and margin per ASIN, week over week. See what's scaling and what's quietly eating budget.", cta: 'Get notified' },
  { code: 'NG', tag: 'IN BUILD', t: 'N-Gram Analysis Tool', d: 'Two and three word patterns across your search terms, ranked by conversion. Finds the phrase clusters individual keyword reports hide.', cta: 'Get notified' },
];

const faqs = [
  ['How soon will I see movement?', "First 2-3 weeks: wasted spend gets cut, targeting tightens, ACoS starts trending down. Real compounding growth where PPC starts driving organic rank too shows up in the 60-90 day window. If someone promises faster than that, they haven't actually looked at your account yet."],
  ['What actually separates BoostifyAd from another PPC agency?', "I optimize weekly, not monthly. And there's no lock-in contract you stay because the account is performing, plain and simple."],
  ['Do you only work with scaled accounts, or can you handle a launch?', 'Both, run on different playbooks. Launches get aggressive honeymoon-period targeting to build initial velocity and rank. Established products get ongoing optimization and scaling built around protecting margin while growing.'],
  ['Will you guarantee my ACoS or ROAS?', "No be skeptical of anyone who does before they've opened your account. What I do guarantee: weekly hands-on management, honest reporting when something isn't working, and a strategy built around your actual numbers, not industry averages."],
  ['How do you define success on my account?', 'Profit. Every recommendation gets weighed against your actual margins, not just whether it makes ACoS look better on a report.'],
  ['How much personal attention does my account actually get?', 'I keep a small client roster on purpose, so every account gets real weekly attention from me the person actually making the decisions, not a rotating account manager.'],
  ["I already have an agency (or I'm doing PPC myself) what does switching look like?", "A short audit first, so you know exactly what's underperforming before anything changes. Then a clean handover campaigns don't go dark during the transition, they get rebuilt with intent."],
  ['What happens to my campaigns if we ever part ways?', "Everything stays in your account structure, data, history, all of it. You're never locked in just to keep what's been built."],
];


function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'var(--paper-0)' }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, background: 'transparent', border: 'none', cursor: 'pointer', padding: '20px 24px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 17, color: 'var(--text-primary)', textAlign: 'left' }}>
        {q}
        <span style={{ flexShrink: 0, display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center', transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 300ms cubic-bezier(0.16,1,0.3,1)', fontSize: 20, color: 'var(--accent)' }}>+</span>
      </button>
      <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr', transition: 'grid-template-rows 300ms cubic-bezier(0.16,1,0.3,1)' }}>
        <div style={{ overflow: 'hidden' }}>
          <div className="small" style={{ padding: '0 24px 20px', color: 'var(--text-secondary)', lineHeight: 1.65 }}>{a}</div>
        </div>
      </div>
    </div>
  );
}

function App() {
  return (
    <div id="top" style={{ fontFamily: 'var(--font-sans)', background: 'var(--bg)', color: 'var(--text-primary)', overflowX: 'hidden', fontSize: 18, lineHeight: 1.65 }}>
      <NavBar />
      <div className="ba-nav-spacer" aria-hidden="true"></div>
      <div style={dotBg(false)}>
        <section style={{ padding: 'clamp(90px,13vw,170px) 24px clamp(120px,15vw,180px)', textAlign: 'center', maxWidth: 1040, margin: '0 auto' }}>
          <div className="eyebrow" style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 10, color: 'var(--muted)', fontWeight: 700, marginBottom: 34, letterSpacing: '0.02em' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center' }}>
                {['images/brand-1.png', 'images/brand-2.png', 'images/brand-3.png', 'images/brand-4.png'].map((src, i) => (
                  <span key={i} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: '50%', border: '2px solid var(--bg)', overflow: 'hidden', marginLeft: i === 0 ? 0 : -10, position: 'relative', zIndex: 4 - i }}><img src={src} alt="Client brand logo" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></span>
                ))}
              </div>
              <span style={{ display: 'inline-flex', gap: 1, color: 'var(--accent)', fontSize: 15 }}>{'\u2605\u2605\u2605\u2605\u2605'}</span>
            </div>
            <span>Backed by Performance &amp; Proof</span>
          </div>
          <h1 className="ba-hero-h1" style={{ ...h1Style, fontSize: 'clamp(48px,6.2vw,88px)', marginBottom: 30 }}>
            <span style={{ display: 'block' }}>One Amazon system</span>
            <span style={{ display: 'block' }}>Four weeks to <Rotator words={['prove it', 'show waste', 'cut ACoS', 'rebuild bids']} /></span>
            <span style={{ display: 'block' }}>90 days to scale it</span>
          </h1>
          <p style={{ fontSize: 21, color: 'var(--muted)', maxWidth: '58ch', margin: '0 auto 40px', lineHeight: 1.6 }}>$32M+ in managed revenue. 113+ brands scaled. Let&rsquo;s make your brand the next record-breaker&hellip; Talk with a BoostifyAd Expert today.</p>
          <div className="ba-btn-row" style={{ display: 'flex', gap: 16, justifyContent: 'center', marginBottom: 22 }}>
            <a href={CALENDLY} style={{ textDecoration: 'none' }}><Button size="lg" style={{ fontSize: 18, padding: '18px 34px' }}>Get a Free Audit</Button></a>
            <a href="#where" style={{ textDecoration: 'none' }}><Button variant="secondary" size="lg" icon={false} style={{ fontSize: 18, padding: '18px 34px' }}>See the Proof</Button></a>
          </div>
          <div className="small" style={{ color: 'var(--muted)' }}>Month to month &middot; No setup fee &middot; You keep every campaign</div>
        </section>
      </div>

      <div className="ba-marquee" style={{ background: 'var(--forest-900)', color: 'var(--paper-0)', overflow: 'hidden', padding: '15px 0' }}>
        <div className="ba-marquee-track">
          {[0, 1].map((k) => (
            <div key={k} style={{ display: 'flex', gap: 34, paddingLeft: 34, flexShrink: 0 }}>
              {ticker.map((m, i) => (
                <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 34, fontSize: 14, whiteSpace: 'nowrap' }}>
                  <span>{m[0]}<b style={{ color: 'var(--lime-400)' }}>{m[1]}</b>{m[2]}</span>
                  <span style={{ color: 'var(--accent)' }}>&#11044;</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>

      <section id="problem" style={{ ...dotBg(false) }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <Reveal><h2 style={h2Style}>If any of this sounds familiar, <i style={serif}>keep reading.</i></h2></Reveal>
          <Reveal delay={70}><p className="ba-sub" style={{ color: 'var(--muted)', margin: '20px auto 56px' }}>Six things we hear on almost every first Amazon call.</p></Reveal>
          <div className="ba-grid-2" style={{ maxWidth: 980, margin: '0 auto', textAlign: 'left' }}>
            {problems.map((p, i) => (
              <Reveal key={i} delay={(i % 2) * 70}>
                <div className="ba-hovcard"><Card padding={32} style={{ height: '100%' }}>
                  <p style={{ margin: 0, lineHeight: 1.65 }}><b style={{ color: 'var(--text-primary)' }}>{p[0]}</b> <span style={{ color: 'var(--text-secondary)' }}>{p[1]}</span></p>
                </Card></div>
              </Reveal>
            ))}
          </div>
          <Reveal><p style={{ marginTop: 44, fontWeight: 700, textAlign: 'center', maxWidth: 'none' }}>Here's the system that fixes it &darr;</p></Reveal>
        </div>
      </section>

      <section id="framework" style={{ ...dotBg(true), background: 'var(--forest-900)', borderRadius: '48px 48px 0 0', color: 'var(--paper-0)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <Reveal><Badge>The Framework</Badge></Reveal>
          <Reveal delay={60}><h2 style={{ ...h2Style, margin: '20px 0 0' }}>ProfitStack <i style={{ ...serif, color: 'var(--lime-400)' }}>four layers, in this order.</i></h2></Reveal>
          <Reveal delay={120}><p className="ba-sub" style={{ color: 'var(--text-on-dark-secondary)', margin: '20px auto 56px', maxWidth: '48ch', fontSize: 16 }}>Most Amazon agencies change everything at once and can't tell you what worked. We work bottom-up. Each layer has to hold before the next one goes on.</p></Reveal>
          <div style={{ maxWidth: 860, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 20, textAlign: 'left' }}>
            {layers.map((l, i) => (
              <Reveal key={i} delay={i * 70}>
                <div className="ba-hovcard"><Card dark padding={32} style={{ display: 'flex', gap: 26, alignItems: 'flex-start' }}>
                  <div style={{ ...serif, fontSize: 52, lineHeight: 1, color: 'var(--accent)', flexShrink: 0, minWidth: 64 }}>{l[0]}</div>
                  <div>
                    <div className="card-title" style={{ marginBottom: 8 }}>{l[1]}</div>
                    <div style={{ color: 'var(--text-on-dark-secondary)', lineHeight: 1.65 }}>{l[2]}</div>
                  </div>
                </Card></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CaseStudies />

      <CaseStudyTabs />

      <Testimonials />

      <section id="process" style={{ ...dotBg(false), paddingTop: 0 }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <Reveal><h2 style={h2Style}>Three steps. <i style={serif}>Five days.</i></h2></Reveal>
          <Reveal delay={70}><p className="ba-sub" style={{ color: 'var(--muted)', margin: '20px auto 56px' }}>No discovery deck. No 40-question intake form.</p></Reveal>
          <div className="ba-steps" style={{ display: 'flex', gap: 24, maxWidth: 1000, margin: '0 auto', textAlign: 'left' }}>
            {[['01', 'Read-only access', 'Ten minutes of your time. You grant view-only access to Seller Central \u2014 nothing is changed and nothing is touched. Prefer not to? Send exports instead: Search Term Report, Business Report, and 90 days of campaign data.'],
              ['02', 'Written audit in 72 hours', 'You get a document, not a sales call. Wasted spend broken down by campaign, the structural problems, your three biggest opportunities ranked by size, and what the first 90 days would look like. Yours to keep either way.'],
              ['03', 'Decide with real information', "If the audit doesn't tell you something you didn't already know, we're done and I'll say so. If it does, we start the following Monday."]].map((s, i) => (
              <Reveal key={i} delay={i * 70} style={{ flex: 1 }}>
                <div className="ba-hovcard" style={{ height: '100%' }}><Card padding={32} style={{ height: '100%' }}>
                  <div className="eyebrow" style={{ color: 'var(--accent-ink)', fontWeight: 700, marginBottom: 14 }}>Step {s[0]}</div>
                  <div className="card-title" style={{ marginBottom: 10 }}>{s[1]}</div>
                  <div className="small" style={{ color: 'var(--text-secondary)', lineHeight: 1.65 }}>{s[2]}</div>
                </Card></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section id="offer" style={{ ...dotBg(false), paddingTop: 0 }}>
        <div className="container">
          <div style={{ ...dotBg(true), background: 'var(--forest-900)', borderRadius: 40, padding: 'clamp(36px,4.5vw,56px) clamp(24px,5vw,56px)', textAlign: 'center', color: 'var(--paper-0)' }}>
            <Reveal><Eyebrow dark>Ready?</Eyebrow></Reveal>
            <Reveal delay={60}><h2 style={{ ...h2Style, margin: '16px auto 0', maxWidth: '22ch' }}>Ready to Stop Guessing With Your Amazon PPC?</h2></Reveal>
            <Reveal delay={120}><p style={{ color: 'var(--text-on-dark-secondary)', fontWeight: 400, maxWidth: '60ch', margin: '22px auto 26px', lineHeight: 1.7 }}>Get your free Amazon PPC audit and plan &mdash; find out exactly where your ad spend is leaking, then decide what to do about it with real numbers in front of you.</p></Reveal>
            <Reveal delay={160}><div className="small" style={{ color: 'var(--text-on-dark-secondary)', fontSize: 14, marginBottom: 20 }}>Free. Your data stays yours.</div></Reveal>
            <Reveal delay={200}>
              <div className="ba-btn-row" style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
                <a href={CALENDLY} style={{ textDecoration: 'none' }}><Button>Get a Free Audit</Button></a>
                <a href={CALENDLY_CALL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}><Button variant="ghost-on-dark" icon={false}>Book a Discovery Call</Button></a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section id="faq" style={{ ...dotBg(false), paddingTop: 0 }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <Reveal><h2 style={h2Style}>Questions sellers <i style={serif}>actually ask.</i></h2></Reveal>
          <Reveal delay={70}><p className="ba-sub" style={{ color: 'var(--muted)', margin: '20px auto 56px' }}>If the answer is no, I'll say no.</p></Reveal>
          <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {faqs.map((f, i) => <Reveal key={i} delay={Math.min(i, 4) * 40}><FaqItem q={f[0]} a={f[1]} /></Reveal>)}
          </div>
        </div>
      </section>

      <footer id="contact" style={{ ...dotBg(true), background: 'var(--forest-900)', borderRadius: '48px 48px 0 0', color: 'var(--paper-0)', paddingTop: 'clamp(32px,4vw,56px)' }}>
        <div className="ba-fnew">
          <div className="ba-fnew-grid">
            <div className="ba-fnew-brand">
              <Logo dark h={46} />
              <p className="ba-fnew-about">We're more than an Amazon ads agency we're the partner who actually watches your numbers every day. From strategy to execution, we cut what's not working and scale what is.</p>
              <div className="ba-fsoc">
                <a href={LINKEDIN} target="_blank" rel="noopener noreferrer" className="ba-fsoc-a" aria-label="LinkedIn"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05A4.2 4.2 0 0 1 16.6 8.7c4 0 4.4 2.4 4.4 5.6V21h-4v-5.7c0-1.4 0-3.1-2-3.1s-2.3 1.5-2.3 3v5.8H9z"/></svg></a>
                <a href={INSTAGRAM} target="_blank" rel="noopener noreferrer" className="ba-fsoc-a" aria-label="Instagram"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.2" fill="currentColor" stroke="none"/></svg></a>
              </div>
              <div className="ba-fbtns">
                <a href={CALENDLY} style={{ textDecoration: 'none' }}><Button>Get a Free Audit</Button></a>
                <a href={CALENDLY_CALL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}><Button variant="ghost-on-dark" icon={false}>Book a Discovery Call</Button></a>
              </div>
            </div>
            <div className="ba-fnew-cols">
              <div className="ba-fcol">
                <div className="ba-fcol-h">Site Map</div>
                <a className="ba-flink" href="#top">Home</a>
                <a className="ba-flink" href="#framework">Services</a>
                <a className="ba-flink" href="#where">Results</a>
                <a className="ba-flink" href="Case Studies.html">Case Studies</a>
                <a className="ba-flink" href="#founder">Testimonials</a>
                <a className="ba-flink" href="#offer">Contact Us</a>
              </div>
              <div className="ba-fcol">
                <div className="ba-fcol-h">Legal</div>
                <a className="ba-flink" href="Privacy Policy.html">Privacy Policy</a>
                <a className="ba-flink" href="Terms and Conditions.html">Terms &amp; Conditions</a>
              </div>
            </div>
          </div>
          <div className="ba-fbottom">&copy; 2026 BoostifyAd. All Rights Reserved.</div>
        </div>
      </footer>
    </div>
  );
}

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

// Sections render after React mounts, so the browser's own hash jump fires too early.
if (window.location.hash) {
  const target = window.location.hash;
  const jump = (el, smooth) => window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: smooth ? 'smooth' : 'auto' });
  let tries = 0;
  const tick = () => {
    let el = null;
    try { el = document.querySelector(target); } catch (e) { return; }
    if (el) {
      jump(el, true);
      // images finishing load shift layout, so settle again once they're in
      setTimeout(() => { const e2 = document.querySelector(target); if (e2) jump(e2, false); }, 700);
      return;
    }
    if (tries++ < 600) requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);
}