// app.jsx — VerdiaLink full single-page site

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0A1F44",
  "secondary": "#2D5BFF",
  "fontMode": "sans"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    window.__vlGoTo = (id) => {
      const el = document.querySelector(`[data-section="${id}"]`);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: 'smooth' });
    };
    return () => { delete window.__vlGoTo; };
  }, []);

  return (
    <div style={{
      minHeight: '100vh', background: 'var(--bg)', color: 'var(--ink)',
      fontFamily: t.fontMode === 'serif' ? 'var(--serif)' : 'var(--jp)',
    }}>
      <FullPageHeader accent={t.accent} secondary={t.secondary} />
      <Hero accent={t.accent} secondary={t.secondary} fontMode={t.fontMode} />
      <ConceptSection accent={t.accent} secondary={t.secondary} />
      <ServicesSection accent={t.accent} secondary={t.secondary} fontMode={t.fontMode} />
      <WhySection accent={t.accent} secondary={t.secondary} />
      <ApproachSection accent={t.accent} secondary={t.secondary} />
      <ClosingSection accent={t.accent} secondary={t.secondary} />
      <FullPageFooter />

      <ContactModal />

      <TweaksPanel title="VerdiaLink Tweaks">
        <TweakSection label="Brand" />
        <TweakColor label="プライマリ(ネイビー)" value={t.accent} onChange={(v) => setTweak('accent', v)} />
        <TweakColor label="セカンダリ" value={t.secondary} onChange={(v) => setTweak('secondary', v)} />
        <TweakRadio label="タイポ" value={t.fontMode}
          options={[{ value: 'sans', label: 'Sans' }, { value: 'serif', label: 'Serif混在' }]}
          onChange={(v) => setTweak('fontMode', v)} />

        <TweakSection label="Quick Reset" />
        <TweakButton label="ネイビー × エレクトリックブルー" onClick={() => setTweak({ accent: '#0A1F44', secondary: '#2D5BFF', fontMode: 'sans' })} />
      </TweaksPanel>
    </div>
  );
}

// Full-page header (sticky over the document, not over an internal scroller)
function FullPageHeader({ accent, secondary }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const goTo = (id) => window.__vlGoTo?.(id);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(247,248,250,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(150%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(150%)' : 'none',
      borderBottom: scrolled ? '0.5px solid var(--rule)' : '0.5px solid transparent',
      transition: 'background .25s, border-color .25s',
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto', height: 64,
        padding: '0 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Logo size={15} color={accent} />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 12.5, fontWeight: 500 }}>
          {VL_COPY.nav.map(n => (
            <a key={n.id} onClick={() => goTo(n.id)}
              style={{ color: 'var(--ink-2)', textDecoration: 'none', cursor: 'pointer' }}>
              {n.label}
            </a>
          ))}
          <span style={{ width: 1, height: 14, background: 'var(--rule-2)' }} />
          <a onClick={() => window.__vlOpenContact?.()}
            style={{ color: secondary, textDecoration: 'none', cursor: 'pointer', fontWeight: 600 }}>
            Contact
          </a>
        </nav>
      </div>
    </header>
  );
}

function FullPageFooter() {
  return (
    <footer style={{ borderTop: '0.5px solid var(--rule)', marginTop: 80 }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto', padding: '40px 48px 56px',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40,
      }}>
        <div>
          <Logo size={14} />
          <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 14, letterSpacing: '0.04em', maxWidth: 360, lineHeight: 1.6 }}>
            Forward Deployed Engineering for the Japanese enterprise.<br />
            業務に深く入り込む、伴走型エンジニアリング。
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 11.5, color: 'var(--ink-3)' }}>
          <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}
            onClick={() => window.__vlOpenContact?.()}>Contact</a>
          <a href="/privacy.html" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="/tokushoho.html" style={{ color: 'inherit', textDecoration: 'none' }}>特商法</a>
          <span style={{ color: 'var(--ink-4)' }}>© 2026 VerdiaLink</span>
        </div>
      </div>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);