/* global React */
// Services overview page + service detail page

function ServicesPage({ t, navigate, slug }) {
  if (slug) {
    const svc = t.services.items.find((s) => s.slug === slug);
    if (svc) return <ServiceDetail t={t} svc={svc} navigate={navigate} />;
  }
  return <ServicesOverviewPage t={t} navigate={navigate} />;
}

function ServicesOverviewPage({ t, navigate }) {
  return (
    <main className="page-enter">
      <section className="section" style={{ paddingTop: 180 }}>
        <div className="container">
          <div className="section-head">
            <div className="left">
              <div className="eyebrow">{t.services.eyebrow}</div>
              <h1 className="h-display" style={{ margin: '16px 0 0', fontSize: 'clamp(44px, 6vw, 88px)' }}>
                {t.services.title}
              </h1>
            </div>
            <p className="body-lg">{t.services.sub}</p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: '1px solid var(--line)' }}>
            {t.services.items.map((svc, i) => (
              <ServiceRow key={svc.slug} svc={svc} index={i} t={t}
                onClick={() => navigate('services', svc.slug)} />
            ))}
          </div>
        </div>
      </section>
      <FinalCTA t={t} navigate={navigate} />
    </main>
  );
}

function ServiceRow({ svc, index, t, onClick }) {
  const [hovered, setHovered] = useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 1fr 2fr 180px 60px',
        gap: 32,
        alignItems: 'center',
        padding: '32px 32px',
        borderBottom: index < 3 ? '1px solid var(--line)' : 'none',
        background: hovered ? 'var(--bg-1)' : 'transparent',
        transition: 'background var(--t-fast)',
        textAlign: 'left',
        width: '100%',
        cursor: 'pointer',
      }}>
      <span className="mono-sm" style={{ color: hovered ? 'var(--accent)' : 'var(--fg-3)' }}>{svc.code}</span>
      <span style={{
        fontFamily: 'var(--ff-display)',
        fontSize: 'clamp(24px, 2.4vw, 32px)',
        letterSpacing: '-0.02em',
        color: hovered ? 'var(--accent)' : 'var(--fg-0)',
        transition: 'color var(--t-fast)',
      }}>{svc.k}</span>
      <span style={{ color: 'var(--fg-1)', fontSize: 14, lineHeight: 1.55 }}>{svc.d}</span>
      <span className="mono-sm" style={{ color: 'var(--fg-3)' }}>{svc.tag}</span>
      <span style={{
        color: hovered ? 'var(--accent)' : 'var(--fg-3)',
        fontSize: 20,
        transform: hovered ? 'translateX(6px)' : 'none',
        transition: 'all var(--t-fast)',
        textAlign: 'right',
      }}>→</span>
    </button>
  );
}

function ServiceDetail({ svc, t, navigate }) {
  return (
    <main className="page-enter">
      <section className="section" style={{ paddingTop: 160, paddingBottom: 80 }}>
        <div className="container">
          <button onClick={() => navigate('services')}
            className="mono-sm"
            style={{ color: 'var(--fg-2)', marginBottom: 48, display: 'inline-flex', gap: 8 }}>
            {t.services.detailBack}
          </button>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start' }} className="detail-grid">
            <div>
              <div className="mono-sm" style={{ color: 'var(--accent)', marginBottom: 16 }}>{svc.code} · {svc.tag}</div>
              <h1 className="h-xl" style={{ margin: 0 }}>{svc.k}</h1>
            </div>
            <p className="body-lg" style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--fg-1)' }}>{svc.d}</p>
          </div>
        </div>
      </section>

      <section className="section" style={{ padding: '80px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="detail-grid-2">
            {/* Scopes */}
            <div className="corners" style={{
              border: '1px solid var(--line)',
              padding: 40,
              background: 'var(--bg-1)',
              position: 'relative',
            }}>
              <span className="tl"/><span className="br"/>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.services.detailScopes}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
                {svc.scopes.map((sc, i) => (
                  <li key={i} style={{
                    padding: '16px 0',
                    borderBottom: i < svc.scopes.length - 1 ? '1px solid var(--line-2)' : 'none',
                    display: 'flex', alignItems: 'center', gap: 16,
                  }}>
                    <span className="mono-sm" style={{ color: 'var(--fg-3)', minWidth: 28 }}>0{i + 1}</span>
                    <span style={{ fontSize: 16 }}>{sc}</span>
                    <span style={{ flex: 1 }}/>
                    <span style={{ color: 'var(--accent)', fontSize: 16 }}>+</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Outcomes */}
            <div style={{
              border: '1px solid var(--line)',
              padding: 40,
              background: 'var(--bg-0)',
            }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.services.detailOutcomes}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 20 }}>
                {svc.outcomes.map((o, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" style={{ flexShrink: 0, marginTop: 4 }}>
                      <rect x="0.5" y="0.5" width="15" height="15" stroke="var(--accent)" fill="none"/>
                      <path d="M4 8 L7 11 L12 5" stroke="var(--accent)" strokeWidth="1.5" fill="none"/>
                    </svg>
                    <span style={{ fontSize: 16, color: 'var(--fg-1)' }}>{o}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Process strip */}
      <section className="section" style={{ padding: '80px 0', background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 32 }}>{t.services.detailProcess}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 2 }} className="proc-grid">
            {t.home.methodSteps.map((step, i) => (
              <div key={i} style={{
                padding: '24px 20px',
                background: 'var(--bg-0)',
                display: 'flex', flexDirection: 'column', gap: 12,
                position: 'relative',
              }}>
                <div className="mono-sm" style={{ color: 'var(--accent)' }}>{step.n}</div>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 18, letterSpacing: '-0.01em' }}>{step.k}</div>
                <div className="mono-sm" style={{ color: 'var(--fg-3)' }}>{step.t}</div>
                {i < 4 && (
                  <div style={{
                    position: 'absolute', right: -12, top: '50%',
                    width: 10, height: 1, background: 'var(--line)',
                  }}/>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA t={t} navigate={navigate} />
    </main>
  );
}

Object.assign(window, { ServicesPage, ServicesOverviewPage, ServiceDetail });