// services.jsx — Services section (cards 2x2 with shared FDE bar)

function ServicesSection({ accent, secondary, fontMode }) {
  const sec = secondary || '#2D5BFF';
  const ink = accent || '#0A1F44';
  const [open, setOpen] = React.useState(null);
  const items = VL_COPY.services.items;

  return (
    <section data-section="services" style={{ padding: '140px 48px 120px', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ marginBottom: 64, display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'flex-end' }}>
          <div>
            <Reveal><EnKicker color={sec}>{VL_COPY.services.eyebrow}</EnKicker></Reveal>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'var(--jp)', fontWeight: 500, fontSize: 40, lineHeight: 1.45,
                letterSpacing: '0.005em', color: ink, margin: '20px 0 0', maxWidth: 760, whiteSpace: 'pre-line',
              }}>{VL_COPY.services.title}</h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '6px 14px 6px 6px', border: `0.5px solid ${sec}`, color: sec,
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em',
            }}>
              <span style={{
                width: 22, height: 22, background: sec, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, fontWeight: 600,
              }}>FDE</span>
              UNIFIED UMBRELLA
            </div>
          </Reveal>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderTop: `1px solid ${ink}`, borderBottom: '0.5px solid var(--rule)' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: sec, letterSpacing: '0.14em' }}>FDE / IMPLEMENTATIONS — 4</span>
          <span style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-4)' }}>同じ哲学・異なる形態</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)' }}>
          {items.map((it, i) => (
            <Reveal key={it.id} delay={i * 80}>
              <div style={{
                padding: '40px 36px 36px',
                borderRight: i % 2 === 0 ? '0.5px solid var(--rule)' : 'none',
                borderBottom: i < 2 ? '0.5px solid var(--rule)' : 'none',
                minHeight: 280, display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: sec, letterSpacing: '0.1em', padding: '2px 6px', border: `0.5px solid ${sec}` }}>FDE</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.1em' }}>{it.num} · {it.en.toUpperCase()}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--jp)', fontSize: 24, fontWeight: 600, color: ink, margin: '0 0 14px', letterSpacing: '0.005em' }}>{it.title}</h3>
                <p style={{ fontFamily: 'var(--jp)', fontSize: 14.5, lineHeight: 1.85, color: 'var(--ink-3)', margin: '0 0 20px' }}>{it.line}</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 18, borderTop: '0.5px dashed var(--rule-2)' }}>
                  <div style={{ fontFamily: 'var(--jp)', fontSize: 12, color: sec, fontWeight: 500 }}>{it.position}</div>
                  <button onClick={() => setOpen(open === it.id ? null : it.id)}
                    style={{ background: 'transparent', border: 'none', color: ink, fontFamily: 'var(--jp)', fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>
                    詳しく見る <span style={{ transform: open === it.id ? 'rotate(45deg)' : 'none', transition: '.2s', display: 'inline-block', color: sec, fontSize: 14 }}>+</span>
                  </button>
                </div>
                <div style={{
                  maxHeight: open === it.id ? 220 : 0,
                  overflow: 'hidden', transition: 'max-height .35s, margin-top .35s, opacity .3s',
                  marginTop: open === it.id ? 16 : 0, opacity: open === it.id ? 1 : 0,
                }}>
                  <p style={{ fontFamily: 'var(--jp)', fontSize: 13, lineHeight: 1.85, color: 'var(--ink-3)', margin: '0 0 14px' }}>{it.detail}</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {it.tags.map(t => (
                      <span key={t} style={{ fontSize: 10.5, padding: '4px 8px', border: `0.5px solid ${sec}55`, color: sec, fontFamily: 'var(--jp)' }}>{t}</span>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesSection });