// services.jsx — services index + per-service detail pages

function ServicesIndexPage({ onContactClick }) {
  useSEO('IT Services', 'Strategy, infrastructure, security, support — the full IT lifecycle for Gibraltar businesses.');
  const ref = useReveal();
  return (
    <div className="page-enter">
      <section className="bc-hero">
        <div className="container">
          <div className="crumb"><Link to="/">Home</Link> &nbsp;/&nbsp; Services</div>
          <h1 style={{ maxWidth: 760, marginBottom: 20 }}>The full IT lifecycle, under one roof.</h1>
          <p style={{ color: 'var(--cw-navy-100)', fontSize: 19, lineHeight: 1.55, maxWidth: 660 }}>
            Strategy, infrastructure, security, support &mdash; pick what you need or let us handle it all. Every service designed for the realities of running a Gibraltar business.
          </p>
        </div>
      </section>
      <section ref={ref} className="reveal section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="svc-idx">
            {SERVICES.map((svc, i) => (
              <Link key={svc.slug} to={'/services/' + svc.slug} className="card" style={{ display: 'flex', gap: 24, alignItems: 'flex-start', textDecoration: 'none' }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 16, flexShrink: 0,
                  background: 'var(--cw-sky-50)', display: 'grid', placeItems: 'center',
                }}>
                  <img src={svc.icon} alt="" style={{ width: 40, height: 40, objectFit: 'contain' }} />
                </div>
                <div>
                  <h3 style={{ marginBottom: 8 }}>{svc.title}</h3>
                  <p style={{ color: 'var(--fg-3)', marginBottom: 14, fontSize: 15 }}>{svc.blurb}</p>
                  <span style={{ color: 'var(--cw-sky-600)', fontWeight: 600, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    Explore <Icon.arrow />
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 820px) { .svc-idx { grid-template-columns: 1fr !important; } }
          @media (max-width: 820px) { .svc-hero { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
      <HomeCTA onContactClick={onContactClick} />
    </div>
  );
}

function ServiceDetailPage({ slug, onContactClick }) {
  const svc = SERVICES.find(s => s.slug === slug);
  if (!svc) {
    return (
      <div className="page-enter section">
        <div className="container">
          <h2>Service not found.</h2>
          <Link to="/services" className="btn btn-outline" style={{ marginTop: 20 }}>Back to services</Link>
        </div>
      </div>
    );
  }
  useSEO(svc.title, svc.long);
  const idx = SERVICES.findIndex(s => s.slug === slug);
  const next = SERVICES[(idx + 1) % SERVICES.length];

  return (
    <div className="page-enter">
      <section className="bc-hero">
        <div className="container">
          <div className="crumb"><Link to="/">Home</Link> &nbsp;/&nbsp; <Link to="/services">Services</Link> &nbsp;/&nbsp; {svc.title}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }} className="svc-hero">
            <div>
              <h1 style={{ marginBottom: 22, maxWidth: 640 }}>{svc.title}</h1>
              <p style={{ color: 'var(--cw-navy-100)', fontSize: 19, lineHeight: 1.55, maxWidth: 580, marginBottom: 28 }}>{svc.long}</p>
              <button className="btn btn-primary lg" onClick={onContactClick}>Talk to an expert <Icon.arrow /></button>
            </div>
            <div style={{
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 'var(--radius-2xl)', padding: 32, backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                width: 80, height: 80, borderRadius: 18,
                background: 'rgba(31,182,255,0.18)', display: 'grid', placeItems: 'center', marginBottom: 20,
              }}>
                <img src={svc.icon} alt="" style={{ width: 50, height: 50, objectFit: 'contain' }} />
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--cw-sky-300)', marginBottom: 12 }}>What's included</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {svc.bullets.map(b => (
                  <li key={b[0]} style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#fff', fontSize: 14 }}>
                    <Icon.check style={{ color: 'var(--cw-sky-400)', flexShrink: 0 }} /> {b[0]}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>How we deliver</div>
          <h2 style={{ marginBottom: 48, maxWidth: 680 }}>What working with us on {svc.title.toLowerCase()} actually looks like.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="grid-2">
            {svc.bullets.map((b, i) => (
              <div key={b[0]} style={{
                background: '#fff', border: '1px solid var(--border-subtle)',
                borderRadius: 'var(--radius-xl)', padding: 28,
                display: 'flex', gap: 20, alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 12, flexShrink: 0,
                  background: 'var(--cw-sky-50)', color: 'var(--cw-sky-600)',
                  display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 15,
                }}>0{i + 1}</div>
                <div>
                  <h4 style={{ marginBottom: 6 }}>{b[0]}</h4>
                  <p style={{ color: 'var(--fg-3)', fontSize: 15, margin: 0 }}>{b[1]}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--cw-paper)' }}>
        <div className="container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center',
          }} className="next-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Up next</div>
              <h2 style={{ marginBottom: 16 }}>{next.title}</h2>
              <p style={{ color: 'var(--fg-3)', fontSize: 17, marginBottom: 24, maxWidth: 460 }}>{next.blurb}</p>
              <Link to={'/services/' + next.slug} className="btn btn-outline">Continue tour <Icon.arrow /></Link>
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{
                background: '#fff', borderRadius: 'var(--radius-2xl)', padding: 32,
                boxShadow: 'var(--shadow-md)', border: '1px solid var(--border-subtle)',
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 16,
                  background: 'var(--cw-sky-50)', display: 'grid', placeItems: 'center', marginBottom: 18,
                }}>
                  <img src={next.icon} alt="" style={{ width: 40, height: 40 }} />
                </div>
                <h4 style={{ marginBottom: 10 }}>{next.title}</h4>
                <p style={{ color: 'var(--fg-3)', fontSize: 14, margin: 0 }}>{next.blurb}</p>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 820px) { .next-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <HomeCTA onContactClick={onContactClick} />
    </div>
  );
}

window.ServicesIndexPage = ServicesIndexPage;
window.ServiceDetailPage = ServiceDetailPage;