// Services section — 2 variants

function Services({ lang, variant }) {
  const L = LANG_COPY[lang];
  if (variant === 'list') return <ServicesList L={L} />;
  return <ServicesCards L={L} />;
}

function ServicesCards({ L }) {
  const [hoverIdx, setHoverIdx] = React.useState(null);
  return (
    <section id="services" className="section">
      <div className="container">
        <SectionHeader eyebrow={L.services.eyebrow} title={L.services.title} />
        <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 24 }}>
          {L.services.items.map((s, i) => (
            <article key={i} className="svc-card reveal"
              onMouseEnter={() => setHoverIdx(i)}
              onMouseLeave={() => setHoverIdx(null)}
              style={{
                position: 'relative', padding: 32, minHeight: 340,
                border: '1px solid rgba(255,255,255,0.08)',
                background: hoverIdx === i ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.015)',
                transition: 'all 0.35s cubic-bezier(.2,.7,.3,1)',
                transform: hoverIdx === i ? 'translateY(-4px)' : 'translateY(0)',
                overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 1,
                background: `linear-gradient(90deg, transparent, var(--accent), transparent)`,
                opacity: hoverIdx === i ? 1 : 0, transition: 'opacity 0.35s',
              }} />
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 1, color: 'var(--accent)' }}>0{i + 1} / 0{L.services.items.length}</span>
                  <ServiceIcon kind={s.icon} />
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, letterSpacing: -0.5, margin: 0, lineHeight: 1.15 }}>{s.title}</h3>
                <p style={{ fontSize: 15, color: 'var(--muted)', marginTop: 14, lineHeight: 1.55, textWrap: 'pretty' }}>{s.desc}</p>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', fontSize: 13, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
                {s.tags.map((t, j) => (
                  <li key={j} style={{ padding: '6px 0', borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between' }}>
                    <span>{t}</span>
                    <span style={{ color: 'var(--accent)', opacity: hoverIdx === i ? 1 : 0.3, transition: 'opacity 0.3s' }}>→</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesList({ L }) {
  const [active, setActive] = React.useState(0);
  return (
    <section id="services" className="section">
      <div className="container">
        <SectionHeader eyebrow={L.services.eyebrow} title={L.services.title} />
        <div style={{ marginTop: 72, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          {L.services.items.map((s, i) => (
            <div key={i} className="svc-row reveal"
              onMouseEnter={() => setActive(i)}
              style={{
                display: 'grid', gridTemplateColumns: '60px 1fr 1fr 60px',
                gap: 32, alignItems: 'center',
                padding: '36px 0', borderBottom: '1px solid rgba(255,255,255,0.08)',
                cursor: 'pointer', transition: 'all 0.3s',
                opacity: active === i ? 1 : 0.55,
              }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: 1 }}>0{i + 1}</span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.5vw, 48px)', fontWeight: 500, letterSpacing: -0.8, margin: 0, lineHeight: 1 }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: 'var(--muted)', margin: 0, lineHeight: 1.5, maxWidth: 440 }}>{s.desc}</p>
              <span style={{ fontSize: 20, color: 'var(--accent)', transform: active === i ? 'translateX(0)' : 'translateX(-8px)', transition: 'transform 0.3s' }}>→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceIcon({ kind }) {
  const common = { width: 32, height: 32, stroke: 'var(--accent)', strokeWidth: 1.4, fill: 'none' };
  switch (kind) {
    case 'web':
      return (<svg {...common} viewBox="0 0 32 32">
        <rect x="4" y="6" width="24" height="18" rx="1.5" />
        <path d="M4 11h24" /><circle cx="7" cy="8.5" r="0.5" fill="currentColor" />
        <circle cx="9.5" cy="8.5" r="0.5" fill="currentColor" /><circle cx="12" cy="8.5" r="0.5" fill="currentColor" />
      </svg>);
    case 'app':
      return (<svg {...common} viewBox="0 0 32 32">
        <rect x="9" y="4" width="14" height="24" rx="2" />
        <path d="M13 7h6M14 25h4" />
      </svg>);
    case 'saas':
      return (<svg {...common} viewBox="0 0 32 32">
        <path d="M16 4l10 6v12l-10 6-10-6V10z" />
        <path d="M16 10l6 3.5v7l-6 3.5-6-3.5v-7z" opacity="0.5" />
        <circle cx="16" cy="17" r="1.5" />
      </svg>);
    case 'cloud':
      return (<svg {...common} viewBox="0 0 32 32">
        <path d="M22 22h-12a5 5 0 0 1-.5-9.95A7 7 0 0 1 22.94 14 4.5 4.5 0 0 1 22 22z" />
        <path d="M12 16l3 3 5-5" />
      </svg>);
    case 'design':
      return (<svg {...common} viewBox="0 0 32 32">
        <circle cx="16" cy="16" r="12" />
        <circle cx="12" cy="12" r="1.5" fill="currentColor" />
        <circle cx="20" cy="12" r="1.5" fill="currentColor" />
        <circle cx="20" cy="20" r="1.5" fill="currentColor" />
        <path d="M12 20c2 2 6 2 8 0" />
      </svg>);
    case 'data':
      return (<svg {...common} viewBox="0 0 32 32">
        <path d="M5 26V14M12 26V8M19 26v-16M26 26V4" strokeLinecap="round" />
      </svg>);
    default:
      return null;
  }
}

function SectionHeader({ eyebrow, title, center }) {
  return (
    <div className="reveal" style={{ textAlign: center ? 'center' : 'left' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted)', justifyContent: center ? 'center' : 'flex-start' }}>
        <span style={{ width: 24, height: 1, background: 'var(--accent)' }} />
        <span>{eyebrow}</span>
      </div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 6vw, 80px)', lineHeight: 0.95, letterSpacing: -0.03, fontWeight: 600, margin: 0, maxWidth: 1000 }}>
        {title}
      </h2>
    </div>
  );
}

Object.assign(window, { Services, ServicesCards, ServicesList, ServiceIcon, SectionHeader });