const SERVICES = [
  { id: 'web', icon: 'browser', title: 'Website design', tag: 'Websites',
    desc: 'We build the site ourselves. No page builders, no templates, no "we\'ll add that in phase two".',
    tools: ['Figma','Next.js','Webflow'], kpi: 'from $1,490',
    pitch: 'A proper website, built properly. Not a template with your logo dropped in.',
    included: [
      'Custom design in Figma (2 rounds of revisions)',
      'Handwritten HTML/CSS or Webflow — whichever suits',
      'Up to 8 pages, mobile-first, Core Web Vitals tuned',
      'Basic SEO setup: schema, sitemaps, meta',
      'Contact forms, Google Maps, analytics',
      'We train you on editing it before we leave',
    ],
    timeline:'3–5 weeks, start to launch',
    whoFor:'Small businesses, trades, clinics, consultants — anyone whose current site is doing them dirty.',
    pricing:[
      ['One-pager','from $1,490'],
      ['Small business (5–8 pages)','$2,900–4,900'],
      ['E-commerce (Shopify)','$4,500+'],
    ],
    faq:[
      ['Who hosts it?','You do, in your own name — we set it up on Cloudflare or Vercel. No lock-in.'],
      ['Can I edit it myself?','Yes. We build so you can tweak copy and swap photos without us.'],
      ['What about ongoing?','Optional $89/mo care plan: backups, updates, small tweaks. Or just email us ad-hoc.'],
    ]
  },
  { id: 'seo', icon: 'search', title: 'SEO', tag: 'Search',
    desc: 'Fix the technical stuff, write the right pages, earn a few good links. No monthly PDFs nobody reads.',
    tools: ['Ahrefs','GSC'], kpi: 'from $690/mo',
    pitch:'Show up for the searches your customers actually type.',
    included:[
      'Technical audit + fixes (speed, schema, indexing)',
      'Keyword research specific to your area',
      'One properly-researched new page each month',
      'On-page optimisation across the whole site',
      'Google Business Profile work (if local)',
      'Monthly call — we explain what moved, not a 40-page report',
    ],
    timeline:'First wins: weeks 4–8. Real traffic growth: 3–6 months.',
    whoFor:'Local businesses, service providers, established sites that haven\'t been touched in years.',
    pricing:[
      ['Local (one city/suburb)','$690/mo'],
      ['Multi-location','$990/mo'],
      ['Content-heavy / blog-driven','$1,290/mo'],
    ],
    faq:[
      ['Lock-in?','No. Month to month. Though SEO needs at least 3 months to show anything.'],
      ['Will you guarantee rankings?','Nope. Anyone who does is lying to you.'],
      ['Do you do links?','Only ones we\'d earn the slow way — guest posts, PR, directories that matter.'],
    ]
  },
  { id: 'gads', icon: 'target', title: 'Google Ads', tag: 'Paid search',
    desc: 'Small budgets treated like they\'re ours. We\'ll tell you honestly if Google Ads is wrong for you.',
    tools: ['Google Ads','GA4'], kpi: 'from $490/mo',
    pitch:'Spend less, get more. Or don\'t spend at all — we\'ll tell you.',
    included:[
      'Account audit or setup from scratch',
      'Campaign structure, keyword lists, negatives',
      'Ad copy (we write it, you approve it)',
      'Landing page feedback (or we\'ll build one)',
      'Conversion tracking set up properly — GA4, call tracking',
      'Fortnightly check-ins, monthly summary that fits on one page',
    ],
    timeline:'Running in week 1. Optimised by month 2.',
    whoFor:'Businesses with something people actively search for: services, local trades, lead-gen, e-com.',
    pricing:[
      ['Up to $3k/mo spend','$490/mo mgmt'],
      ['$3k–10k/mo spend','$890/mo mgmt'],
      ['$10k+','custom, usually % of spend'],
    ],
    faq:[
      ['Who owns the account?','You do. We\'re just logged in.'],
      ['Minimum spend?','$500/mo ad budget for anything to work. Management fee is on top.'],
      ['What if Google Ads won\'t work for me?','We\'ll say so on the first call. You\'ll save yourself thousands.'],
    ]
  },
  { id: 'mads', icon: 'megaphone', title: 'Meta Ads', tag: 'Paid social',
    desc: 'Facebook and Instagram campaigns with creative we actually make — not just boost-the-post.',
    tools: ['Meta Ads Manager','Canva'], kpi: 'from $490/mo',
    pitch:'Ads on Facebook and Instagram that look like content, not ads.',
    included:[
      'Meta Business setup, pixel, conversions API',
      'Creative production: 4–8 ads per month (image/video)',
      'Audience research and testing',
      'Landing page or form strategy',
      'Weekly optimisation, monthly report',
      'Coordination with your organic social if we\'re doing both',
    ],
    timeline:'Live in 2 weeks. Learning phase: 3–4 weeks.',
    whoFor:'Retail, e-com, consumer brands, local services with visual before/after potential.',
    pricing:[
      ['Up to $2k/mo spend','$490/mo'],
      ['$2k–8k/mo spend','$890/mo'],
      ['Creative-heavy retainer','$1,290/mo'],
    ],
    faq:[
      ['Will you make the creative?','Yes. Image/video is included — we\'re not just button-pushers.'],
      ['iOS 14 / tracking?','We use conversions API and server-side properly. Not a scapegoat for bad ads.'],
      ['What if I don\'t have product photos?','We can brief a photographer, or shoot on phone — it works better than you\'d think.'],
    ]
  },
  { id: 'smm', icon: 'sparkles', title: 'Social media', tag: 'Organic social',
    desc: 'A sensible posting cadence and content that sounds like you, not LinkedIn.',
    tools: ['Later','Canva'], kpi: 'from $590/mo',
    pitch:'Show up on social without it feeling like a chore or sounding like a robot.',
    included:[
      '8–12 posts per month across 1–2 platforms',
      'Monthly content plan tied to what\'s happening in your business',
      'Captions, hashtags, basic design work',
      'Scheduling via Later',
      'Community management (replies to comments/DMs) — optional',
      'Quarterly review: what\'s working, what to stop',
    ],
    timeline:'First content live within 2 weeks.',
    whoFor:'Businesses that need to be present on social but don\'t want to hire a full-time coordinator.',
    pricing:[
      ['One platform, 8 posts/mo','$590/mo'],
      ['Two platforms, 12 posts/mo','$890/mo'],
      ['+ community management','+$290/mo'],
    ],
    faq:[
      ['Will it sound like me?','Yes — we interview you first and keep a voice guide. You approve everything before it goes.'],
      ['Video / reels?','We can do simple edits from your phone footage. Anything bigger, we\'ll bring in a collaborator.'],
      ['What about LinkedIn for B2B?','Yep — different tone, same process.'],
    ]
  },
  { id: 'it', icon: 'server', title: 'IT support', tag: 'Managed IT',
    desc: 'Emails breaking, laptop won\'t cooperate, printer again? We answer the phone.',
    tools: ['Microsoft 365','Google WS'], kpi: 'from $390/mo',
    pitch:'A real person who picks up when the Wi-Fi dies. Remote mostly, on-site if we\'re near.',
    included:[
      'Help desk: email, phone, screen share',
      'Microsoft 365 / Google Workspace admin',
      'Onboarding and offboarding staff properly',
      'Laptop/desktop setup and maintenance',
      'Backups, password manager, basic security',
      'On-site visits within inner-west Sydney (extra for further)',
    ],
    timeline:'Onboarding week 1. Business-as-usual by week 2.',
    whoFor:'Small offices (3–30 seats) that don\'t need a full-time IT person but keep losing hours to tech.',
    pricing:[
      ['Up to 10 seats','$390/mo'],
      ['11–25 seats','$790/mo'],
      ['25+','custom'],
    ],
    faq:[
      ['Are you certified?','Yes — Microsoft 365 partner, happy to share credentials.'],
      ['What\'s not included?','Hardware purchases (at cost), big projects (separate quote), office cabling (we\'ll recommend someone).'],
      ['Response time?','Within 2 business hours. Same day for anything blocking work.'],
    ]
  },
  { id: 'dev', icon: 'code', title: 'Software development', tag: 'Custom builds',
    desc: 'Small tools, integrations and internal apps. We push back on scope so the thing actually ships.',
    tools: ['TypeScript','Postgres','Vercel'], kpi: 'from $2,900',
    pitch:'A small, opinionated build team that ships. No agencies with 12 people on a Zoom call.',
    included:[
      'Discovery: what are we actually building, and why',
      'Design and prototyping in Figma',
      'Build in TypeScript, tested, documented',
      'Deployment, monitoring, basic analytics',
      'Source code in your GitHub — no ransom',
      'Two weeks of free follow-up after launch',
    ],
    timeline:'4–12 weeks depending on scope.',
    whoFor:'Internal tools, small SaaS, integrations between systems that don\'t talk.',
    pricing:[
      ['Small tool / integration','$2,900–6,000'],
      ['Internal dashboard','$6,000–15,000'],
      ['Small SaaS product','$15,000+'],
    ],
    faq:[
      ['Fixed price or hourly?','Fixed where we can, T&M for genuinely unknown work. Written clearly in the SOW.'],
      ['Who owns the code?','You do. Full stop.'],
      ['Do you maintain it?','Yes — $290/mo minor changes, or ad-hoc by hour.'],
    ]
  },
  { id: 'app', icon: 'device', title: 'Web apps', tag: 'Product',
    desc: 'Dashboards, portals, booking tools. Built properly — you can read the code and we\'ll leave notes.',
    tools: ['React','Supabase','Stripe'], kpi: 'from $3,900',
    pitch:'User-facing web products that you can grow into. Modest, maintainable.',
    included:[
      'Product strategy: MVP, what\'s V1.1',
      'Design system + UI in Figma',
      'React + Supabase build with auth, payments, roles',
      'Stripe, Mailgun, S3 — whatever it needs',
      'Deploy on Vercel with proper envs and CI',
      'Handover docs you can actually read',
    ],
    timeline:'6–14 weeks for a proper V1.',
    whoFor:'Founders validating an idea, teams building a customer portal, anything beyond "just a website".',
    pricing:[
      ['Booking / portal','$3,900–9,000'],
      ['Dashboard / admin','$7,000–18,000'],
      ['SaaS V1','$12,000+'],
    ],
    faq:[
      ['Do you take equity?','No — we\'re a small shop. Cash rates only.'],
      ['What stack?','React, Next.js, Supabase or Postgres, Stripe. Boring on purpose.'],
      ['Ongoing?','Most clients stay on a small retainer ($490–1,490/mo) for continuous work.'],
    ]
  },
  { id: 'ai', icon: 'zap', title: 'AI automation', tag: 'AI & ops',
    desc: 'Chatbots, content pipelines and small AI tools that quietly do the boring jobs. No hype.',
    tools: ['OpenAI','Claude','n8n'], kpi: 'from $1,490',
    pitch:'Practical AI. Boring wins, not \'transformational synergy\'.',
    included:[
      'Process audit — what\'s worth automating (honest answer: often not much)',
      'Custom GPT/Claude agents for internal use',
      'Chatbots on your website or in Slack',
      'Content pipelines: drafts → your edits → publish',
      'n8n workflows to glue systems together',
      'Training and docs so your team can actually use them',
    ],
    timeline:'2–6 weeks for most automations.',
    whoFor:'Teams doing the same thing over and over who want their hours back.',
    pricing:[
      ['Single automation','$1,490'],
      ['Workflow bundle (3–5)','$3,900'],
      ['Ongoing improvements','from $390/mo'],
    ],
    faq:[
      ['Will this replace my staff?','Usually no — it removes the bits they hate and frees them up.'],
      ['Data privacy?','We stick to enterprise tiers of OpenAI/Claude. Your data isn\'t training anything.'],
      ['What if it doesn\'t work?','We\'ll say so by week 2 and refund the balance. Happened twice so far.'],
    ]
  },
  { id: 'brand', icon: 'pen', title: 'Logo & branding', tag: 'Identity',
    desc: 'A logo, a colour palette, a couple of fonts and a one-page guide. That\'s usually all you need.',
    tools: ['Figma'], kpi: 'from $890',
    pitch:'A proper little brand kit. No 80-page brand book no one reads.',
    included:[
      'Discovery: what you do, who for, what feels like you',
      '3 logo directions, refined to one',
      'Colour palette (with accessible contrast checked)',
      'Font pairing, sizing and ratios',
      'One-page brand guide (usable on a phone)',
      'Assets in every format you\'ll need (SVG, PNG, PDF)',
    ],
    timeline:'2–3 weeks.',
    whoFor:'New businesses or rebrands where the current logo "was done on Fiverr in 2019".',
    pricing:[
      ['Logo-only','$890'],
      ['Logo + brand kit','$1,490'],
      ['Full identity + stationery','$2,490'],
    ],
    faq:[
      ['Will you do a full brand strategy?','No — we\'re design-led. We\'ll recommend a strategist if you need that depth.'],
      ['Source files?','Yes, editable Figma and Illustrator. Yours.'],
      ['Trademark check?','We\'ll do a basic search. For a proper check, we\'ll point you to a TM lawyer.'],
    ]
  },
  { id: 'copy', icon: 'spark', title: 'Copywriting', tag: 'Words',
    desc: 'Web copy and emails that sound like a person wrote them, because one did (with a little help).',
    tools: ['Google Docs'], kpi: 'from $490/mo',
    pitch:'Website copy and emails in plain English, actually written by a human.',
    included:[
      'Interview session to capture your actual voice',
      'Full site copy, rewritten (homepage → services → about)',
      'Email sequences: welcome, nurture, win-back',
      'Monthly newsletter or blog writing (optional)',
      'Light editing/proofing on anything you send us',
    ],
    timeline:'Site copy: 2–3 weeks. Ongoing: monthly.',
    whoFor:'Anyone whose site copy currently sounds like "we leverage our passionate solutions".',
    pricing:[
      ['Homepage rewrite','$490'],
      ['Full site rewrite','$1,490'],
      ['Ongoing (blog/email)','$490/mo'],
    ],
    faq:[
      ['Do you use AI?','As a sparring partner, never as the final writer. You\'ll tell the difference.'],
      ['SEO-aware?','Yes — Avani writes with keywords in mind but copy reads human first.'],
      ['Revisions?','Two rounds. Most clients use one.'],
    ]
  },
];

