const { Button } = window.RankForestDesignSystem_3a10f3;

const HOME = 'index.html';
const APPLY = 'Apply.html';
const LINKEDIN = '#linkedin';

const studies = [
  {
    name: 'Home Organization', img: 'images/cs-cisily.jpg', href: 'Case Study - Home Organization.html',
    tags: ['PPC', 'Creatives Optimization', 'A+ Content'],
    desc: <span>Home organization brand scaled from <b>$32,000</b> to <b>$115,000</b> monthly revenue. Conversion rate climbed from 6.1% to <b>15.4%</b>, with a Top 3 organic rank for "sponge holder for kitchen sink."</span>,
  },
  {
    name: 'Home & Kitchen (Cutlery)', img: 'images/cs-astercook.jpg', href: 'Case Study - Home and Kitchen Cutlery.html',
    tags: ['PPC', 'SEO & Listing', 'Creatives Optimization'],
    desc: <span>Kitchen essentials seller grew from <b>$65,000</b> to <b>$210,000</b> per month &mdash; <b>215%</b> market share growth &mdash; while ACoS dropped from 42% down to <b>24%</b>.</span>,
  },
  {
    name: 'Pet Supplies', img: 'images/cs-petlibro.jpg', href: 'Case Study - Pet Supplies.html',
    tags: ['PPC', 'DSP', 'Creatives Optimization'],
    desc: <span>Tech-forward pet brand lifted total sales <b>378%</b>, scaling <b>$142,000</b> to <b>$400,760</b> monthly and taking a Top 3 organic rank for "automatic pet feeder."</span>,
  },
  {
    name: 'Rope Bat', img: 'images/cs-ropebat.jpg', href: 'Case Study - Rope Bat.html',
    tags: ['PPC', 'Listing Optimization', 'Competitor Targeting'],
    desc: <span>Patented swing trainer posted <b>462%</b> monthly revenue growth, moving from <b>$49,200</b> to <b>$178,900</b> as conversion rate rose from 4.5% to <b>13.2%</b>.</span>,
  },
  {
    name: 'Force Factor', img: 'images/cs-forcefactor.jpg', href: 'Case Study - Force Factor.html',
    tags: ['PPC', 'Subscribe & Save', 'SKU Optimization'],
    desc: <span>A 60-day sprint drove a <b>114%</b> revenue surge for Test X180, from <b>$118,000</b> to <b>$253,000</b> monthly, with average order value up <b>18%</b>.</span>,
  },
  {
    name: 'Health & Wellness (Supplements)', img: 'images/cs-ritual.jpg', href: 'Case Study - Health and Wellness Supplements.html',
    tags: ['PPC', 'Subscribe & Save', 'LTV Scaling'],
    desc: <span>An LTV scaling framework lifted Subscribe &amp; Save <b>140%</b> and held ROAS at <b>5.8&times;</b>, moving revenue from <b>$145,000</b> to <b>$390,000</b> per month.</span>,
  },
];

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.1, rootMargin: '0px 0px -50px 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return <div ref={ref} className="reveal" style={{ transitionDelay: delay + 'ms', ...style }}>{children}</div>;
}

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

function Card({ s, i }) {
  return (
    <Reveal delay={(i % 3) * 70} style={{ display: 'flex' }}>
      <a className="cs-card" href={s.href} style={{ width: '100%' }}>
        <div className="cs-media">
          {s.img ? <img src={s.img} alt={s.name + ' product'} loading="lazy" /> : <div className="cs-media-ph">Product image needed</div>}
        </div>
        <div className="cs-body">
          <h2 className="cs-name">{s.name}</h2>
          <div className="cs-tags">{s.tags.map((t) => <span className="cs-tag" key={t}>{t}</span>)}</div>
          <p className="cs-desc">{s.desc}</p>
        </div>
      </a>
    </Reveal>
  );
}

function CaseStudiesPage() {
  return (
    <div id="top">
      <SiteNav />
      <section className="cs-hero">
        <Reveal><div className="cs-eyebrow">BoostifyAd Case Studies</div></Reveal>
        <Reveal delay={60}><h1 className="cs-title">Case <i>Studies</i></h1></Reveal>
      </section>
      <div className="cs-grid">
        {studies.map((s, i) => <Card s={s} i={i} key={s.name} />)}
      </div>
      <SiteFooter />
    </div>
  );
}

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