// ===== Services page — Plasma v3 =====

const SERVICES = [
  {
    icon: <Icon.Code />,
    title: 'Web Applications',
    sub: "This is the heart of what we do. If a task in your business eats hours it shouldn't — sorting files, chasing leads, juggling job tickets, planning your day — we build a custom app that turns it into a quick, simple flow. It started as a personal mission: jobs that should take five minutes were taking an hour, and the tools to fix them either didn't exist or weren't quite right. So we built our own. Now we build them for clients too.",
    deliverables: ['Internal dashboards and admin tools', 'Lead pipelines and client portals', 'Booking, job-ticket and intake systems', 'File automation and data tools', 'Workflow automation that saves real hours'],
    notes: ["Because every web app is different, we don't list a fixed price. Tell us about the hour-long job, and we'll send back a quote with scope and timeline."],
    starts: 'Custom',
    timeline: 'Scoped per project',
    cta: 'Request a custom quote',
    ctaTo: '/contact',
  },
  {
    icon: <Icon.Globe />,
    title: 'Websites',
    sub: 'A web app and a website are cut from the same cloth, so we build those too. Custom sites for small businesses, founders, freelancers, and anyone who needs a serious online presence — built from scratch around your brand. No recycled templates, no compromises.',
    deliverables: ['Custom design', 'Mobile-responsive layout', 'Fast load times', 'Easy-to-edit structure', 'Contact forms and basic integrations'],
    notes: ["We don't do payment integration yet — if you need an online store with checkout, we'll be upfront about that."],
    starts: 'R14,500',
    timeline: '1–3 weeks',
    cta: 'See website packages',
    ctaTo: '/pricing',
  },
];

const ADDONS = [
  { icon: <Icon.Server />, title: 'Hosting', d: 'We can host your site and keep the lights on.' },
  { icon: <Icon.Wand />, title: 'Maintenance', d: 'Monthly upkeep, updates, and small tweaks.' },
  { icon: <Icon.Pulse />, title: 'Copywriting', d: "If you don't want to write your own content, we'll do it." },
  { icon: <Icon.Spark />, title: 'Logo & Branding', d: 'Need a logo or a full brand identity? We can sort that.' },
  { icon: <Icon.Layers />, title: 'Content Uploads', d: "Send us your text, photos, and files — we'll get them on the site." },
  { icon: <Icon.Mail />, title: 'Email Setup', d: 'Professional email on your domain (you@yourbusiness.com).' },
];

function ServiceCard({ s, index }) {
  return (
    <div className="card" style={{ padding: 36, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48 }}>
      <div className="col" style={{ gap: 18 }}>
        <div className="row" style={{ gap: 12 }}>
          <div className="tile-icon" style={{ width: 44, height: 44, borderRadius: 12 }}>{s.icon}</div>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.14em' }}>0{index + 1}</span>
        </div>
        <h3>{s.title}</h3>
        <p style={{ fontSize: 14.5 }}>{s.sub}</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 14, paddingTop: 22, borderTop: '1px solid var(--line)' }}>
          <div>
            <div className="label" style={{ marginBottom: 6 }}>Starts at</div>
            <div className="grad-text" style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.025em' }}>{s.starts}</div>
          </div>
          <div>
            <div className="label" style={{ marginBottom: 6 }}>Timeline</div>
            <div style={{ fontSize: 16, fontWeight: 500 }}>{s.timeline}</div>
          </div>
        </div>
      </div>
      <div className="col" style={{ gap: 22 }}>
        <div>
          <div className="label">What you get</div>
          <ul style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {s.deliverables.map(d => (
              <li key={d} className="row" style={{ gap: 8, fontSize: 14, color: 'var(--text-dim)', alignItems: 'flex-start' }}>
                <Icon.Check style={{ color: 'var(--cyan)', marginTop: 4, flexShrink: 0 }} /> <span>{d}</span>
              </li>
            ))}
          </ul>
        </div>
        {s.notes && s.notes.map(n => (
          <div key={n} className="tile" style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{n}</div>
        ))}
        <Link to={s.ctaTo} className="btn btn-ghost" style={{ width: 'fit-content' }}>{s.cta} <Icon.Arr /></Link>
      </div>
    </div>
  );
}

function ServicesPage() {
  return (
    <Page>
      <PageIntro
        eyebrow="Services"
        title={<>Web apps first. <span className="grad-text">Websites right alongside.</span></>}
        sub="We focus on two things: building web apps that hand you back the hours your busywork steals, and building websites that actually reflect your business. Here's everything we offer."
      />
      <section className="section-sm">
        <div className="wrap">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {SERVICES.map((s, i) => <ServiceCard key={s.title} s={s} index={i} />)}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <SectionHead
            eyebrow="Add-ons"
            title="The little things, sorted."
            sub="All add-ons are quoted separately. See the pricing page for indicative starting prices."
          />
          <div className="grid grid-3">
            {ADDONS.map(a => (
              <div key={a.title} className="card" style={{ padding: 28 }}>
                <div className="tile-icon">{a.icon}</div>
                <h4 style={{ fontSize: 18, marginTop: 16 }}>{a.title}</h4>
                <p style={{ fontSize: 14, marginTop: 10 }}>{a.d}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 32 }}>
            <Link to="/pricing" className="btn btn-ghost">See add-on pricing <Icon.Arr /></Link>
          </div>
        </div>
      </section>

      <CtaTail />
    </Page>
  );
}

Object.assign(window, { ServicesPage });