const ServiceCard = ({ svc, index, onOpen }) => {
  const [hover, setHover] = useState(false);
  return (
    <button
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        padding: 24,
        borderRadius: 18,
        background: hover
          ? 'linear-gradient(145deg, var(--accent-tint), var(--card-bg-2))'
          : 'var(--card-bg)',
        border: '1px solid ' + (hover ? 'var(--accent-tint-strong)' : 'var(--line)'),
        transition: 'all .4s cubic-bezier(.22,.61,.36,1)',
        transform: hover ? 'translateY(-4px)' : 'none',
        cursor: 'pointer',
        overflow: 'hidden',
        minHeight: 260,
        display: 'flex', flexDirection: 'column',
        color: 'var(--fg)', textAlign:'left',
      }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          display:'flex', alignItems:'center', justifyContent:'center',
          background: hover ? 'var(--accent)' : 'var(--chip-bg)',
          color: hover ? 'var(--bg)' : 'var(--fg)',
          border: '1px solid ' + (hover ? 'var(--accent)' : 'var(--line)'),
          transition: 'all .3s'
        }}>
          <Icon name={svc.icon} size={20} />
        </div>
        <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing:'.14em' }}>
          {String(index + 1).padStart(2, '0')} / 11
        </span>
      </div>
      <div style={{ marginTop: 'auto', paddingTop: 20 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing:'.16em', textTransform:'uppercase', marginBottom: 6 }}>
          {svc.tag}
        </div>
        <h3 className="h-md" style={{ marginBottom: 8 }}>{svc.title}</h3>
        <p style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.5, margin: 0 }}>{svc.desc}</p>
      </div>
      <div style={{
        marginTop: 16, paddingTop: 14,
        borderTop: '1px solid var(--line)',
        display:'flex', justifyContent:'space-between', alignItems:'center',
      }}>
        <span className="mono" style={{ fontSize: 11, color: hover ? 'var(--accent)' : 'var(--fg-2)', display:'inline-flex', alignItems:'center', gap: 4 }}>
          {hover ? <>Learn more <Icon name="arrow" size={11}/></> : svc.kpi}
        </span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{svc.kpi}</span>
      </div>
    </button>
  );
};

// Slide-out detail panel — all the good stuff lives here
const ServiceDetail = ({ svc, onClose }) => {
  useEffect(() => {
    if (!svc) return;
    const esc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', esc);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', esc); document.body.style.overflow = prev; };
  }, [svc, onClose]);

  if (!svc) return null;

  return (
    <div style={{
      position:'fixed', inset: 0, zIndex: 90,
      display:'flex', justifyContent:'flex-end',
      background:'oklch(0 0 0 / .55)', backdropFilter:'blur(4px)',
      animation:'fade .2s ease',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()}
        style={{
          width: 'min(640px, 100vw)', height: '100%', overflowY:'auto',
          background:'var(--bg)', borderLeft:'1px solid var(--line)',
          padding: 'clamp(24px, 4vw, 32px) clamp(20px, 4vw, 36px) 48px',
          animation:'slidein .32s cubic-bezier(.22,.61,.36,1)',
        }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:20 }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing:'.16em', textTransform:'uppercase' }}>
              {svc.tag}
            </div>
            <h3 className="h-xl" style={{ marginTop: 10, fontSize: 'clamp(32px, 4vw, 48px)' }}>{svc.title}</h3>
          </div>
          <button onClick={onClose} style={{
            width: 40, height: 40, borderRadius: '50%',
            background:'var(--card-bg-2)', border:'1px solid var(--line)',
            display:'flex', alignItems:'center', justifyContent:'center',
            color:'var(--fg)', cursor:'pointer', flexShrink: 0,
          }}>
            <Icon name="close" size={16} stroke={2}/>
          </button>
        </div>

        <p style={{ fontSize: 18, color:'var(--fg-2)', lineHeight: 1.45, marginTop: 18, fontFamily:'var(--serif)', fontStyle:'italic' }}>
          {svc.pitch}
        </p>

        <div className="grid-2" style={{ marginTop: 28, gap: 14 }}>
          <InfoTile label="Typical timeline" value={svc.timeline}/>
          <InfoTile label="Starts at" value={svc.kpi}/>
        </div>

        <Section title="Who it's for">
          <p style={{ fontSize: 14, color:'var(--fg-2)', lineHeight:1.6, margin:0 }}>{svc.whoFor}</p>
        </Section>

        <Section title="What's included">
          <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10 }}>
            {svc.included.map((i, k) => (
              <li key={k} style={{ display:'flex', gap: 10, fontSize: 14, color:'var(--fg-2)', lineHeight: 1.5 }}>
                <div style={{ flexShrink: 0, marginTop: 3, color:'var(--accent)' }}>
                  <Icon name="check" size={14} stroke={2.5}/>
                </div>
                {i}
              </li>
            ))}
          </ul>
        </Section>

        <Section title="Pricing">
          <div style={{ display:'flex', flexDirection:'column', gap: 0, border:'1px solid var(--line)', borderRadius: 12, overflow:'hidden' }}>
            {svc.pricing.map(([l, p], i) => (
              <div key={i} style={{
                display:'flex', justifyContent:'space-between', alignItems:'center',
                padding:'14px 18px',
                borderTop: i ? '1px solid var(--line)' : 'none',
                background: i % 2 ? 'var(--card-bg)' : 'transparent',
              }}>
                <span style={{ fontSize: 14 }}>{l}</span>
                <span className="mono" style={{ fontSize: 13, color:'var(--accent)', fontWeight: 500 }}>{p}</span>
              </div>
            ))}
          </div>
          <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', marginTop: 10 }}>
            Indicative only — real quote after a 20-minute chat.
          </div>
        </Section>

        <Section title="Common questions">
          <div style={{ display:'flex', flexDirection:'column', gap: 4 }}>
            {svc.faq.map(([q, a], i) => <FAQItem key={i} q={q} a={a}/>)}
          </div>
        </Section>

        <div style={{
          marginTop: 36, padding: '20px 22px',
          background:'var(--accent-tint)', border:'1px solid var(--accent-tint-strong)',
          borderRadius: 14,
          display:'flex', justifyContent:'space-between', alignItems:'center', gap: 16, flexWrap:'wrap',
        }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 500 }}>Want to talk about {svc.title.toLowerCase()}?</div>
            <div style={{ fontSize: 13, color:'var(--fg-2)', marginTop: 2 }}>Sam usually replies the same day.</div>
          </div>
          <a href="#contact" onClick={onClose} className="btn btn-accent">
            Say hello <Icon name="arrow" size={14}/>
          </a>
        </div>

        <style>{`
          @keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
          @keyframes fade { from { opacity: 0; } }
        `}</style>
      </div>
    </div>
  );
};

