// HeroC — Centered Statement (minimal)
// 中央揃えのタグライン1行、極限の余白、最小限のナビ

function useIsMobile(breakpoint = 720) {
  const [isMobile, setIsMobile] = React.useState(() => {
    if (typeof window === 'undefined') return false;
    return window.matchMedia(`(max-width: ${breakpoint}px)`).matches;
  });
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
    const onChange = e => setIsMobile(e.matches);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, [breakpoint]);
  return isMobile;
}
window.useIsMobile = useIsMobile;

const HEROC_WORDMARK_FONTS = [
  { key: 'garamond',   label: 'EB Garamond',        css: '"EB Garamond", serif',          weight: 500, tracking: 0.2  },
  { key: 'cormorant',  label: 'Cormorant',          css: '"Cormorant Garamond", serif',   weight: 500, tracking: 0.4  },
  { key: 'newsreader', label: 'Newsreader',         css: '"Newsreader", serif',           weight: 500, tracking: 0.1  },
  { key: 'caslon',     label: 'Libre Caslon',       css: '"Libre Caslon Text", serif',    weight: 400, tracking: 0.4  },
  { key: 'spectral',   label: 'Spectral',           css: '"Spectral", serif',             weight: 500, tracking: 0.2  },
  { key: 'unna',       label: 'Unna',               css: '"Unna", serif',                 weight: 400, tracking: 0.6  },
  { key: 'instrument', label: 'Instrument Serif',   css: '"Instrument Serif", serif',     weight: 400, tracking: 0.3  },
  { key: 'plex',       label: 'IBM Plex Sans',      css: '"IBM Plex Sans", sans-serif',   weight: 500, tracking: -0.2 },
];

function HeroC({ tagline = "いいモノをカタチにしよう" }) {
  const [fontKey, setFontKey] = React.useState(() => {
    try { return localStorage.getItem('proteinus.heroC.wordmark') || 'newsreader'; } catch { return 'newsreader'; }
  });
  const font = HEROC_WORDMARK_FONTS.find(f => f.key === fontKey) || HEROC_WORDMARK_FONTS[0];
  React.useEffect(() => { try { localStorage.setItem('proteinus.heroC.wordmark', fontKey); } catch {} }, [fontKey]);

  const isMobile = useIsMobile();

  const headerStyle = isMobile ? { ...heroCStyles.header, padding: '18px 20px' } : heroCStyles.header;
  const wordmarkStyle = {
    ...heroCStyles.wordmark,
    fontFamily: font.css, fontWeight: font.weight, letterSpacing: font.tracking + 'px',
    ...(isMobile ? { fontSize: 22 } : {}),
  };
  const navStyle = isMobile ? { ...heroCStyles.nav, gap: 16 } : heroCStyles.nav;
  const navLinkStyle = isMobile ? { ...heroCStyles.navLink, fontSize: 13, letterSpacing: 0.2 } : heroCStyles.navLink;
  const stageStyle = isMobile ? { ...heroCStyles.stage, padding: '64px 20px 56px', gap: 22 } : heroCStyles.stage;
  const headlineStyle = isMobile ? { ...heroCStyles.headline, fontSize: 'clamp(26px, 7.6vw, 112px)' } : heroCStyles.headline;
  const ruleWrapStyle = isMobile ? { ...heroCStyles.ruleWrap, width: 'min(280px, 60%)' } : heroCStyles.ruleWrap;
  const ledeStyle = isMobile ? { ...heroCStyles.lede, fontSize: 14, lineHeight: 1.85 } : heroCStyles.lede;

  return (
    <div style={heroCStyles.root}>
      <style>{`
        @keyframes heroC_charIn {
          from { opacity: 0; transform: translateY(0.22em); filter: blur(4px); }
          to   { opacity: 1; transform: none;               filter: blur(0); }
        }
        .heroC-char {
          display: inline-block;
          animation: heroC_charIn .9s cubic-bezier(.2,.7,.2,1) both;
        }
        @keyframes heroC_line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .heroC-line {
          display: block; height: 1px; width: 100%;
          background: var(--ink-30);
          animation: heroC_line 1.2s .9s cubic-bezier(.2,.7,.2,1) both;
          transform-origin: center;
        }
        @keyframes heroC_fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        .heroC-fade { animation: heroC_fadeUp .9s both cubic-bezier(.2,.7,.2,1); }
        .heroC-fade-1 { animation-delay: 1.1s; }
        .heroC-fade-2 { animation-delay: 1.3s; }
      `}</style>

      {/* Top — 社名 + 最小ナビ */}
      <header style={headerStyle}>
        <span style={wordmarkStyle}>Proteinus</span>
        <nav style={navStyle}>
          <a href="#work"    style={navLinkStyle}>開発実績</a>
          <a href="#about"   style={navLinkStyle}>会社概要</a>
          <a href="https://docs.google.com/forms/d/e/1FAIpQLSf6gk0eGogJyG035JNeN9zrht2BWoiQmVfvmZCT6yr3meWJnw/viewform" target="_blank" rel="noopener" style={navLinkStyle}>お問い合わせ</a>
        </nav>
      </header>

      {/* Centered stage */}
      <main style={stageStyle}>
        <h1 style={headlineStyle}>
          <SplitChars text={tagline} baseDelay={0.15} shrinkChars={['を']} />
        </h1>

        <div style={ruleWrapStyle}>
          <span className="heroC-line" />
        </div>

        <p style={ledeStyle} className="heroC-fade heroC-fade-1">
          紙の束と人の勘。その現場に確かなコードを。
        </p>
      </main>

    </div>
  );
}

