// Hero.jsx — Daniel do Japão UI Kit
const Hero = ({ onNavigate }) => {
  const s = heroStyles;
  const handleScrollDown = () => {
    const hero = document.querySelector('.rsp-hero');
    const target = hero ? hero.offsetTop + hero.offsetHeight - 8 : window.innerHeight;
    window.scrollTo({ top: target, behavior: 'smooth' });
  };
  return (
    <section className="rsp-hero" style={s.hero}>
      {/* Grain overlay */}
      <div style={s.grain}></div>
      <div style={s.content}>
        <div style={s.eyebrow}>DANIEL DO JAPÃO</div>
        <h1 className="rsp-h1-hero" style={s.h1}>
          Criar a própria<br />
          <em style={s.accent}>realidade</em><br />
          não é luxo.
        </h1>
        <p style={s.sub}>
          É disciplina. Para quem vem da periferia e sabe que<br />
          construir não é opção — é destino.
        </p>
        <div className="rsp-hero-actions" style={s.actions}>
          <button style={s.btnPrimary} onClick={() => onNavigate && onNavigate('cria')}>
            ENTRAR NO CRIA
          </button>
          <button style={s.btnGhost} onClick={() => onNavigate && onNavigate('about')}>
            CONHECER A HISTÓRIA
          </button>
        </div>
        <div className="rsp-hero-stats" style={s.stats}>
          <div style={s.stat}>
            <span style={s.statNum}>3k+</span>
            <span style={s.statLabel}>Membros CRIA</span>
          </div>
          <div style={s.statDiv}></div>
          <div style={s.stat}>
            <span style={s.statNum}>5+</span>
            <span style={s.statLabel}>Anos criando</span>
          </div>
        </div>

        {/* Scroll hook */}
        <button style={s.scrollCue} onClick={handleScrollDown} aria-label="Deslize para ver mais">
          <span style={s.scrollCueLabel}>DESLIZE PARA VER MAIS</span>
          <span className="om-scroll-bob" style={s.scrollCueArrow}></span>
        </button>
      </div>
      {/* Social rail (desktop) */}
      <div className="rsp-vertical-text" style={s.socialRail}>
        <div style={s.socialLine}></div>
        {[
          { label: 'Instagram', href: 'https://www.instagram.com/danieldojapao/' },
          { label: 'Twitter', href: 'https://x.com/danieldojapao' },
          { label: 'TikTok', href: '#' },
          { label: 'Pinterest', href: 'https://br.pinterest.com/danieldojapao/_profile/_created/' },
        ].map(soc => (
          <a key={soc.label} href={soc.href} target="_blank" rel="noopener noreferrer" style={s.socialLink}>{soc.label}</a>
        ))}
      </div>
      {/* Social row (mobile) */}
      <div className="rsp-social-mobile" style={s.socialRowMobile}>
        {[
          { label: 'Instagram', href: 'https://www.instagram.com/danieldojapao/' },
          { label: 'Twitter', href: 'https://x.com/danieldojapao' },
          { label: 'TikTok', href: '#' },
          { label: 'Pinterest', href: 'https://br.pinterest.com/danieldojapao/_profile/_created/' },
        ].map(soc => (
          <a key={soc.label} href={soc.href} target="_blank" rel="noopener noreferrer" style={s.socialRowLink}>{soc.label}</a>
        ))}
      </div>
    </section>
  );
};

const heroStyles = {
  hero: { background: '#0A0A0A', minHeight: 580, display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', padding: '80px 32px' },
  grain: {
    position: 'absolute', inset: 0, opacity: 0.035, pointerEvents: 'none',
    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
    backgroundSize: '160px 160px',
  },
  content: { maxWidth: 1200, margin: '0 auto', width: '100%', position: 'relative', zIndex: 1 },
  eyebrow: { fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#D62B2B', marginBottom: 20 },
  h1: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 72, fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FAFAFA', marginBottom: 28, fontStyle: 'normal' },
  accent: { fontStyle: 'italic', color: '#D62B2B' },
  sub: { fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 400, lineHeight: 1.65, color: '#6B6B6B', marginBottom: 36, maxWidth: 480 },
  actions: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 56, flexWrap: 'wrap' },
  btnPrimary: { background: '#D62B2B', color: '#FAFAFA', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '14px 32px', borderRadius: 2 },
  btnGhost: { background: 'transparent', color: '#6B6B6B', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '14px 8px', borderBottom: '1px solid #3A3A3A' },
  stats: { display: 'flex', gap: 0, alignItems: 'center' },
  stat: { display: 'flex', flexDirection: 'column', gap: 4, padding: '0 24px 0 0' },
  statNum: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 36, fontWeight: 300, color: '#FAFAFA', lineHeight: 1 },
  statLabel: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A3A3A' },
  statDiv: { width: 1, height: 36, background: '#1A1A1A', margin: '0 24px 0 0' },
  scrollCue: { display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12, background: 'none', border: 'none', cursor: 'pointer', padding: 0, marginTop: 48 },
  scrollCueLabel: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.26em', textTransform: 'uppercase', color: '#6B6B6B' },
  scrollCueArrow: { display: 'block', width: 11, height: 11, borderRight: '1.5px solid #D62B2B', borderBottom: '1.5px solid #D62B2B', transform: 'rotate(45deg)' },
  verticalText: { position: 'absolute', right: 32, top: '50%', transform: 'translateY(-50%) rotate(90deg)', transformOrigin: 'center center', fontFamily: "'DM Sans', sans-serif", fontSize: 8, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#1A1A1A', whiteSpace: 'nowrap' },
  socialRail: { position: 'absolute', right: 32, top: '50%', transform: 'translateY(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 14, zIndex: 2 },
  socialLine: { width: 1, height: 40, background: '#2A2A2A', marginBottom: 4 },
  socialLink: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#6B6B6B', textDecoration: 'none', writingMode: 'vertical-rl', transition: 'color 180ms' },
  socialRowMobile: { display: 'none', flexWrap: 'wrap', gap: '10px 18px', marginTop: 36, paddingTop: 28, borderTop: '1px solid #1A1A1A', position: 'relative', zIndex: 2 },
  socialRowLink: { fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6B6B6B', textDecoration: 'none' },
};

Object.assign(window, { Hero });