const InfoTile = ({ label, value }) => (
  <div style={{ padding: '14px 16px', borderRadius: 12, background:'var(--card-bg)', border:'1px solid var(--line)' }}>
    <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', textTransform:'uppercase' }}>{label}</div>
    <div style={{ fontSize: 14, marginTop: 4, lineHeight: 1.35 }}>{value}</div>
  </div>
);

const Section = ({ title, children }) => (
  <div style={{ marginTop: 32 }}>
    <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.16em', textTransform:'uppercase', marginBottom: 14 }}>
      {title}
    </div>
    {children}
  </div>
);

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = useState(false);
  return (
    <button onClick={() => setOpen(o => !o)} style={{
      padding:'14px 0', borderBottom:'1px solid var(--line)',
      background:'none', border:'none', borderBottomStyle:'solid',
      textAlign:'left', cursor:'pointer', color:'var(--fg)',
      display:'flex', flexDirection:'column', gap: open ? 8 : 0,
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap: 12 }}>
        <span style={{ fontSize: 14, fontWeight: 500 }}>{q}</span>
        <span style={{ transform: open ? 'rotate(45deg)' : 'none', transition:'transform .2s', color:'var(--fg-3)', flexShrink: 0 }}>
          <Icon name="plus" size={14} stroke={2}/>
        </span>
      </div>
      {open && <div style={{ fontSize: 13.5, color:'var(--fg-2)', lineHeight: 1.55, paddingRight: 24 }}>{a}</div>}
    </button>
  );
};

const Services = () => {
  const ref = useReveal();
  const [openId, setOpenId] = useState(null);
  const active = SERVICES.find(s => s.id === openId);

  return (
    <section id="services" className="section">
      <div className="container">
        <div ref={ref} className="reveal" style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 'clamp(36px, 5vw, 56px)', gap: 40, flexWrap:'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow">What we do · click any service for details</span>
            <h2 className="h-xl" style={{ marginTop: 20 }}>
              Eleven things, done by two of us.
            </h2>
          </div>
          <p style={{ fontSize: 16, color:'var(--fg-2)', maxWidth: 400, lineHeight: 1.55 }}>
            Some weeks it's building a website, some weeks it's unblocking someone's Microsoft account. We don't mind the variety — it's why small businesses keep coming back.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 14
        }}>
          {SERVICES.map((s, i) => <ServiceCard key={s.id} svc={s} index={i} onOpen={() => setOpenId(s.id)} />)}
        </div>
      </div>

      <ServiceDetail svc={active} onClose={() => setOpenId(null)}/>
    </section>
  );
};

window.Services = Services;