// hero.jsx — VerdiaLink hero (Stripe-style, 巨大タイポ + 複雑性)

function Hero({ accent, secondary, fontMode }) {
  const sec = secondary || '#2D5BFF';
  const ink = accent || '#0A1F44';
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % 100), 80);
    return () => clearInterval(id);
  }, []);

  return (
    <section data-section="hero" style={{
      paddingTop: 56, paddingBottom: 0, position: 'relative', overflow: 'hidden',
      borderBottom: '0.5px solid var(--rule)'
    }}>
      <CoordinateFrame ink={ink} sec={sec} />

      {/* Two-layer network background */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', opacity: 0.55 }}>
          <NetworkGraph width={1280} height={720} density={52} stroke={ink} dotFill={ink} opacity={0.12} seed={3} animated />
        </div>
        <div style={{ position: 'absolute', left: '60%', top: '18%', opacity: 0.32 }}>
          <NetworkGraph width={520} height={420} density={14} stroke={sec} dotFill={sec} opacity={0.7} seed={29} />
        </div>
      </div>

      {/* Diagonal hairlines */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} preserveAspectRatio="none" viewBox="0 0 1280 820">
        <line x1="0" y1="640" x2="1280" y2="180" stroke="var(--rule-2)" strokeWidth="0.5" strokeDasharray="2 6" />
        <line x1="0" y1="180" x2="1280" y2="640" stroke="var(--rule-2)" strokeWidth="0.5" strokeDasharray="2 6" opacity="0.5" />
      </svg>

      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '32px 48px 0', position: 'relative' }}>

        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 56 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 500,
                color: '#fff', background: ink, padding: '5px 9px', letterSpacing: '0.14em'
              }}>
                <span style={{ width: 5, height: 5, background: sec, borderRadius: 3 }} />
                FDE
              </span>
              <EnKicker color={ink} bullet={false} style={{ margin: 0 }}>FORWARD DEPLOYED ENGINEERING</EnKicker>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: 14 }}>
              <span>EST · 2024</span>
              <span style={{ width: 1, height: 10, background: 'var(--rule-2)' }} />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: sec, boxShadow: `0 0 0 ${tick % 30 / 8}px ${sec}33`, transition: 'box-shadow .2s' }} />
                NOW EMBEDDING
              </span>
            </div>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <div style={{ position: 'relative' }}>
            <span style={{
              position: 'absolute', left: -64, top: 18,
              fontFamily: 'var(--mono)', fontSize: 11, color: sec, letterSpacing: '0.14em',
              writingMode: 'vertical-rl', transform: 'rotate(180deg)'
            }}>§ 01 — MANIFESTO</span>
            <h1 style={{
              fontFamily: 'var(--jp)', fontWeight: 600,
              fontSize: 96, lineHeight: 1.14, letterSpacing: '-0.025em',
              color: ink, margin: 0, maxWidth: 1100, textWrap: 'pretty'
            }}>
              業務に
              <span style={{ position: 'relative', display: 'inline-block', padding: '0 0.12em' }}>
                <span style={{ position: 'relative', zIndex: 1 }}>入り込む</span>
                <span style={{
                  position: 'absolute', left: 0, right: 0, bottom: '0.08em', height: '0.18em',
                  background: sec, opacity: 0.9, zIndex: 0
                }} />
              </span>
              <br />
              <span style={{ color: sec }}>伴走型</span><span style={{ color: ink }}>エンジニアリング</span>
            </h1>
          </div>
        </Reveal>

        <Reveal delay={220}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 72, alignItems: 'flex-end', marginTop: 64 }}>
            <div style={{ display: 'flex', alignItems: 'stretch' }}>
              <div style={{ width: 2, background: sec, marginRight: 24 }} />
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: sec, letterSpacing: '0.14em', marginBottom: 10 }}>OUR PROMISE</div>
                <p style={{
                  fontFamily: 'var(--jp)', fontSize: 16.5, lineHeight: 1.95, color: 'var(--ink-2)',
                  maxWidth: 520, margin: 0
                }}>
                  外部ベンダーではなく、<strong style={{ color: ink, fontWeight: 600 }}>現場の一員</strong>として 課題解決に取り組む。 設計・実装・運用までを一気通貫で支援する、 Forward Deployed Engineering。
                

                </p>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }}>
              <VlButton primary size="lg" onClick={() => window.__vlOpenContact?.()}>{VL_COPY.hero.cta_primary}</VlButton>
            </div>
          </div>
        </Reveal>

        <Reveal delay={360}>
          <KpiStrip ink={ink} sec={sec} />
        </Reveal>
      </div>
    </section>);

}

function CoordinateFrame({ ink, sec }) {
  const Tick = ({ pos }) =>
  <div style={{ position: 'absolute', ...pos, color: 'var(--ink-3)' }}>
      <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="0.8">
        <line x1="7" y1="0" x2="7" y2="14" />
        <line x1="0" y1="7" x2="14" y2="7" />
      </svg>
    </div>;

  return (
    <>
      <Tick pos={{ top: 16, left: 16 }} />
      <Tick pos={{ top: 16, right: 16 }} />
      <Tick pos={{ bottom: 16, left: 16 }} />
      <Tick pos={{ bottom: 16, right: 16 }} />
      <div style={{ position: 'absolute', left: 38, top: 14, fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>X / 0000</div>
      <div style={{ position: 'absolute', right: 38, top: 14, fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>X / 1280</div>
      <div style={{ position: 'absolute', left: 14, top: 38, fontFamily: 'var(--mono)', fontSize: 9.5, color: sec, letterSpacing: '0.14em', writingMode: 'vertical-rl' }}>HERO · 01</div>
    </>);

}

function KpiStrip({ ink, sec }) {
  const items = VL_COPY.services.items;
  return (
    <div style={{
      marginTop: 96, borderTop: `1px solid ${ink}`, borderBottom: '0.5px solid var(--rule)',
      display: 'grid', gridTemplateColumns: '160px repeat(4,1fr)', alignItems: 'stretch'
    }}>
      <div style={{
        padding: '20px 16px', borderRight: '0.5px solid var(--rule)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        background: ink, color: '#fff'
      }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', opacity: 0.6 }}>FDE / FORMS</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 32, fontWeight: 500, lineHeight: 1, marginTop: 16 }}>
          <span style={{ color: sec }}>04</span><span style={{ opacity: 0.4, fontSize: 14 }}> / 04</span>
        </div>
      </div>
      {items.map((it, i) =>
      <div key={it.id} style={{
        padding: '20px 18px', borderRight: i < 3 ? '0.5px solid var(--rule)' : 'none',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        minHeight: 110, background: 'rgba(255,255,255,0.5)'
      }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.12em' }}>{it.num}</span>
            <span style={{ width: 16, height: 1.5, background: sec }} />
          </div>
          <div style={{ fontFamily: 'var(--jp)', fontSize: 13, fontWeight: 600, color: ink, lineHeight: 1.5, marginTop: 14 }}>
            {it.title}
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-4)', letterSpacing: '0.1em', marginTop: 8 }}>
            {it.en.toUpperCase()}
          </div>
        </div>
      )}
    </div>);

}

Object.assign(window, { Hero });