// services-detail.jsx — detail pages for individual services

const SERVICE_DETAILS = {
  'brand-identity': {
    slug: 'brand-identity', num: '01', glyph: 'B',
    image: 'https://images.unsplash.com/photo-Mo00k9ifF7w?w=1200&q=80&auto=format&fit=crop',
    title: 'Brand identity & naming, end to end.',
    titleAccent: 'naming',
    cat: 'Branding',
    deck: 'Wordmarks, naming sprints, identity systems and brand guidelines for businesses about to enter a new market — or rebuild from a tired one. We protect what your brand already owns and rebuild what it shouldn\u2019t.',
    timeline: '6\u201310 weeks',
    startingAt: '\u20b93.5L',
    team: '3 seniors',
    bestFor: 'New launches, rebrands, naming',
    included: [
      { t: 'Discovery & equity audit', d: 'Stakeholder interviews, market scan and a written brief that everyone — board included — actually signs off on.' },
      { t: 'Naming sprint',           d: 'When needed. Linguistic, legal and domain checks across Hindi, Punjabi and English in parallel.' },
      { t: 'Identity system',         d: 'Wordmark, supporting marks, typography, colour, photography direction and a working component library.' },
      { t: 'Brand guidelines',        d: 'A 40\u201360 page PDF and a Figma library your in-house team can actually use after we leave.' },
    ],
    approach: [
      { n: '01', t: 'Listen', d: 'Two weeks of interviews — internal team, customers, lapsed customers, and someone who almost bought but didn\u2019t. We need both stories.' },
      { n: '02', t: 'Position', d: 'A one-page positioning document. Audience, promise, proof, and what we will refuse to be. This becomes the brief for every following step.' },
      { n: '03', t: 'Make', d: 'Three identity directions, narrowed to one, then refined to a working system across the surfaces you actually use.' },
      { n: '04', t: 'Hand off', d: 'Guidelines, working files, training session and a 30-day check-in. We stay reachable while your team rolls it out.' },
    ],
    tools: ['Figma', 'Adobe Illustrator', 'Glyphs', 'Affinity Publisher', 'Trademark search', 'GoDaddy domains'],
    relatedCases: ['sona-foods'],
    faqs: [
      { q: 'Do you do brand-only engagements, or always with marketing?', a: 'Brand-only is fine, and very common. About a third of our brand work is hand-off engagements with no ongoing retainer.' },
      { q: 'How does naming work legally?', a: 'We run TM, domain and linguistic checks during the sprint. Final filing is done by your IP lawyer — we hand off a shortlist of 3\u20135 names with our checks attached.' },
      { q: 'Can you work with our existing logo?', a: 'Yes — a refresh that protects existing equity is often the right call. We\u2019ll tell you honestly if it isn\u2019t.' },
      { q: 'Who owns the files?', a: 'You do. Working files, fonts (licensed in your name), and source vector — all delivered on final payment.' },
    ],
    nextSlug: 'packaging-print',
  },

  'packaging-print': {
    slug: 'packaging-print', num: '02', glyph: 'P',
    image: 'https://images.unsplash.com/photo-Tzm3Oyu_6sk?w=1200&q=80&auto=format&fit=crop',
    title: 'Packaging, print and out-of-home, produced in-house.',
    titleAccent: 'in-house',
    cat: 'Production',
    deck: 'Cartons, labels, brochures, hoardings, vehicle wraps and event signage. Designed, proofed and printed by our in-house team in Ludhiana — so the colour on your shelf actually matches the colour we approved on screen.',
    timeline: '3\u20136 weeks',
    startingAt: '\u20b91.5L',
    team: '4 \u00b7 design + production',
    bestFor: 'Retail SKUs, launches, OOH',
    included: [
      { t: 'Packaging design',        d: 'Structural and graphic. From single SKU artwork to a 60-SKU range with master-pages and FoP variants.' },
      { t: 'Print collateral',        d: 'Brochures, lookbooks, catalogues, brand kits, stationery and dealer-board collateral.' },
      { t: 'Out-of-home',             d: 'Hoardings, gantries, bus-stop panels, gate-arches and vehicle wraps. Site-survey to install.' },
      { t: 'Press + proofing',        d: 'On-press supervision for any run over 500 pieces. Pantone calibration and substrate proofs included.' },
    ],
    approach: [
      { n: '01', t: 'Audit', d: 'Existing artwork, dielines and substrates. What works, what survives the supply chain, what doesn\u2019t.' },
      { n: '02', t: 'Design', d: 'Concept, refinement and master artwork. Variants kept on a parametric system so the 60th SKU doesn\u2019t fight the 1st.' },
      { n: '03', t: 'Proof', d: 'Wet-proofs and Pantone match before any large run. Hoardings get a 1:10 mock at our studio first.' },
      { n: '04', t: 'Print + install', d: 'We handle vendor coordination, on-press supervision and on-site install. You see a finished thing, not a hand-off chain.' },
    ],
    tools: ['Esko ArtPro', 'Adobe Illustrator', 'X-Rite proofing', 'Pantone Plus', 'GMG ColorProof', 'Vendor network · 14 cities'],
    relatedCases: ['sona-foods', 'township-launch'],
    faqs: [
      { q: 'Can you handle a multi-city OOH campaign?', a: 'Yes. Largest single deployment we\u2019ve run was 312 hoardings across 11 cities in 9 days. Site-survey, vendor management and install audit all included.' },
      { q: 'Do you guarantee print quality?', a: 'On runs over 500 we supervise on-press and re-run any units that fail Pantone delta-E tolerances. Quoted into the price.' },
      { q: 'Smallest job you take?', a: 'A single SKU label, if it\u2019s for a brand we\u2019ve already worked with. New clients usually start at a brand + 6\u20138 SKU minimum.' },
      { q: 'Can you work with our existing print vendor?', a: 'Yes, often. We\u2019ll provide press-ready artwork, proofs and an on-press supervision day. Most clients eventually switch to our network because the colour discipline is tighter.' },
    ],
    nextSlug: 'real-estate',
  },

  'real-estate': {
    slug: 'real-estate', num: '03', glyph: 'R',
    image: 'https://images.unsplash.com/photo-WQ42ypHazNo?w=1200&q=80&auto=format&fit=crop',
    title: 'Real estate marketing for builders and townships.',
    titleAccent: 'townships',
    cat: 'Real Estate',
    deck: 'Pre-launch teasers, site activation, broker enablement and lead-to-booking funnels for residential and plotted developments. Most of our real estate engagements end with the project sold out before phase 2 starts.',
    timeline: '12\u201324 weeks',
    startingAt: '\u20b96L / month',
    team: '6 \u00b7 cross-functional',
    bestFor: 'Pre-launch, mid-launch, sell-out',
    included: [
      { t: 'Pre-launch engine',       d: 'Two-to-three weeks of curiosity creative. No price, no name. Build a list before the competition knows you exist.' },
      { t: 'Brand & collateral',      d: 'Project name, identity, brochures, walk-through reel, model-flat signage, site-office kit.' },
      { t: 'Performance funnel',      d: 'Meta, Google and YouTube lead-gen with phone-call attribution and CRM hand-off built in.' },
      { t: 'Broker activation',       d: 'Onboarding 100\u2013300 brokers on a paid-per-qualified-lead model. Daily WhatsApp lead-quality digests.' },
    ],
    approach: [
      { n: '01', t: 'Locate', d: 'Walk the site. Audit the comparables. Talk to ten brokers in the catchment. The map is never the territory.' },
      { n: '02', t: 'Stage', d: 'Pre-launch teasers to build a list before the official launch. Hoardings up, lead funnel ready.' },
      { n: '03', t: 'Launch', d: 'Reveal day. Hoardings, OOH, broker WhatsApp, paid media, site activation — all firing on a single coordinated date.' },
      { n: '04', t: 'Sell', d: 'Weekly review on the only number that matters: site visits to bookings ratio. Adjust spend, creative or broker mix accordingly.' },
    ],
    tools: ['Meta Ads', 'Google Ads', 'YouTube', 'CallTrackingMetrics', 'WhatsApp Business API', 'LeadSquared CRM', 'Salesforce'],
    relatedCases: ['township-launch'],
    faqs: [
      { q: 'Do you take a brokerage share?', a: 'No — we charge a clear monthly retainer plus a performance bonus tied to qualified-lead delivery. Brokerage is yours.' },
      { q: 'What\u2019s a realistic cost-per-booking?', a: 'Ludhiana / tier-2 plotted developments: \u20b945,000\u201375,000. NCR and Mumbai mid-segment: \u20b91.2\u20133L. Anyone quoting lower is hiding something.' },
      { q: 'Can you work with an existing in-house team?', a: 'Yes. Most of our real estate clients have an in-house marketing manager. We sit alongside, not above.' },
      { q: 'Do you do RERA-compliant creative?', a: 'Every piece of paid creative we ship for a regulated project goes through a RERA review. We keep a compliance log per campaign.' },
    ],
    nextSlug: 'political',
  },

  'political': {
    slug: 'political', num: '04', glyph: 'V',
    image: 'https://images.unsplash.com/photo-AXGOhRx0Sko?w=1200&q=80&auto=format&fit=crop',
    title: 'Political campaigns from booth to broadcast.',
    titleAccent: 'broadcast',
    cat: 'Political',
    deck: 'Candidate creative, IVR, WhatsApp outreach, field-team enablement and last-mile booth kits — for state legislatures, municipal councils and panchayats. We work on a max of two opposing candidates in any single election cycle.',
    timeline: '8\u201320 weeks',
    startingAt: 'Bespoke',
    team: '8\u201312 \u00b7 election-time',
    bestFor: 'MLA, MC, panchayat, by-elections',
    included: [
      { t: 'Constituency listening',  d: 'Booth-by-booth interviews. The opposition has a story; we find out which parts your voters actually believe.' },
      { t: 'Single-message creative', d: 'One message, three formats, repeated for the whole campaign. Posters, reels, IVR scripts, pamphlets — same core sentence.' },
      { t: 'IVR + WhatsApp engine',   d: 'Voice broadcasts in your candidate\u2019s voice. Segmented WhatsApp by booth and household type.' },
      { t: 'Field kit + training',    d: 'Printed playbook per booth-incharge. What to say, when to say it, and the three hardest questions.' },
    ],
    approach: [
      { n: '01', t: 'Listen', d: 'Two weeks of constituency interviews across every polling booth. Card-sort the issues. Pick three.' },
      { n: '02', t: 'Position', d: 'A one-sentence message every campaign worker can repeat without notes. If they can\u2019t, we rewrite it.' },
      { n: '03', t: 'Amplify', d: 'IVR, WhatsApp, paid digital and OOH — all carrying the same sentence, varied by format and audience.' },
      { n: '04', t: 'Close', d: 'Last 14 days: pure mobilisation. Booth-incharge briefings, voter-slip distribution, polling-day ops.' },
    ],
    tools: ['Knowlarity IVR', 'Exotel', 'WhatsApp Business API', 'Field-ops app (custom)', 'NVSP voter rolls', 'Meta Ads'],
    relatedCases: ['mla-campaign'],
    faqs: [
      { q: 'Will you work on any campaign?', a: 'No. We screen for candidate intent and policy direction before signing. We have walked away from work, and we will again.' },
      { q: 'Do you do work for opposing candidates?', a: 'Never in the same constituency or the same election cycle. Once you sign, we are exclusive for that race.' },
      { q: 'How is pricing structured?', a: 'A fixed retainer for the campaign window plus media at cost. No success fees, no bonuses tied to outcomes — that line stays clean.' },
      { q: 'Do you work outside Punjab?', a: 'Yes. We have run campaigns in Haryana, Himachal, Delhi and Rajasthan. We bring a local field partner in every state.' },
    ],
    nextSlug: 'performance',
  },

  'performance': {
    slug: 'performance', num: '05', glyph: 'M',
    image: 'https://images.unsplash.com/photo-20BjhzK9Nxs?w=1200&q=80&auto=format&fit=crop',
    title: 'Performance marketing that ships a cost-per-lead you can defend.',
    titleAccent: 'defend',
    cat: 'Performance',
    deck: 'Meta, Google, YouTube and programmatic — set up and run by senior media buyers. We pitch the number we expect to hit on call one, and report against it every week.',
    timeline: 'Ongoing',
    startingAt: '\u20b91.5L / month',
    team: '4 \u00b7 buyer + creative',
    bestFor: 'Lead-gen, e-comm, app installs',
    included: [
      { t: 'Account architecture',    d: 'Campaign structure, audience taxonomy, naming convention, attribution model. The unglamorous foundation that makes everything else work.' },
      { t: 'Creative testing',        d: '15\u201330 new creatives per month. Statistically meaningful test groups, not vibes.' },
      { t: 'Audience strategy',       d: 'Lookalikes, custom audiences, interest stacks and exclusions — tuned weekly against the lead-quality signal.' },
      { t: 'Reporting + insight',     d: 'A weekly written read of what changed and why. Numbers without narrative are wallpaper.' },
    ],
    approach: [
      { n: '01', t: 'Audit', d: 'A two-week audit of the existing account, conversion stack, attribution and creative library. We won\u2019t scale a broken funnel.' },
      { n: '02', t: 'Rebuild', d: 'Account structure, pixel/server-side tracking, audience layers and a creative brief. Live in week three.' },
      { n: '03', t: 'Test', d: 'Three creative directions, two audience layers, one landing page variant per week. Always testing, never random.' },
      { n: '04', t: 'Scale', d: 'When CPL is stable for four weeks, we scale spend in 30% increments. Conservative, slow, durable.' },
    ],
    tools: ['Meta Ads', 'Google Ads', 'YouTube', 'GA4', 'Looker Studio', 'Hyros', 'Server-side GTM'],
    relatedCases: ['heritage-resorts', 'township-launch'],
    faqs: [
      { q: 'How much should we spend on day one?', a: 'Minimum useful spend is \u20b91.5\u20132L / month media. Below that the test cycles are too slow to learn anything.' },
      { q: 'Do you work on commission of ad spend?', a: 'No. A flat retainer plus a creative line. Commission models incentivise us to spend, not to perform.' },
      { q: 'Where does the creative come from?', a: 'Our in-house team. Reels, statics, photography and copy — all under one roof. Outsourced creative kills test velocity.' },
      { q: 'How fast do we see results?', a: 'Week one: account live. Week three: stable CPL. Week six: scaled spend. Anyone promising faster is probably running unsustainable bids.' },
    ],
    nextSlug: 'content-video',
  },

  'content-video': {
    slug: 'content-video', num: '06', glyph: 'C',
    image: 'https://images.unsplash.com/photo-ADMTfUoB4Pg?w=1200&q=80&auto=format&fit=crop',
    title: 'Reels, drone, photography and long-form, produced in studio.',
    titleAccent: 'in studio',
    cat: 'Content',
    deck: 'Our in-house production team writes, shoots, edits and ships. Reels for performance campaigns, brand films for launches, site reels for real estate and drone work for hospitality. Turnaround the day after the shoot when needed.',
    timeline: '2\u20138 weeks',
    startingAt: '\u20b91.2L',
    team: '5 \u00b7 director-led',
    bestFor: 'Reels, brand films, OOH visuals',
    included: [
      { t: 'Reels factory',           d: '8\u201312 reels per month. Hook-tested, captioned, format-correct for Meta, YouTube Shorts and WhatsApp Status.' },
      { t: 'Brand films',             d: '60\u2013120 second narrative films. Script, board, shoot, post — handled by a single director.' },
      { t: 'Photography',             d: 'Product, lifestyle, event, portrait. In-studio or on location, with full retouching included.' },
      { t: 'Drone + aerial',          d: 'DGCA-licensed pilots and equipment. Cinema-grade aerial for real estate, hospitality and event work.' },
    ],
    approach: [
      { n: '01', t: 'Brief', d: 'One page, one outcome. What is this film for? If we can\u2019t answer in a sentence we haven\u2019t briefed it properly.' },
      { n: '02', t: 'Board', d: 'Storyboard or shot-list, depending on the format. Approved on a single call before any cameras come out.' },
      { n: '03', t: 'Shoot', d: 'Director-led. The director on set is the director who edits — no creative loss at the cut.' },
      { n: '04', t: 'Cut', d: 'First cut in 48 hours. Two rounds of revision. Final master in three weekday formats: 9:16, 1:1, 16:9.' },
    ],
    tools: ['Sony FX6', 'DJI Mavic 3 Cine', 'DaVinci Resolve', 'Premiere Pro', 'Pro Tools', 'Capture One'],
    relatedCases: ['township-launch', 'heritage-resorts'],
    faqs: [
      { q: 'Can you turn reels around in 24 hours?', a: 'Yes, for clients on a content retainer. The shoot day plus next-day cut is built into the price.' },
      { q: 'Do you write the scripts?', a: 'Always. Our copy team writes, hands off to the director, and stays through the edit. No agency telephone-game.' },
      { q: 'Where do you shoot?', a: 'Our 2,000 sqft studio in Ludhiana with cyc-wall and prop stock, or on location anywhere our trucks can reach in a 6-hour drive.' },
      { q: 'Drone licences?', a: 'All our pilots and craft are DGCA-registered. We carry liability insurance and handle the permit applications.' },
    ],
    nextSlug: 'automation',
  },

  'automation': {
    slug: 'automation', num: '07', glyph: 'A',
    image: 'https://images.unsplash.com/photo-FO7JIlwjOtU?w=1200&q=80&auto=format&fit=crop',
    title: 'Marketing automation that respects the lead and the human.',
    titleAccent: 'human',
    cat: 'Automation',
    deck: 'WhatsApp Business, CRM workflows, lead routing and post-sale nurtures. We build the automations a small in-house team would build if they had three months and one really good engineer. Most of our clients see lead response time fall under two minutes.',
    timeline: '4\u201312 weeks',
    startingAt: '\u20b92.5L setup',
    team: '3 \u00b7 engineer-led',
    bestFor: 'Lead nurture, post-sale, retention',
    included: [
      { t: 'Lead routing',            d: 'Inbound lead \u2192 right team \u2192 right channel \u2192 timestamp. Round-robin, skill-based or geo, with SLAs alerted to a Slack channel.' },
      { t: 'WhatsApp Business API',   d: 'Verified green-tick setup, message templates, broadcast lists and a chatbot that hands off cleanly to a human.' },
      { t: 'CRM build',               d: 'Pipeline, custom fields, automation rules and dashboards in HubSpot, Zoho or LeadSquared. Migration from your spreadsheet included.' },
      { t: 'Email + SMS journeys',    d: 'Welcome, nurture, re-engagement, win-back and post-sale series — written by our copy team and built in your ESP.' },
    ],
    approach: [
      { n: '01', t: 'Map', d: 'Whiteboard every existing path from lead to revenue. Where it breaks, where it stalls, where humans do work a machine should.' },
      { n: '02', t: 'Pick', d: 'Three highest-leverage automations first. The rest is roadmap, not week-one work.' },
      { n: '03', t: 'Build', d: 'Configured, tested, documented. Every automation has a written run-book your team can read in five minutes.' },
      { n: '04', t: 'Tune', d: 'Two weeks of supervised live operation. We fix what breaks, retrain what mis-fires, and only then hand over the keys.' },
    ],
    tools: ['HubSpot', 'Zoho', 'LeadSquared', 'WhatsApp Business API', 'Twilio', 'Make.com', 'n8n', 'Postmark'],
    relatedCases: ['heritage-resorts'],
    faqs: [
      { q: 'Will this work with our existing CRM?', a: 'Probably. We work with HubSpot, Zoho, Salesforce, LeadSquared and a few homegrown systems. We will audit it on call one and tell you honestly.' },
      { q: 'Do you set up the WhatsApp green tick?', a: 'Yes, through Meta\u2019s Business Service Provider programme. Verification typically takes 7\u201310 working days.' },
      { q: 'What about data privacy?', a: 'Indian DPDP-compliant by default. Consent capture, deletion paths, audit logs. We will not build anything that gets you a regulator letter.' },
      { q: 'Can you train our team?', a: 'Built in. Two training sessions, written run-books, and a 30-day post-handover support window are part of every engagement.' },
    ],
    nextSlug: 'web-seo',
  },

  'web-seo': {
    slug: 'web-seo', num: '08', glyph: 'W',
    image: 'https://images.unsplash.com/photo-ml1IgjV8OvY?w=1200&q=80&auto=format&fit=crop',
    title: 'Marketing sites and landing pages that load on a 4G phone.',
    titleAccent: '4G',
    cat: 'Web & SEO',
    deck: 'Marketing sites, landing pages, microsites and on-page SEO. Designed and built so the slowest device on your slowest customer\u2019s slowest network still loads under two seconds.',
    timeline: '4\u201310 weeks',
    startingAt: '\u20b93L',
    team: '3 \u00b7 design + build',
    bestFor: 'Launches, microsites, SEO',
    included: [
      { t: 'Marketing sites',         d: 'Up to 20 pages. Design, build, copy, CMS. Built on Webflow, Sanity or a hand-rolled Next.js depending on what your team can maintain.' },
      { t: 'Landing pages',           d: 'Campaign-specific conversion pages. A/B-ready, attribution wired in, sub-2s load on Lighthouse.' },
      { t: 'On-page SEO',             d: 'Audit, keyword map, on-page rewrites, schema markup and an internal-linking plan. Quarterly reviews built in.' },
      { t: 'Speed + accessibility',   d: 'Core Web Vitals in the green, WCAG AA, screen-reader audit, India-region CDN — included, not extra.' },
    ],
    approach: [
      { n: '01', t: 'Audit', d: 'Existing site, analytics, keyword footprint and bounce paths. What works, what leaks, what the search console is already telling you.' },
      { n: '02', t: 'Design', d: 'Wireframes, then visual design. Mobile-first because 78% of your traffic is. Style review with your team before any code.' },
      { n: '03', t: 'Build', d: 'CMS-driven, content-editable, fast. Performance budgets enforced in CI — slow pages don\u2019t ship.' },
      { n: '04', t: 'Launch', d: '301 plan, monitoring, post-launch SEO watch. The week after launch is where most SEO is won or lost.' },
    ],
    tools: ['Next.js', 'Webflow', 'Sanity', 'Vercel', 'Search Console', 'Ahrefs', 'Lighthouse', 'Plausible'],
    relatedCases: ['sona-foods', 'heritage-resorts'],
    faqs: [
      { q: 'Webflow, WordPress or custom?', a: 'Whatever your team will actually maintain. Default is Webflow for marketing sites, Next.js + Sanity for anything with custom logic.' },
      { q: 'How is SEO priced?', a: 'On-page SEO is included in any site build. Ongoing SEO retainers start at \u20b975K / month for 3\u20136 month sprints with a written deliverable each month.' },
      { q: 'Do you do e-commerce?', a: 'Shopify-based D2C, yes. Marketplaces (Amazon, Flipkart) listing-optimisation, yes. Bespoke headless commerce on case-by-case.' },
      { q: 'Who owns the code?', a: 'You do. Repo handed over on launch, with a 90-day post-launch support window for bugs at no additional cost.' },
    ],
    nextSlug: 'brand-identity',
  },
};

