// sections.jsx — Concept, Why FDE, Approach, Closing CTA

function ConceptSection({ accent }) {
  return (
    <section data-section="concept" style={{ padding: '120px 48px', borderTop: '0.5px solid var(--rule)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '280px 1fr', gap: 80 }}>
        <div>
          <Reveal><EnKicker color={accent}>{VL_COPY.concept.eyebrow}</EnKicker></Reveal>
          <Reveal delay={120}>
            <div style={{ marginTop: 40, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.12em', lineHeight: 1.8 }}>
              FORWARD<br />DEPLOYED<br />ENGINEERING
            </div>
          </Reveal>
        </div>
        <div>
          <Reveal delay={80}>
            <h2 style={{
              fontFamily: 'var(--jp)', fontWeight: 500, fontSize: 34, lineHeight: 1.6,
              color: 'var(--ink)', margin: 0, letterSpacing: '0.005em',
            }}>
              {VL_COPY.concept.title}<br />
              <span style={{ color: accent }}>「伴走型エンジニアリング(FDE)」</span>として提供します
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--jp)', fontSize: 16, lineHeight: 2.1, color: 'var(--ink-3)', marginTop: 40, maxWidth: 640, whiteSpace: 'pre-line' }}>
              {VL_COPY.concept.body_a}
            </p>
          </Reveal>
          <Reveal delay={320}>
            <p style={{ fontFamily: 'var(--jp)', fontSize: 16, lineHeight: 2.1, color: 'var(--ink-3)', marginTop: 24, maxWidth: 640 }}>
              {VL_COPY.concept.body_b}
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function WhySection({ accent }) {
  return (
    <section data-section="why" style={{ padding: '120px 48px', borderTop: '0.5px solid var(--rule)', background: '#FBFCFD' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal><EnKicker color={accent}>{VL_COPY.why.eyebrow}</EnKicker></Reveal>
        <Reveal delay={100}>
          <h2 style={{
            fontFamily: 'var(--jp)', fontWeight: 500, fontSize: 44, lineHeight: 1.5,
            color: 'var(--ink)', margin: '24px 0 56px', letterSpacing: '0.005em',
          }}>{VL_COPY.why.title}</h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 72 }}>
          <div>
            <Reveal delay={140}>
              <p style={{ fontFamily: 'var(--jp)', fontSize: 17, lineHeight: 2.1, color: 'var(--ink-2)', margin: 0, fontWeight: 500, whiteSpace: 'pre-line' }}>
                {VL_COPY.why.body_a}
              </p>
            </Reveal>
            <Reveal delay={260}>
              <p style={{ fontFamily: 'var(--jp)', fontSize: 15.5, lineHeight: 2.1, color: 'var(--ink-3)', marginTop: 32, whiteSpace: 'pre-line' }}>
                {VL_COPY.why.body_b}
              </p>
            </Reveal>
            <Reveal delay={380}>
              <p style={{ fontFamily: 'var(--jp)', fontSize: 15.5, lineHeight: 2.1, color: 'var(--ink-3)', marginTop: 24 }}>
                <span style={{ color: accent, fontWeight: 600 }}>これにより「使われる仕組み」を実現します。</span>
              </p>
            </Reveal>
          </div>
          <Reveal delay={300}>
            <aside style={{
              borderLeft: `2px solid ${accent}`, paddingLeft: 32, paddingTop: 8,
            }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: accent, letterSpacing: '0.12em', marginBottom: 14 }}>
                GLOBAL CONTEXT
              </div>
              <p style={{ fontFamily: 'var(--jp)', fontSize: 13.5, lineHeight: 2.0, color: 'var(--ink-3)', margin: 0, whiteSpace: 'pre-line' }}>
                {VL_COPY.why.pull}
              </p>
            </aside>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ApproachSection({ accent }) {
  return (
    <section data-section="approach" style={{ padding: '120px 48px', borderTop: '0.5px solid var(--rule)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal><EnKicker color={accent}>{VL_COPY.approach.eyebrow}</EnKicker></Reveal>
        <Reveal delay={100}>
          <h2 style={{ fontFamily: 'var(--jp)', fontWeight: 500, fontSize: 36, lineHeight: 1.5, color: 'var(--ink)', margin: '24px 0 64px', letterSpacing: '0.005em' }}>
            {VL_COPY.approach.title}
          </h2>
        </Reveal>
        <div style={{ position: 'relative', paddingLeft: 80 }}>
          {/* vertical rail */}
          <div style={{ position: 'absolute', left: 32, top: 12, bottom: 12, width: 1, background: 'var(--rule-2)' }} />
          {VL_COPY.approach.steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', alignItems: 'flex-start', paddingBottom: i < 3 ? 56 : 0, position: 'relative' }}>
                {/* node */}
                <div style={{
                  position: 'absolute', left: -56, top: 6,
                  width: 16, height: 16, borderRadius: '50%', background: accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 0 4px var(--bg)',
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: 3, background: '#fff' }} />
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: accent, letterSpacing: '0.14em', paddingTop: 4 }}>STEP {s.n}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--jp)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: '0 0 12px', letterSpacing: '0.005em' }}>{s.t}</h3>
                  <p style={{ fontFamily: 'var(--jp)', fontSize: 14.5, lineHeight: 1.95, color: 'var(--ink-3)', margin: 0, maxWidth: 640 }}>{s.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingSection({ accent }) {
  return (
    <section style={{ padding: '160px 48px 140px', borderTop: '0.5px solid var(--rule)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.4, pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <NetworkGraph width={900} height={400} density={28} stroke={accent} dotFill={accent} opacity={0.15} seed={5} />
      </div>
      <div style={{ maxWidth: 1180, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <h2 style={{
            fontFamily: 'var(--jp)', fontWeight: 500, fontSize: 42, lineHeight: 1.6,
            color: 'var(--ink)', margin: 0, letterSpacing: '0.005em',
          }}>
            {VL_COPY.closing.line_a}<br />
            <span style={{ color: accent }}>{VL_COPY.closing.line_b}</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ marginTop: 56, display: 'flex', justifyContent: 'center' }}>
            <VlButton primary size="lg" onClick={() => window.__vlOpenContact?.()}>{VL_COPY.closing.cta}</VlButton>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { ConceptSection, WhySection, ApproachSection, ClosingSection });