/* Case Study page renderer */

const CASE_DETAILS = {
  "carpenter": {
    challenge: [
      "LJB Carpentry's work is exceptional — the website needed to match. The old site looked like a 2010 portfolio and didn't show off the craft.",
      "Lewis was getting enquiries, but they weren't always the right ones. Too many time-wasters, not enough clients who understood the quality — and price — of what he does.",
    ],
    approach: [
      { t: "Photography led", d: "Full-bleed imagery, treated like a gallery. We art-directed a shoot of their last 6 months of work — kitchens, staircases, bespoke furniture." },
      { t: "Considered typography", d: "Italic display font, lots of white space, no rounded-everything. Designed to feel like the work: precise and unhurried." },
      { t: "Contact flow for tradespeople", d: "They get one message a day, but they're the right messages — quality over quantity. A short enquiry form that self-selects serious clients." },
      { t: "Portfolio-first navigation", d: "Visitors land on the work, not a wall of text about the company. The story comes second." },
    ],
    results: [
      "+220% enquiries vs the old site within 60 days of launch.",
      "8.4s average session — visitors actually look at the work.",
      "Now charging 35% more on average — quality work, quality page.",
      "Every enquiry now comes in pre-qualified: 'I saw your work and I want something similar.'",
    ],
    quote: {
      text: "Every enquiry now starts with 'I saw your website and...' The right clients are finding us.",
      name: "Lewis J. Brown",
      role: "Founder · LJB Carpentry",
    },
    tech: ["Astro", "Cloudflare", "Cloudinary", "Hostinger"],
    related: ["builder", "dance-school"],
    live: "https://ljb-carpentry.com/",
  },
  "dance-school": {
    challenge: [
      "Performance Hub was Medway's best-kept secret. A great dance school with no clear way for parents to find them online — the old site was hard to navigate, listed no class times, and had no booking.",
      "Charlotte, the principal, was spending hours each week answering the same questions by email and phone. Parents couldn't find the school on Google, let alone book a trial.",
    ],
    approach: [
      { t: "Parent-first navigation", d: "Built around the questions parents actually ask: my kid is X years old, what can they join? Can they come on a Tuesday? We mapped the journey from search to booked trial." },
      { t: "Class schedule front and centre", d: "Visual timetable showing every class, age group, and time with one-click trial booking. No more 'email us for availability'." },
      { t: "Local SEO", d: "Location pages for every nearby town. Now ranking top 3 for 'dance classes' across all of Medway." },
      { t: "New enquiry flow", d: "WhatsApp button for parents who prefer to message, booking form for those who prefer to self-serve. Response time went from 48 hours to instant." },
    ],
    results: [
      "From 0 to +160 new visitors per month within 90 days.",
      "Ranked #1 for 'dance classes Medway' on Google.",
      "+38% increase in trial class bookings.",
      "Charlotte saved 4+ hours per week on admin and parent queries.",
    ],
    quote: {
      text: "Trial sign-ups went through the roof in the first month. It's been a transformation for the school.",
      name: "Charlotte Bell",
      role: "Principal · Performance Hub Medway",
    },
    tech: ["Astro", "Cloudflare", "Stripe", "Notion", "WhatsApp Business"],
    related: ["carpenter", "dance-school-ai"],
    live: "https://performancehubmedway.com/",
  },
  "builder": {
    challenge: [
      "Clout Properties had a basic one-page site that hadn't been touched since the business launched. It ranked nowhere, loaded slowly, and the only way to reach them was a generic contact form that barely anyone used.",
      "Mark, the director, was relying entirely on word of mouth — fine when you're full, fatal when you want to grow. He was getting two or three enquiries a week from the site, and most weren't serious.",
    ],
    approach: [
      { t: "Audit & quick wins", d: "Week one: audit where leads are getting lost. Five issues identified, three fixed before the new site even launched." },
      { t: "Lead-first site rebuild", d: "Location pages for every area they cover. A persistent WhatsApp button. Quote form trimmed to 3 fields. Reviews and past jobs above the fold." },
      { t: "WhatsApp Business + auto-replies", d: "Customers now get a friendly auto-reply if Mark is on a job, with a callback promise within 30 minutes. No more lost leads while he's up a ladder." },
      { t: "Local SEO", d: "Google Business profile cleaned up, schema markup added, 10 location landing pages written and indexed." },
    ],
    results: [
      "+412% more enquiries per month vs the 90 days before launch.",
      "First-response time dropped from days to under 2 minutes with the WhatsApp callback.",
      "5 qualified leads per day on average — enough to keep a two-person team fully booked.",
      "Google Business profile now generating 60+ calls per month on its own.",
    ],
    quote: {
      text: "We went from a handful of enquiries a week to five a day. The WhatsApp button alone has transformed how customers get in touch.",
      name: "Mark Clout",
      role: "Director · Clout Properties & Maintenance",
    },
    tech: ["Astro", "Cloudflare", "WhatsApp Business API", "Google Business", "Hostinger"],
    related: ["carpenter", "florist"],
    live: "https://papayawhip-clam-349724.hostingersite.com/",
  },
  "school-admin": {
    challenge: [
      "Dance Studio OS was running a thriving school on four spreadsheets, a paper register, and a noticeboard. Invoicing was a multi-day job every month. Parents were confused about balances. Staff were burning out.",
      "The principal knew something had to change — but every 'all-in-one' solution they tried was designed for gyms or yoga studios, not a mixed-age dance school with bespoke class combinations.",
    ],
    approach: [
      { t: "Map every workflow", d: "Two days observing how the school actually runs. Every 'oh and then I have to...' became a requirement. Nothing was assumed." },
      { t: "One system, four jobs", d: "Students, classes, registers, invoices — all in one place. Each role (principal, admin, teacher) sees only what they need." },
      { t: "Parent portal", d: "Parents log in once a month, see their invoice, and pay with one click. Removed 60% of the office's monthly email volume." },
      { t: "Migrate without disruption", d: "Ran the new system in parallel with the old spreadsheets for a full term. Nothing slipped during the switch." },
    ],
    results: [
      "5+ hours of admin saved every week for the principal.",
      "100% MTD compliant invoicing — fully auditable, on time, every month.",
      "Staff onboarding time halved — new teachers learn one system, not four.",
      "Replaced 4 spreadsheets, 1 paper register, 1 noticeboard, and a lot of post-it notes.",
    ],
    quote: {
      text: "I used to dread the end of each month. Now I press one button and invoices go out. The school feels less chaotic than it did when it was half the size.",
      name: "Sophia Carter",
      role: "Principal · Dance Studio OS",
    },
    tech: ["Next.js", "Postgres", "Stripe", "Xero", "SendGrid"],
    related: ["dance-school-ai", "builder"],
    live: "https://dsr.smbemore.com/dsos-admin-example.html",
  },
  "mimi-makes": {
    challenge: [
      "Mimi runs a growing made-to-order sewing business out of Tunbridge Wells. Her Instagram was full of beautiful work, but she had no logo, no label, and nothing to tie her brand together across packaging, tags, or her online presence.",
      "She wanted to feel like a proper business, not a hobby. The logo was the first step — but it needed to be something she could put on everything.",
    ],
    approach: [
      { t: "Brand discovery", d: "We spent time understanding Mimi's aesthetic: considered, handmade, warm but modern. Not rustic. Not corporate. Exactly in between." },
      { t: "Logo concepts", d: "Three distinct directions — one illustrative, one typographic, one hybrid. Mimi chose the hybrid: a custom wordmark with a subtle needle-and-thread device." },
      { t: "Full format delivery", d: "PNG, SVG, and PDF. Light and dark versions. Horizontal and stacked. Favicon. Woven label template. Iron-on print template. Everything to go on everything." },
      { t: "Brand guidelines", d: "A one-pager covering colour palette, font pairing, and spacing rules — so every touchpoint stays consistent." },
    ],
    results: [
      "+20 returning customers who now recognise and seek out the brand on its own.",
      "+50 items now leave the workshop properly labelled with the Mimi Makes mark.",
      "1 business owner who finally feels like a business owner.",
    ],
    quote: {
      text: "I can't believe how much the logo changed how I feel about my business. Customers recognise it now. It makes everything feel real.",
      name: "Mimi",
      role: "Owner · Mimi Makes",
    },
    tech: ["Adobe Illustrator", "SVG / PNG / PDF delivery", "Woven label template"],
    related: ["dance-school", "florist"],
  },
  "dance-school-ai": {
    challenge: [
      "East Sussex Dance Studios runs 50+ students across multiple class levels and age groups. Every month, the admin team spent 10+ hours creating invoices manually — opening a Word template, adjusting for each student's classes, absences, and individual pricing, then emailing one by one.",
      "Invoices were sometimes late, sometimes wrong, and always stressful. A task that should take an hour was eating an entire day.",
    ],
    approach: [
      { t: "Map the invoice workflow", d: "We documented the full process end-to-end — which data lives where, what gets customised per student, what the output needs to look like." },
      { t: "AI assistant trained on their template", d: "Built a Claude-powered tool that reads the student register, applies their pricing rules, and produces a personalised invoice for each student using the existing Word template — formatting and all." },
      { t: "Human review built in", d: "AI drafts the batch. Admin reviews and approves each before sending. Nothing goes out without a human check. The AI flags anything that looks unusual." },
      { t: "Rollout and training", d: "Ran alongside the manual process for one month. Staff built confidence, edge cases were handled, then full handover." },
    ],
    results: [
      "10+ hours of admin saved every month — the invoicing run now takes under an hour.",
      "100% of invoices sent on time, every month, without exception.",
      "100% of invoices generated automatically — reviewed and sent by the team, but drafted by AI.",
      "Zero formatting errors since launch — every invoice looks exactly right, every time.",
    ],
    quote: {
      text: "I used to set aside a whole weekend for invoicing. Now it's done in an hour and I barely have to touch it.",
      name: "Rachel",
      role: "Studio Manager · East Sussex Dance Studios",
    },
    tech: ["Claude (Anthropic)", "Microsoft Word", "Python", "Zapier", "SendGrid"],
    related: ["school-admin", "dance-school"],
  },
  "florist": {
    challenge: [
      "Briar & Bloom had a beautiful shop but no online presence beyond Instagram. They were turning away delivery enquiries because they had no way to take orders or payment online.",
      "They wanted something that felt as considered as their bouquets — not a generic e-commerce template — but built around the realities of fresh flowers: same-day deadlines, postcode-limited delivery, and seasonal stock.",
    ],
    approach: [
      { t: "Brand-first design", d: "Hand-set typography, generous imagery, and a colour palette borrowed straight from their shop. Felt like Briar & Bloom, not Shopify." },
      { t: "Bouquet builder", d: "A simple, beautiful customiser for special occasions. Pick a size, choose dominant colours, add a note. The florist makes the call on exact stems." },
      { t: "Postcode-aware delivery", d: "Customers see same-day availability based on their postcode and the current time. No false promises, no disappointed customers." },
      { t: "Photography programme", d: "A monthly photoshoot, automated rotation on the homepage — so the site always feels current and seasonal, not stale." },
    ],
    results: [
      "53% of revenue now comes from online orders, in just 6 months.",
      "+160 new visitors per month from local SEO.",
      "Launched in 2 weeks — from kickoff to first online order.",
      "Average order value 22% higher online than in-store, thanks to the bouquet builder upsell flow.",
    ],
    quote: {
      text: "Customers tell us the website feels like walking into the shop. That's the highest compliment we could get.",
      name: "Eleanor Briar",
      role: "Owner · Briar & Bloom",
    },
    tech: ["Astro", "Stripe", "Cloudflare", "Cloudinary"],
    related: ["carpenter", "mimi-makes"],
  },
};

