// Hero.jsx — agency landing
const heroStyles = {
  outer: {
    background: '#F2F2F2',
    display: 'flex', flexDirection: 'column',
    height: 'calc(100vh - 80px)',
  },
  wrap: {
    flex: 1,
    display: 'flex', flexDirection: 'column', justifyContent: 'center',
    maxWidth: 1280, margin: '0 auto',
    width: '100%',
    boxSizing: 'border-box',
    padding: '0 36px',
  },
  eyebrow: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    display: 'flex', alignItems: 'center', gap: 12,
  },
  dot: { width: 8, height: 8, background: '#000', borderRadius: '50%' },
  en: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 'clamp(22px, 4.2vw, 60px)',
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    color: '#000', lineHeight: 1.02,
    margin: '24px 0 16px',
    whiteSpace: 'nowrap',
  },
  ko: {
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 'clamp(16px, 1.8vw, 22px)',
    letterSpacing: '-0.03em', lineHeight: 1.4,
    color: '#555', margin: 0,
    maxWidth: 900,
  },

  // Thin rule between heading area and bottom
  rule: {
    width: '100%', height: 1, background: '#000',
    marginTop: 0, marginBottom: 0,
  },

  bottom: {
    width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
    marginTop: 28, gap: 40, flexWrap: 'wrap',
  },
  desc: {
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 14,
    letterSpacing: '-0.03em', lineHeight: 1.95,
    color: '#1A1A1A', maxWidth: 460,
  },

  // Right side: index number + vertical label
  rightMeta: {
    display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
    gap: 20, flexShrink: 0,
  },
  verticalLabel: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '0.12em', textTransform: 'uppercase', color: '#9A9A9A',
    writingMode: 'vertical-rl', textOrientation: 'mixed',
    transform: 'rotate(180deg)',
    lineHeight: 1,
  },
  cta: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 13,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    background: '#000', color: '#F2F2F2',
    border: '1px solid #000', padding: '20px 40px',
    cursor: 'pointer',
    transition: 'background .25s, color .25s',
    display: 'inline-flex', alignItems: 'center', gap: 14,
    flexShrink: 0,
  },
  ctaArrow: { width: 6, height: 6, background: 'currentColor', borderRadius: '50%' },

  // ── Marquee strip
  marqueeWrap: {
    width: '100%',
    borderTop: '1px solid #000',
    borderBottom: '1px solid #000',
    overflow: 'hidden',
    padding: '14px 0',
    background: '#F2F2F2',
  },
  marqueeTrack: {
    display: 'flex', gap: 0,
    animation: 'hero-marquee 22s linear infinite',
    whiteSpace: 'nowrap',
    width: 'max-content',
  },
  marqueeItem: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '0.08em', textTransform: 'uppercase', color: '#000',
    paddingRight: 60,
  },
  marqueeSep: {
    fontFamily: "'Pretendard'", fontWeight: 300, fontSize: 11,
    color: '#9A9A9A', paddingRight: 60,
  },
};

const MARQUEE_ITEMS = [
  'Model Management', '·', 'Seoul, KR', '·', 'Est. 2026', '·',
  'Casting', '·', 'Editorial', '·', 'Commercial', '·',
  'The Last Dot for Perfection', '·',
];

function Hero({ onCta }) {
  const FULL_TEXT = 'We put the last dot for perfection.';
  const [typed, setTyped] = React.useState('');
  React.useEffect(() => {
    const startDelay = setTimeout(() => {
      let i = 0;
      const interval = setInterval(() => {
        i++;
        setTyped(FULL_TEXT.slice(0, i));
        if (i >= FULL_TEXT.length) clearInterval(interval);
      }, 46);
      return () => clearInterval(interval);
    }, 300);
    return () => clearTimeout(startDelay);
  }, []);

  // Duplicate for seamless loop
  const items = [...MARQUEE_ITEMS, ...MARQUEE_ITEMS, ...MARQUEE_ITEMS];

  return (
    <div style={heroStyles.outer}>
      <section style={heroStyles.wrap}>
        <h1 style={heroStyles.en}>
          {typed}
          <span style={{
            display: 'inline-block',
            width: '0.06em',
            height: '0.82em',
            background: '#000',
            marginLeft: '0.05em',
            verticalAlign: 'middle',
            animation: 'hero-cursor-blink .65s step-end infinite',
          }} />
        </h1>
        <div style={heroStyles.ko}>
          우리는 완벽함을 위한 마지막 점을 찍습니다.
        </div>

        <div style={{ width: '100%', marginTop: 40 }}>
          <div style={heroStyles.rule} />
          <div style={heroStyles.bottom}>
            <p style={heroStyles.desc}>
              완성을 위한 마지막 점, SAGUO MANAGEMENT.<br/><br/>
              세상이 미처 발견 못한 고유한 빛깔,<br/>
              유행 너머의 취향을 만드는 내일의 아티스트와 함께합니다.<br/><br/>
              SAGUO MANAGEMENT는 2026년 2월을 시작으로,<br/>
              브랜드의 비전을 가장 직관적이고 감각적으로 구현할 아티스트 라인업을 제안합니다.
            </p>
            <button style={heroStyles.cta} onClick={onCta}>
              View Models
              <span style={heroStyles.ctaArrow}></span>
            </button>
          </div>
        </div>
      </section>

      {/* Black bottom bar */}
      <div style={{
        height: 56, background: '#000',
        display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        padding: '0 36px',
      }}>
        <span style={{
          fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 11,
          letterSpacing: '-0.03em', color: 'rgba(255,255,255,0.45)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span>SEOUL · EST. 2026</span>
          <span style={{ opacity: 0.35 }}>·</span>
          <span>© SAGUO All Rights Reserved</span>
        </span>
      </div>
    </div>
  );
}

window.Hero = Hero;