/* Shared React components: Nav, Footer, helpers, animations
   Loaded by every page after React + Babel. */

/* ============ ICONS ============ */
const Icon = {
  arrow: (p = {}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  arrowUpRight: (p = {}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="7" y1="17" x2="17" y2="7" />
      <polyline points="7 7 17 7 17 17" />
    </svg>
  ),
  check: (p = {}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  whatsapp: (p = {}) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7 0 1.6 1.2 3.1 1.3 3.3.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.8.7.8.2 1.5.2 2 .1.6-.1 1.8-.7 2.1-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4z" />
      <path d="M20.5 3.5C18.3 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4h.1c6.6 0 12-5.4 12-12 0-3.2-1.2-6.2-3.5-8.3zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.8 1 1-3.7-.2-.4c-1-1.6-1.5-3.4-1.5-5.2 0-5.5 4.5-10 10-10 2.7 0 5.2 1 7.1 2.9 1.9 1.9 2.9 4.4 2.9 7.1 0 5.5-4.5 9.9-10 9.9z" />
    </svg>
  ),
  sparkle: (p = {}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 0l1.7 6.7L20 8l-6.3 1.3L12 16l-1.7-6.7L4 8l6.3-1.3L12 0z" />
      <path d="M19 14l.9 3.4L23 18l-3.1.6L19 22l-.9-3.4L15 18l3.1-.6L19 14z" opacity=".6" />
    </svg>
  ),
  rocket: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
      <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
    </svg>
  ),
  seedling: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M2 22c1.25-.987 2.27-1.975 3.9-2.2a5.56 5.56 0 0 1 3.8 1.5 4 4 0 0 0 6.187-2.353 3.5 3.5 0 0 0 3.69-5.116A3.5 3.5 0 0 0 20.95 8 3.5 3.5 0 1 0 16 3.05a3.5 3.5 0 0 0-5.831 1.373 3.5 3.5 0 0 0-5.116 3.69 4 4 0 0 0-2.353 6.187C3.9 15.7 4.5 16.6 4.5 18.1 4.275 19.73 3.287 20.75 2 22" />
      <path d="M2 22 17 7" />
    </svg>
  ),
  trending: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
      <polyline points="16 7 22 7 22 13" />
    </svg>
  ),
  brain: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 21Z" />
      <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 21" />
      <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
    </svg>
  ),
  chevron: (p = {}) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="9 18 15 12 9 6" />
    </svg>
  ),
  menu: (p = {}) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  ),
  x: (p = {}) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),
  /* industry icons */
  wrench: (p = {}) => (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
    </svg>
  ),
  studio: (p = {}) => (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M9 18V5l12-2v13" />
      <circle cx="6" cy="18" r="3" />
      <circle cx="18" cy="16" r="3" />
    </svg>
  ),
  shop: (p = {}) => (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 9l1-5h16l1 5" />
      <path d="M4 9v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9" />
      <path d="M9 21V13h6v8" />
    </svg>
  ),
  cup: (p = {}) => (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M18 8h1a4 4 0 0 1 0 8h-1" />
      <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z" />
      <line x1="6" y1="2" x2="6" y2="5" />
      <line x1="10" y1="2" x2="10" y2="5" />
      <line x1="14" y1="2" x2="14" y2="5" />
    </svg>
  ),
  briefcase: (p = {}) => (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="2" y="7" width="20" height="14" rx="2" />
      <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
    </svg>
  ),
  graduation: (p = {}) => (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
      <path d="M6 12v5c3 3 9 3 12 0v-5" />
    </svg>
  ),
};