function CasePage({ caseId, basePath }) {
  const c = CASES.find((x) => x.id === caseId);
  const d = CASE_DETAILS[caseId];

  return (
    <>
      <SiteNav current="cases" basePath={basePath} />
      <main>
        <section className="case-hero" data-screen-label="01 Case Hero">
          <div className="container">
            <div className="tier-crumb">
              <a href={basePath + "index.html"}>Home</a>
              <Icon.chevron />
              <a href={basePath + "index.html#cases"}>Case studies</a>
              <Icon.chevron />
              <span>{c.client.split("—")[0].trim()}</span>
            </div>
            <div className="case-hero-meta">
              <span className="chip chip-navy">{c.industry}</span>
              <span className="chip chip-green">{c.tier}</span>
            </div>
            <h1 className="case-h1">{c.headline}</h1>
            <p className="case-client-line">{c.client}</p>
            <p className="lede case-summary">{c.summary}</p>
          </div>

          <div className="container case-hero-media">
            <div className="case-mock-wrap" style={{ background: c.color }}>
              <CaseMockup id={c.id} basePath={basePath} imgSrc={c.imgHero || c.img} />
            </div>
          </div>
        </section>

        <section className="case-stats" data-screen-label="02 Stats band">
          <div className="container">
            <div className="case-stats-row">
              <div className="case-stat-block">
                <div className="case-stat-v">{c.stat1.v}</div>
                <div className="case-stat-l">{c.stat1.l}</div>
              </div>
              <div className="case-stat-block">
                <div className="case-stat-v">{c.stat2.v}</div>
                <div className="case-stat-l">{c.stat2.l}</div>
              </div>
              <div className="case-stat-block">
                <div className="case-stat-v">{c.stat3.v}</div>
                <div className="case-stat-l">{c.stat3.l}</div>
              </div>
              {c.live && (
                <div className="case-live">
                  <a className="btn btn-orange" href={c.live} target="_blank" rel="noreferrer">
                    See it live <Icon.arrowUpRight />
                  </a>
                </div>
              )}
            </div>
          </div>
        </section>

        <section className="case-body" data-screen-label="03 Story">
          <div className="container case-body-grid">
            <aside className="case-toc">
              <div className="case-toc-label">In this story</div>
              <ul>
                <li><a href="#challenge">The challenge</a></li>
                <li><a href="#approach">Our approach</a></li>
                <li><a href="#results">Results</a></li>
                <li><a href="#tech">Tech stack</a></li>
              </ul>
              {c.live && (
                <a className="case-toc-live" href={c.live} target="_blank" rel="noreferrer">
                  <span>See it live</span>
                  <Icon.arrowUpRight />
                </a>
              )}
            </aside>

            <article className="case-article">
              <div id="challenge" className="case-section">
                <span className="eyebrow">01 · The challenge</span>
                <h2 className="h-2">Where they started.</h2>
                {d.challenge.map((p, i) => (
                  <p key={i} className="case-p">{p}</p>
                ))}
              </div>

              <div id="approach" className="case-section">
                <span className="eyebrow">02 · The approach</span>
                <h2 className="h-2">What we did about it.</h2>
                <div className="case-approach">
                  {d.approach.map((a, i) => (
                    <div key={i} className="case-approach-step">
                      <div className="case-approach-num">{String(i+1).padStart(2,"0")}</div>
                      <div>
                        <h4 className="case-approach-t">{a.t}</h4>
                        <p className="case-p" style={{margin: 0}}>{a.d}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div id="results" className="case-section">
                <span className="eyebrow">03 · The results</span>
                <h2 className="h-2">What happened next.</h2>
                <ul className="case-results">
                  {d.results.map((r, i) => (
                    <li key={i}><Icon.check /> {r}</li>
                  ))}
                </ul>
              </div>

              <div className="case-quote">
                <div className="case-quote-mark">"</div>
                <p>{d.quote.text}</p>
                <div className="case-quote-name">
                  <strong>{d.quote.name}</strong>
                  <span>{d.quote.role}</span>
                </div>
              </div>

              <div id="tech" className="case-section">
                <span className="eyebrow">04 · The build</span>
                <h2 className="h-2">Tech we used.</h2>
                <div className="case-tech">
                  {d.tech.map((t, i) => (
                    <span key={i} className="chip">{t}</span>
                  ))}
                </div>
              </div>
            </article>
          </div>
        </section>

        <section className="case-related" data-screen-label="04 Related">
          <div className="container">
            <div className="section-head">
              <span className="eyebrow">More like this</span>
              <h2 className="h-1">Other businesses we've helped.</h2>
            </div>
            <div className="case-grid">
              {d.related.map((relId) => {
                const r = CASES.find((x) => x.id === relId);
                return (
                  <a key={relId} href={`${basePath}case-studies/${relId}.html`} className="case-card">
                    <div className="cc-media" style={{ background: r.color }}>
                      <CaseMockup id={relId} small basePath={basePath} />
                    </div>
                    <div className="cc-body">
                      <div className="cc-meta">
                        <span className="chip">{r.industry}</span>
                        <span className="chip chip-green">{r.tier}</span>
                      </div>
                      <h3 className="h-3 cc-headline">{r.headline}</h3>
                      <p className="cc-client">{r.client}</p>
                      <div className="cc-stats">
                        <div className="cc-stat"><b>{r.stat1.v}</b><span>{r.stat1.l}</span></div>
                        <div className="cc-stat"><b>{r.stat2.v}</b><span>{r.stat2.l}</span></div>
                      </div>
                      <span className="cc-cta">View <Icon.arrowUpRight /></span>
                    </div>
                  </a>
                );
              })}
            </div>
          </div>
        </section>

        <section className="tier-cta" data-screen-label="05 CTA">
          <div className="container">
            <div className="tier-cta-inner">
              <div>
                <span className="eyebrow" style={{color: "var(--green-bright)"}}>Got a similar problem?</span>
                <h2 className="h-1" style={{marginTop: "16px"}}>Let's talk about <span style={{color: "var(--green-bright)"}}>your version</span>.</h2>
                <p className="lede">A free 20-minute call. We'll tell you honestly whether something similar would work for you.</p>
                <div className="tier-cta-buttons">
                  <a className="btn btn-whatsapp btn-lg" 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>
                  <a className="btn btn-ghost btn-lg" href={basePath + "contact.html"}>Get in touch <Icon.arrow /></a>
                </div>
              </div>
              <div className="tier-cta-side">
                <h3>Likely fit for</h3>
                <ul>
                  <li><Icon.check /> Trades & services</li>
                  <li><Icon.check /> Retail with delivery / online orders</li>
                  <li><Icon.check /> Studios, schools, clinics</li>
                  <li><Icon.check /> Anyone with a workflow that should be one tool, not five</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </main>
      <SiteFooter basePath={basePath} />
    </>
  );
}

window.CasePage = CasePage;