function SplitChars({ text, baseDelay = 0, shrinkChars = [] }) {
  const chars = Array.from(text);
  const shrinkSet = new Set(shrinkChars);
  return (
    <span>
      {chars.map((c, i) => (
        <span
          key={i}
          className="heroC-char"
          style={{
            animationDelay: `${baseDelay + i * 0.045}s`,
            fontSize: shrinkSet.has(c) ? '0.72em' : undefined,
            verticalAlign: shrinkSet.has(c) ? '0.16em' : undefined,
            margin: shrinkSet.has(c) ? '0 -0.02em' : undefined,
          }}
        >
          {c === ' ' ? '\u00A0' : c}
        </span>
      ))}
    </span>
  );
}

const heroCStyles = {
  root: {
    width: '100%', height: '100%',
    background: 'var(--paper)',
    color: 'var(--ink)',
    position: 'relative',
    fontFamily: 'var(--sans)',
    overflow: 'hidden',
    display: 'grid',
    gridTemplateRows: 'auto auto',
  },

  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '28px 44px',
  },
  wordmark: {
    fontFamily: 'var(--serif)',
    fontSize: 28,
    letterSpacing: 0.3,
    color: 'var(--ink)',
  },
  nav: { display: 'flex', gap: 32 },
  navLink: {
    color: 'var(--ink-75)',
    textDecoration: 'none',
    fontSize: 18,
    letterSpacing: 0.4,
  },

  stage: {
    display: 'flex', flexDirection: 'column',
    alignItems: 'center',
    padding: '96px 40px 80px',
    textAlign: 'center',
    gap: 28,
  },
  headline: {
    fontFamily: 'var(--serif-jp)',
    fontWeight: 500,
    // 1行で収める。vw ベースで 48〜112px の範囲
    fontSize: 'clamp(48px, 6.2vw, 112px)',
    lineHeight: 1.1,
    letterSpacing: '-0.02em',
    margin: 0,
    color: 'var(--ink)',
    whiteSpace: 'nowrap',
  },
  ruleWrap: { width: 'min(420px, 50%)', height: 1 },
  lede: {
    fontSize: 16, lineHeight: 2.0, color: 'var(--ink-78)',
    maxWidth: 680, margin: 0, textWrap: 'balance',
    fontFamily: 'var(--serif-jp)', fontWeight: 400,
  },
  ctaRow: {
    display: 'flex', alignItems: 'center', gap: 14,
  },
  ctaPrimary: {
    display: 'inline-flex', alignItems: 'center', gap: 12,
    padding: '15px 28px',
    background: 'var(--ink)', color: 'var(--paper)',
    textDecoration: 'none',
    fontSize: 14, letterSpacing: 0.4,
    fontFamily: 'var(--serif-jp)', fontWeight: 500,
  },
  ctaArrow: { transition: 'transform .2s' },
  ctaSecondary: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '14px 28px',
    color: 'var(--ink)',
    textDecoration: 'none',
    fontSize: 14, letterSpacing: 0.6,
    fontFamily: 'var(--serif-jp)', fontWeight: 500,
    borderBottom: '1px solid var(--ink-30)',
  },

  footer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '22px 44px',
    fontSize: 12,
    color: 'var(--ink-60)',
  },
  footerDim: { color: 'var(--ink-45)' },

  pickerWrap: {
    position: 'absolute', left: 44, bottom: 64,
    display: 'flex', flexDirection: 'column', gap: 8,
    fontFamily: 'var(--sans)',
  },
  pickerLabel: {
    fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase',
    color: 'var(--ink-45)',
  },
  pickerRow: { display: 'flex', flexWrap: 'wrap', gap: 6 },
  pickerBtn: {
    padding: '8px 14px',
    fontSize: 15,
    border: '1px solid var(--ink-20)',
    background: 'transparent',
    cursor: 'pointer',
    letterSpacing: 0.2,
  },
};

window.HeroC = HeroC;