const SERVICE_ORDER = [
  'brand-identity', 'packaging-print', 'real-estate', 'political',
  'performance', 'content-video', 'automation', 'web-seo'
];

function ServiceDetailPage({ slug, setRoute }) {
  const sd = SERVICE_DETAILS[slug];
  if (!sd) {
    return (
      <div className="page">
        <div className="page-head">
          <div className="wrap">
            <h1>Service not found</h1>
            <button className="btn btn-ghost btn-large" style={{ marginTop: 24 }} onClick={() => setRoute('services')}>
              ← Back to all services
            </button>
          </div>
        </div>
      </div>
    );
  }

  const [openFaq, setOpenFaq] = React.useState(0);
  const next = SERVICE_DETAILS[sd.nextSlug];
  const related = (sd.relatedCases || []).map(s => (window.CASES || {})[s]).filter(Boolean);

  return (
    <div className="page">
      {/* Hero */}
      <section className="cs-hero">
        <div className="cs-hero-grid" aria-hidden="true" />
        <div className="wrap">
          <div className="cs-breadcrumb">
            <a onClick={() => setRoute('services')}>Services</a>
            <span className="sep" />
            <span>{sd.cat}</span>
            <span className="sep" />
            <span className="cur">{sd.num} · {sd.title.split(',')[0].split('.')[0]}</span>
          </div>

          <CaseStudyTitle text={sd.title} accent={sd.titleAccent} />

          <LineReveal delay={400}>
            <p className="cs-deck">{sd.deck}</p>
          </LineReveal>

          <div className="cs-meta">
            <Reveal className="cell" delay={100}>
              <span className="k">Timeline</span>
              <span className="v">{sd.timeline}</span>
            </Reveal>
            <Reveal className="cell" delay={180}>
              <span className="k">Starting at</span>
              <span className="v">{sd.startingAt}</span>
            </Reveal>
            <Reveal className="cell" delay={260}>
              <span className="k">Team</span>
              <span className="v">{sd.team}</span>
            </Reveal>
            <Reveal className="cell" delay={340}>
              <span className="k">Best for</span>
              <span className="v">{sd.bestFor}</span>
            </Reveal>
          </div>

          <Parallax speed={-0.12}>
            <Reveal className="cs-hero-image">
              {sd.image ? (
                <img src={sd.image} alt={sd.title} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--r-lg)' }} />
              ) : (
                <div className="inner">
                  <span className="glyph">{sd.glyph}</span>
                  <span className="lbl">{sd.cat} · service hero · 16:9</span>
                </div>
              )}
            </Reveal>
          </Parallax>
        </div>
      </section>

      {/* What's included */}
      <section className="cs-section">
        <div className="wrap">
          <div className="cs-section-head">
            <div className="kicker"><span className="num">01</span>What's included</div>
            <div className="cs-section-body">
              <Reveal>
                <h2>The full <span className="it">scope.</span></h2>
                <p>Everything below is in the base engagement. No upcharges mid-project, no &ldquo;sorry, that\u2019s extra.&rdquo;</p>
              </Reveal>

              <div className="cs-approach">
                {sd.included.map((s, i) => (
                  <Reveal key={s.t} className="cs-approach-step" delay={i * 80}>
                    <div className="step-num">0{i + 1}</div>
                    <h4>{s.t}</h4>
                    <p>{s.d}</p>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Our approach */}
      <section className="cs-section">
        <div className="wrap">
          <div className="cs-section-head">
            <div className="kicker"><span className="num">02</span>Process</div>
            <div className="cs-section-body">
              <Reveal>
                <h2>How the <span className="it">work runs.</span></h2>
                <p>Same four-stage spine for every engagement. Predictable for you, lets us focus on the work, not the process.</p>
              </Reveal>

              <div className="cs-approach">
                {sd.approach.map((s, i) => (
                  <Reveal key={s.n} className="cs-approach-step" delay={i * 80}>
                    <div className="step-num">{s.n}</div>
                    <h4>{s.t}</h4>
                    <p>{s.d}</p>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tools / channels */}
      <section className="cs-section">
        <div className="wrap">
          <div className="cs-section-head">
            <div className="kicker"><span className="num">03</span>Stack</div>
            <div className="cs-section-body">
              <Reveal>
                <h2>Channels & <span className="it">tools.</span></h2>
                <p>The platforms and software we run this work in. We&rsquo;re not religious about any of it — we use what gets your team to the result fastest.</p>
              </Reveal>
              <Reveal delay={120} style={{ marginTop: 36 }}>
                <div className="budget-chips" style={{ gap: 10 }}>
                  {sd.tools.map(t => (
                    <span key={t} className="budget-chip" style={{ cursor: 'default' }}>{t}</span>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Related work */}
      {related.length > 0 && (
        <section className="cs-section">
          <div className="wrap">
            <div className="cs-section-head">
              <div className="kicker"><span className="num">04</span>Recent work</div>
              <div className="cs-section-body">
                <Reveal>
                  <h2>Where this <span className="it">shipped.</span></h2>
                  <p>A few projects where this service was the core of the engagement. Ask for the full deck on a first call.</p>
                </Reveal>
              </div>
            </div>
            <div className="work-grid" style={{ marginTop: 56 }}>
              {related.map((w, i) => (
                <Reveal key={w.slug} className="work-card" delay={(i % 2) * 100}
                        onClick={() => setRoute('case/' + w.slug)}
                        style={{ cursor: 'pointer' }}>
                  <Parallax speed={-0.05} as="div" style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden', aspectRatio: '4 / 3', background: 'var(--surface)', border: '1px solid var(--border)', marginBottom: 24, position: 'relative' }}>
                    {w.image ? (
                      <img src={w.image} alt={w.title} style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
                    ) : (
                      <div className="work-thumb-inner">
                        <span className="glyph">{w.glyph}</span>
                        <span className="placeholder-lbl">{w.cat} · case study</span>
                      </div>
                    )}
                  </Parallax>
                  <div className="work-meta">
                    <span>{w.cat}</span>
                    <span>{w.year}</span>
                  </div>
                  <h3>{w.title}</h3>
                  <p className="blurb">{w.deck.split('.')[0]}.</p>
                  <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>
                    Read case study <Arrow size={14} />
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* FAQ */}
      <section className="cs-section">
        <div className="wrap">
          <div className="faq-grid">
            <Reveal>
              <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 64px)', marginTop: 24, lineHeight: 1.05 }}>
                <TypeReveal>Things people <span className="it">ask</span><br />about this service.</TypeReveal>
              </h2>
              <p style={{ color: 'var(--muted)', marginTop: 24, fontSize: 15, lineHeight: 1.6, maxWidth: 360 }}>
                Don&rsquo;t see it answered here? Drop us a line — Satnam reads every enquiry.
              </p>
            </Reveal>
            <Reveal className="faq-list" delay={150}>
              {sd.faqs.map((f, i) => (
                <div key={i} className={"faq-item" + (openFaq === i ? " open" : "")}
                     onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <div className="faq-q">
                    <span>{f.q}</span>
                    <div className="faq-icon">
                      <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
                    </div>
                  </div>
                  <div className="faq-a">{f.a}</div>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </section>

      {/* Next service */}
      {next && (
        <section style={{ paddingBottom: 80 }}>
          <div className="wrap">
            <div className="cs-next">
              <div>
                <div className="label">Next service</div>
                <div className="cs-next-card" onClick={() => setRoute('service/' + next.slug)}>
                  <h3>{next.title.split('.')[0]}.</h3>
                  <div className="arr">{next.num} · View service <Arrow size={14} /></div>
                </div>
              </div>
              <div className="cs-next-card" onClick={() => setRoute('service/' + next.slug)}>
                <div className="cs-next-thumb">
                  <div className="inner">
                    <span className="glyph">{next.glyph}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      <CTA setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { ServiceDetailPage, SERVICE_DETAILS, SERVICE_ORDER });