// Services page
const { COLOR, Nav, PageHero, CTA, Footer, SectionHeader } = window;

const SERVICES = [
  { n: '01', t: 'ERP Consulting', d: 'Process discovery, gap analysis, and a phased implementation roadmap built around your actual operations.', deliverables: ['Process maps & SOPs', 'Module fitment matrix', 'Phased rollout plan', 'Cost & timeline estimate'] },
  { n: '02', t: 'ERPNext Implementation', d: 'End-to-end deployment: configuration, data migration, workflow automation, role-based access, reporting.', deliverables: ['Module configuration', 'Master & transactional data migration', 'Custom workflows', 'Role-based dashboards'] },
  { n: '03', t: 'Custom Frappe Development', d: 'DocTypes, custom apps, integrations with legacy systems, payment gateways, and third-party APIs.', deliverables: ['Custom DocTypes & apps', 'REST API integrations', 'Legacy system bridges', 'Payment gateway hooks'] },
  { n: '04', t: 'Training & Adoption', d: 'Hands-on training for power users and end-users, with role-specific documentation.', deliverables: ['Live training sessions', 'Role-based user manuals', 'Video walkthroughs', 'Train-the-trainer kits'] },
  { n: '05', t: 'ERP Audit & Recovery', d: 'Stuck implementation? We audit, stabilize, and rescue projects regardless of who started them.', deliverables: ['Health check report', 'Critical-fix sprint', 'Re-implementation plan', 'Knowledge transfer'] },
  { n: '06', t: 'Cloud, Hosting & AMC', d: 'Frappe Cloud, AWS, or on-premise hosting plus annual maintenance contracts.', deliverables: ['Managed hosting', 'Daily backups & DR', 'Version upgrade cycles', 'Priority support SLA'] },
];

function ServicesList() {
  return (
    <section style={{ background: COLOR.paper, padding: '80px 40px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gap: 1, background: COLOR.rule, border: `1px solid ${COLOR.rule}` }}>
          {SERVICES.map((s) => (
            <div key={s.n} style={{ background: COLOR.white, padding: '50px 40px', display: 'grid', gridTemplateColumns: '80px 1.4fr 1fr', gap: 40, alignItems: 'start' }}>
              <div style={{ fontFamily: 'Poppins, sans-serif', fontSize: 32, fontWeight: 700, color: COLOR.red, letterSpacing: '-0.02em' }}>{s.n}</div>
              <div>
                <h3 style={{ fontFamily: 'Poppins, sans-serif', fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', color: COLOR.ink, margin: '0 0 16px' }}>{s.t}</h3>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.55, color: COLOR.inkSoft, margin: 0, maxWidth: 540 }}>{s.d}</p>
              </div>
              <div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: COLOR.inkSoft, marginBottom: 14 }}>What you get</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
                  {s.deliverables.map(d => (
                    <li key={d} style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, color: COLOR.ink, display: 'flex', alignItems: 'center', gap: 12 }}>
                      <span style={{ width: 5, height: 5, borderRadius: 999, background: COLOR.red }} /> {d}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div style={{ background: COLOR.paper, minHeight: '100vh' }}>
      <Nav current="Services" />
      <PageHero eyebrow="Services" title="From advisory to AMC — six services, one specialist team." sub="Every engagement is scoped to a fixed deliverable list. You always know what you're getting and when." />
      <ServicesList />
      <CTA />
      <Footer />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);