/* global React, Eyebrow, IconBadge, Badge, Button, Icon */

function Services() {
  const M = { col: '#FF1893', tint: 'rgba(255,24,147,.12)' };
  const V = { col: '#9C64FF', tint: 'rgba(156,100,255,.14)' };
  const C = { col: '#0B8E97', tint: 'rgba(73,238,244,.16)' };
  const items = [
    { ic: 'compass', ...M, eb: 'Leadership', h: 'Fractional CTO', tag: 'Senior leadership, without the overhead.', p: 'Executive-level technology leadership — part-time, interim, or project-based. Architecture decisions, team mentoring, and roadmap planning aligned to your commercial goals.' },
    { ic: 'server', ...V, eb: 'Managed IT', h: 'Managed IT Services', tag: 'Your infrastructure, fully managed — zero downtime.', p: 'Proactive monitoring, rapid-response helpdesk, cyber security, and cloud management under one predictable monthly contract. Your team stays on the business, not the tech.' },
    { ic: 'grid', ...C, eb: 'Microsoft 365', h: 'Microsoft 365 Services', tag: 'Deployed, managed, and continuously optimised.', p: 'Full tenant setup, domain management, email migration, SharePoint architecture, Teams governance, and Copilot AI deployment — aligned to the latest Microsoft roadmap.' },
    { ic: 'spark', ...M, eb: 'AI / ML', h: 'AI & Automation', tag: 'Models in production.', p: 'From prototype to monitored inference at scale, with evaluation and guardrails built in — so the intelligence you ship stays accurate and accountable.' },
    { ic: 'megaphone', ...V, eb: 'Growth', h: 'Marketing & Social Media', tag: 'Build your brand. Fill your pipeline.', p: 'Full-service marketing and social for B2B technology companies — strategy, content, community, paid media, and AI-powered analytics, run by senior practitioners who know your sector.' },
    { ic: 'shield', ...C, eb: 'Security', h: 'Cyber Security', tag: 'Real protection. Not compliance theatre.', p: 'Full-spectrum security — penetration testing and threat intelligence through to SOC monitoring, incident response, and board-level governance. Depth that finds real vulnerabilities before attackers do.' },
  ];
  return (
    <section id="services" className="sec-pad sec-light">
      <div className="wrap">
        <div className="sec-head reveal" data-reveal>
          <Eyebrow color="#D1006B">What we do</Eyebrow>
          <h2 className="h2" style={{ marginTop: 14 }}>Six practice areas. One integrated technology partner.</h2>
        </div>
        <div className="grid g-3" style={{ marginTop: 44 }}>
          {items.map((it, i) => (
            <div className="feature reveal" data-reveal style={{ animationDelay: `${i * 60}ms` }} key={it.h}>
              <IconBadge name={it.ic} color={it.col} tint={it.tint} />
              <Eyebrow color="var(--slate-400)" style={{ fontSize: 11, display: 'block', marginTop: 18 }}>{it.eb}</Eyebrow>
              <h4>{it.h}</h4>
              <div className="feat-tag">{it.tag}</div>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyUs() {
  const C = { col: '#49EEF4', tint: 'rgba(73,238,244,.14)' };
  const V = { col: '#B98DFF', tint: 'rgba(156,100,255,.16)' };
  const M = { col: '#FF5CB0', tint: 'rgba(255,24,147,.16)' };
  const items = [
    { ic: 'user', ...C, h: 'Senior-only delivery', p: 'Every engagement is led and delivered by senior practitioners. We do not use account managers, offshore juniors, or staffing models that dilute quality to expand margins.' },
    { ic: 'chart', ...V, h: 'Outcome-oriented, not time-oriented', p: 'We define success in measurable business terms at the start of every engagement and track against those metrics throughout. Accountability, not status reports.' },
    { ic: 'lock', ...M, h: 'NDA as standard', p: 'We sign an NDA before any briefing, data room access, or discovery conversation. Confidentiality is not a courtesy we extend — it is a contract we honour.' },
    { ic: 'network', ...C, h: 'Integrated across service lines', p: 'Our six practice areas are staffed by a single team. A Fractional CTO engagement can pull in M365 expertise or managed IT capability without introducing new account relationships or handoffs.' },
    { ic: 'scale', ...V, h: 'Honest about fit', p: "We tell you when a fractional model is the wrong answer, when managed IT is not cost-effective for your size, or when a deal's technology risk exceeds what a TDD can adequately address. Referrals where appropriate." },
    { ic: 'calendar', ...M, h: 'Flexible commercial models', p: 'Fixed-scope projects, monthly retainers, pay-from-savings structures, and day-rate advisory — we match the commercial model to the engagement type, not the other way around.' },
  ];
  return (
    <section id="why" className="sec-pad sec-deep">
      <div className="wrap why-layout">
        <div className="why-intro reveal" data-reveal>
          <Eyebrow color="#49EEF4">● Why Fracto Services</Eyebrow>
          <h2 className="h2" style={{ marginTop: 14 }}>What makes us different</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            There is no shortage of technology consultancies. What is rare is one that operates at
            senior level, delivers measurable outcomes, and tells you honestly when something is
            outside its expertise.
          </p>
        </div>
        <div className="why-list">
          {items.map((it, i) => (
            <div className="why-row reveal" data-reveal style={{ animationDelay: `${i * 60}ms` }} key={it.h}>
              <span className="why-num" style={{ color: it.col }}>{String(i + 1).padStart(2, '0')}</span>
              <div className="why-rowbody">
                <h4><Icon name={it.ic} size={17} color={it.col} style={{ marginRight: 9, verticalAlign: '-3px' }} />{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Work() {
  const cases = [
    { tag: 'Construction', tone: 'magenta', h: 'Quote-to-cash process', p: 'Connected estimating, project delivery, and invoicing into one flow — quotes convert to cash without re-keying.', m: 'One connected flow' },
    { tag: 'Logistics', tone: 'violet', h: 'Forecasting at the edge', p: 'Unified 14 warehouse feeds into one demand model.', m: '+18% accuracy' },
    { tag: 'Banking', tone: 'cyan', h: 'CMDB implementation', p: 'Discovered and mapped the full estate into a single configuration management database with live dependency lineage.', m: '200K assets' },
  ];
  return (
    <section id="work" className="sec-pad sec-paper">
      <div className="wrap">
        <div className="sec-head reveal" data-reveal>
          <Eyebrow color="#7B3FE4">Selected work</Eyebrow>
          <h2 className="h2" style={{ marginTop: 14 }}>Outcomes, not slideware.</h2>
        </div>
        <div className="grid g-3" style={{ marginTop: 44 }}>
          {cases.map((c, i) => (
            <a href="#work" className="work-card reveal" data-reveal style={{ animationDelay: `${i * 90}ms` }} key={c.h}>
              <div className="work-top">
                <Badge tone={c.tone}>{c.tag}</Badge>
                <span className="work-metric">{c.m}</span>
              </div>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Approach() {
  const phases = [
    { n: '01', col: '#9C64FF', glow: 'rgba(156,100,255,.55)', h: 'Diagnose', p: 'We assess the current state, identify risks and opportunities, and understand your commercial context and constraints. No assumptions — every finding is evidenced.' },
    { n: '02', col: '#C13FB0', glow: 'rgba(255,24,147,.5)', h: 'Plan', p: 'We design a pragmatic plan with clear milestones, defined deliverables, and measurable success criteria. You approve the plan before any work begins.' },
    { n: '03', col: '#FF3B97', glow: 'rgba(255,24,147,.55)', h: 'Deliver', p: 'Senior practitioners execute — not account managers delegating to juniors. Progress is tracked against the plan and reported transparently throughout.' },
    { n: '04', col: '#49EEF4', glow: 'rgba(73,238,244,.55)', h: 'Operationalise', p: 'We transfer knowledge, document everything, and ensure your team can maintain and build on the outcome independently. A handover, not a dependency.' },
  ];
  return (
    <section id="approach" className="sec-pad sec-deep approach">
      <div className="approach-grid-bg" aria-hidden="true" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="approach-head">
          <div className="reveal" data-reveal>
            <Eyebrow color="#49EEF4">● How we work</Eyebrow>
            <h2 className="h2" style={{ marginTop: 16 }}>A consistent approach<br />across every engagement</h2>
          </div>
          <p className="lead reveal" data-reveal style={{ maxWidth: 440 }}>
            Regardless of service line, every Fracto engagement follows the same four-phase
            model — built for fast time-to-value and measurable outcomes from the first week.
          </p>
        </div>

        <div className="timeline">
          <div className="timeline-rail" aria-hidden="true">
            <span className="timeline-line" />
            <span className="timeline-progress" />
          </div>
          {phases.map((ph, i) => (
            <div className="phase reveal" data-reveal style={{ animationDelay: `${i * 110}ms` }} key={ph.n}>
              <div className="phase-node" style={{ '--node': ph.col, '--glow': ph.glow }}>
                <span className="phase-node-num">{ph.n}</span>
                <span className="phase-node-ring" />
              </div>
              <div className="phase-body">
                <span className="phase-step mono" style={{ color: ph.col }}>Phase {ph.n}</span>
                <h4>{ph.h}</h4>
                <p>{ph.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="sec-pad sec-dark quote-sec">
      <div className="wrap center">
        <Icon name="quote" size={40} color="#49EEF4" style={{ opacity: .8 }} />
        <p className="quote-text reveal" data-reveal>
          “Fracto didn't hand us a deck — they handed us a <span className="aura-text">platform</span>.
          Six weeks in, our analysts were shipping models without filing a single ticket.”
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Services, WhyUs, Work, Approach, Quote });