/* ============ NAV ============ */
function SiteNav({ current, basePath = "" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  const link = (label, href, key) => (
    <a key={key} href={basePath + href} className={current === key ? "current" : ""} onClick={close}>
      {label}
    </a>
  );
  return (
    <>
      <nav className={"site-nav" + (scrolled ? " scrolled" : "")}>
        <div className="nav-inner">
          <a href={basePath + "index.html"} className="nav-logo" aria-label="SMBeMore home" onClick={close}>
            <img src={basePath + "assets/logo.png"} alt="" />
            <span><span className="lo-smb">SMB</span><span className="lo-e">e</span><span className="lo-more">More</span></span>
          </a>
          <div className="nav-links">
            {link("Tiers", "index.html#journey", "tiers")}
            {link("Industries", "index.html#industries", "industries")}
            {link("Case studies", "index.html#cases", "cases")}
            {link("How we work", "index.html#process", "process")}
            {link("Contact", "contact.html", "contact")}
          </div>
          <div className="nav-cta">
            <a className="btn btn-ghost" href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer">
              <Icon.whatsapp /> WhatsApp
            </a>
            <a className="btn btn-accent" href={basePath + "contact.html"}>
              Start a project <Icon.arrow />
            </a>
          </div>
          <button
            className="nav-hamburger"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            {menuOpen ? <Icon.x /> : <Icon.menu />}
          </button>
        </div>
      </nav>
      <div className={"mobile-menu" + (menuOpen ? " open" : "")} aria-hidden={!menuOpen}>
        <div className="mobile-nav-links">
          {link("Tiers", "index.html#journey", "tiers")}
          {link("Industries", "index.html#industries", "industries")}
          {link("Case studies", "index.html#cases", "cases")}
          {link("How we work", "index.html#process", "process")}
          {link("Contact", "contact.html", "contact")}
        </div>
        <div className="mobile-nav-cta">
          <a className="btn btn-ghost btn-lg" href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer" onClick={close}>
            <Icon.whatsapp /> WhatsApp
          </a>
          <a className="btn btn-accent btn-lg" href={basePath + "contact.html"} onClick={close}>
            Start a project <Icon.arrow />
          </a>
        </div>
      </div>
    </>
  );
}

/* ============ FOOTER ============ */
function SiteFooter({ basePath = "" }) {
  return (
    <footer className="site-footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="logo-line"><span style={{color: "#fff"}}>SMB</span><span className="lo-e">e</span><span style={{color: "#7fd35f"}}>More</span></div>
            <p>We help small businesses sell more by building beautiful websites, smart admin systems, and useful AI — without the jargon.</p>
            <div style={{display: "flex", gap: "10px", marginTop: "8px"}}>
              <a className="btn btn-whatsapp" href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer">
                <Icon.whatsapp /> Chat on WhatsApp
              </a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Tiers</h4>
            <ul>
              <li><a href={basePath + "tiers/launch.html"}>Launch</a></li>
              <li><a href={basePath + "tiers/grow.html"}>Grow</a></li>
              <li><a href={basePath + "tiers/scale.html"}>Scale</a></li>
              <li><a href={basePath + "tiers/adopt-ai.html"}>Adopt AI</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Case studies</h4>
            <ul>
              <li><a href={basePath + "case-studies/carpenter.html"}>LJB Carpentry</a></li>
              <li><a href={basePath + "case-studies/builder.html"}>Clout Properties</a></li>
              <li><a href={basePath + "case-studies/dance-school-ai.html"}>East Sussex Dance Studios</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer">+44 7939 188385</a></li>
              <li><a href="mailto:info@smbemore.com">info@smbemore.com</a></li>
              <li><a href={basePath + "contact.html"}>Project enquiry form</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} SMBeMore · 145 Brompton Farm Road, Rochester, ME2 3RH</div>
          <div style={{display: "flex", gap: "20px"}}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============ Reveal-on-scroll hook ============ */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal, .reveal-stagger");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.14, rootMargin: "0px 0px -50px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ============ Animated counter ============ */
function Counter({ to, suffix = "", prefix = "", duration = 1600, decimals = 0 }) {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setV(to * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  return (
    <span ref={ref}>{prefix}{v.toFixed(decimals)}{suffix}</span>
  );
}

/* ============ Helper for tweaks param ============ */
function getNavMode() {
  try {
    return localStorage.getItem("smbe_nav_mode") || "multi";
  } catch (e) {
    return "multi";
  }
}

/* ============ Industry / case data ============ */
const TIERS = [
  {
    id: "launch",
    label: "Launch",
    num: "01",
    icon: "rocket",
    img: "assets/Launch.png",
    headline: "Get found. Look the part.",
    blurb: "Get online with a website that actually wins customers — fast, clear, and built for the people you're trying to reach.",
    bullets: [
      "Website that loads fast and looks brilliant",
      "Found on Google for the things people actually search",
      "Photos, copy, and structure that build trust",
      "Live in 2–3 weeks, owned by you",
    ],
    color: "var(--green-spring)",
    bg: "rgba(91,186,66,0.10)",
    price: "from £700",
  },
  {
    id: "grow",
    label: "Grow",
    num: "02",
    icon: "seedling",
    img: "assets/Grow.png",
    headline: "Turn visitors into customers.",
    blurb: "Smart lead capture, booking, and follow-up that brings new enquiries while you sleep — and stops them slipping through the cracks.",
    bullets: [
      "Lead forms that actually get filled in",
      "WhatsApp + email follow-up sequences",
      "Online booking, payments, deposits",
      "Reporting so you know what's working",
    ],
    color: "var(--green)",
    bg: "rgba(30,154,77,0.10)",
    price: "from £700",
  },
  {
    id: "scale",
    label: "Scale",
    num: "03",
    icon: "trending",
    img: "assets/Scale.png",
    headline: "Run the back office from one place.",
    blurb: "Custom admin systems that replace the spreadsheet jungle — students, jobs, invoices, staff, all in one tidy place.",
    bullets: [
      "Bespoke admin tailored to your workflow",
      "Invoicing, quoting, scheduling",
      "Customer & staff portals",
      "Integrations with Xero, Stripe, Calendar",
    ],
    color: "var(--navy)",
    bg: "rgba(27,63,115,0.10)",
    price: "from £1,500",
  },
  {
    id: "adopt-ai",
    label: "Adopt AI",
    num: "04",
    icon: "brain",
    img: "assets/Embrace%20AI.png",
    headline: "Put AI to work — for real.",
    blurb: "Practical AI that drafts your quotes, answers customers, writes your newsletters, and gives you back 5+ hours a week.",
    bullets: [
      "AI quoting & estimating assistants",
      "Customer chat trained on your business",
      "Auto-draft emails, content, and reports",
      "Built on tools you already trust",
    ],
    color: "var(--orange-warm)",
    bg: "rgba(243,156,32,0.12)",
    price: "from £250",
  },
];

const INDUSTRIES = [
  { id: "trades", label: "Trades", sub: "Plumbers, roofers, electricians, builders", tier: "grow", icon: "wrench", img: "assets/industry-icon-trade.png" },
  { id: "studios", label: "Studios & schools", sub: "Dance, music, tutors, fitness", tier: "launch", icon: "studio", img: "assets/industry-icon-studios.png" },
  { id: "retail", label: "Retail & florists", sub: "Local shops with online orders", tier: "grow", icon: "shop", img: "assets/industry-icon-shops.png" },
  { id: "hospitality", label: "Cafes & food", sub: "Bookings, menus, loyalty", tier: "launch", icon: "cup", img: "assets/industry-icon-food.png" },
  { id: "services", label: "Professional services", sub: "Accountants, consultants, agencies", tier: "scale", icon: "briefcase", img: "assets/industry-icon-services.png" },
  { id: "education", label: "Schools & academies", sub: "Admin, students, invoicing", tier: "scale", icon: "graduation", img: "assets/industry-icon-schools.png" },
];

const CASES = [
  {
    id: "carpenter",
    industry: "Trades",
    tier: "Launch",
    client: "LJB Carpentry — Kent",
    headline: "Quality work, quality page",
    summary: "A craft-led portfolio site that shows the work properly — full-bleed photography, considered typography, and a contact flow that respects how tradespeople actually work.",
    stat1: { v: "+220%", l: "enquiries vs old site" },
    stat2: { v: "8.4s", l: "avg session" },
    stat3: { v: "★ 4.9", l: "client rating" },
    color: "linear-gradient(135deg, #0e7a3d, #1e9a4d)",
    live: "https://ljb-carpentry.com/",
    img: "case-study-feature-ljb.webp",
    imgHero: "case-study-detail-ljb.webp",
  },
  {
    id: "dance-school",
    industry: "Studios",
    tier: "Launch + Grow",
    client: "Performance Hub — Medway",
    headline: "From 0 to 160 new visitors a month",
    summary: "Their old site wasn't pulling its weight. We rebuilt with parent-first navigation, clear class schedules, and SEO that ranks for every nearby town.",
    stat1: { v: "+160", l: "new visitors / mo" },
    stat2: { v: "#1", l: "for 'dance classes Medway'" },
    stat3: { v: "+38%", l: "trial bookings" },
    color: "linear-gradient(135deg, #ed7b1f, #f39c20)",
    live: "https://performancehubmedway.com/",
    img: "case-study-grid-performance-hub.webp",
    imgHero: "case-study-detail-performance-hub.webp",
  },
  {
    id: "builder",
    industry: "Trades",
    tier: "Grow",
    client: "Clout Properties & Maintenance — Rochester",
    headline: "5 new enquiries a day, on autopilot",
    summary: "We rebuilt a tired one-pager into a lead-generation machine with location pages, instant WhatsApp callback, and a smart booking flow.",
    stat1: { v: "+412%", l: "enquiries / month" },
    stat2: { v: "<2m", l: "first response time" },
    stat3: { v: "5/day", l: "qualified leads" },
    color: "linear-gradient(135deg, #ed7b1f, #f39c20)",
    live: "https://papayawhip-clam-349724.hostingersite.com/",
    img: "case-study-grid-clout-properties.webp",
    imgHero: "case-study-detail-clout-properties.webp",
  },
  {
    id: "school-admin",
    industry: "Schools",
    tier: "Scale",
    client: "Dance Studio OS — Maidstone",
    headline: "One system to run the whole school",
    summary: "Students, classes, registers, parents, invoices — every part of the school in one custom admin. Replaced four spreadsheets and a noticeboard.",
    stat1: { v: "5+ hrs", l: "admin saved / week" },
    stat2: { v: "100%", l: "MTD Compliant" },
    stat3: { v: "1", l: "system to learn" },
    color: "linear-gradient(135deg, #122a52, #0e7a3d)",
    live: "https://dsr.smbemore.com/dsos-admin-example.html",
    img: "case-study-grid-dsos.webp",
    imgHero: "case-study-detail-dsos.webp",
  },
  {
    id: "mimi-makes",
    industry: "Services",
    tier: "Launch",
    client: "Mimi Makes — Tunbridge Wells",
    headline: "Eye-catching logo to attract customers",
    summary: "Having an eye-catching logo gives the business legitimacy. Adding it to all items reminds customers of the creator and drives return visits.",
    stat1: { v: "+20", l: "returning customers" },
    stat2: { v: "+50", l: "items labelled" },
    stat3: { v: "1", l: "happy business owner" },
    color: "linear-gradient(135deg, #5bba42, #0e7a3d)",
    img: "case-study-grid-mimi-makes.webp",
    imgHero: "case-study-detail-mimi-makes.webp",
  },
  {
    id: "dance-school-ai",
    industry: "Education",
    tier: "Adopt AI",
    client: "East Sussex Dance Studios",
    headline: "AI-driven invoice creation at the push of a button",
    summary: "Using an existing Word template, the AI assistant creates 50+ invoices in under an hour, every month, without fail. Every invoice is personalised and double-checked.",
    stat1: { v: "10+ hrs", l: "admin saved / month" },
    stat2: { v: "100%", l: "invoices on time" },
    stat3: { v: "100%", l: "automated" },
    color: "linear-gradient(135deg, #1b3f73, #1e9a4d)",
    img: "case-study-grid-esds.webp",
    imgHero: "case-study-detail-esds.webp",
  },
  {
    id: "florist",
    industry: "Retail",
    tier: "Launch + Grow",
    client: "Briar & Bloom — Rochester",
    headline: "Online pre-orders that beat the high street",
    summary: "A beautiful florist site with same-day, postcode-aware delivery, custom bouquet builder, and Stripe payments. Now half their revenue is online.",
    stat1: { v: "53%", l: "of revenue online" },
    stat2: { v: "+160", l: "new visitors / mo" },
    stat3: { v: "2 wk", l: "to launch" },
    color: "linear-gradient(135deg, #5bba42, #0e7a3d)",
    img: "case-study-grid-briar-and-bloom.webp",
    imgHero: "case-study-detail-briar-and-bloom.webp",
  },
];

/* expose to global */
Object.assign(window, { Icon, SiteNav, SiteFooter, useReveal, Counter, getNavMode, TIERS, INDUSTRIES, CASES });