// DGHero.jsx — full-viewport dark hero with pattern, logo in oval, animated entrance

const DGHero = ({ onShop, onRecipes }) => (
  <section id="hero" style={heroSt.root}>
    <div style={heroSt.patternBg} />
    <div style={heroSt.radialOverlay} />
    <div style={heroSt.content}>
      <p style={heroSt.eyebrow}>Est. 2019 &nbsp;·&nbsp; Small-Batch Bitters &nbsp;·&nbsp; Knoxville, Tennessee</p>

      <div style={heroSt.ovalWrap}>
        <div style={heroSt.oval}>
          <div style={heroSt.ovalInner} />
          <img src="assets/logo_primary.png" alt="The Dashing Gent Bitters Co." style={heroSt.logo} />
        </div>
      </div>

      <div style={heroSt.titleRow}>
        <div style={heroSt.titleLine} />
        <p style={heroSt.tagline}>Four Dashes. One Moment.</p>
        <div style={heroSt.titleLine} />
      </div>

      <p style={heroSt.sub}>
        Hand-crafted, small-batch bitters for the cocktail enthusiast.
      </p>

      <div style={heroSt.actions}>
        <button style={heroSt.btnGold} onClick={onShop}
          onMouseEnter={e => e.currentTarget.style.background = '#D4B070'}
          onMouseLeave={e => e.currentTarget.style.background = '#B8904A'}>
          Shop Bitters
        </button>
        {/* <button style={heroSt.btnGhost} onClick={onRecipes}
          onMouseEnter={e => { e.currentTarget.style.borderColor = '#B8904A'; e.currentTarget.style.color = '#B8904A'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(242,236,220,0.35)'; e.currentTarget.style.color = 'rgba(242,236,220,0.8)'; }}>
          Find a Recipe
        </button> */}
      </div>
    </div>

    <div style={heroSt.scrollHint}>
      <span style={heroSt.scrollLabel}>Scroll</span>
      <div style={heroSt.scrollBar} />
    </div>
  </section>
);

const heroSt = {
  root: {
    minHeight: '100vh', background: '#1A1A1A',
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center',
    position: 'relative', overflow: 'hidden',
    paddingTop: 88,
  },
  patternBg: {
    position: 'absolute', inset: 0,
    backgroundImage: "url('assets/pattern_bg.png')",
    backgroundSize: '340px auto', backgroundRepeat: 'repeat',
    opacity: 0.045,
  },
  radialOverlay: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse 75% 65% at 50% 48%, rgba(184,144,74,0.06) 0%, transparent 68%)',
  },
  content: {
    position: 'relative', zIndex: 1,
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    gap: 32, padding: '64px 32px 96px', textAlign: 'center',
  },
  eyebrow: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.6rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.24em', color: '#B8904A', margin: 0,
  },
  ovalWrap: { position: 'relative' },
  oval: {
    width: 228, height: 252, borderRadius: '50%',
    border: '1.5px solid rgba(184,144,74,0.55)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    position: 'relative',
    background: '#F2ECDC',
    overflow: 'hidden',
    boxShadow: '0 0 60px rgba(184,144,74,0.06), inset 0 0 40px rgba(184,144,74,0.03)',
  },
  ovalInner: {
    position: 'absolute', inset: 10, borderRadius: '50%',
    border: '2px solid rgba(184,144,74,0.4)',
  },
  logo: {
    height: 180, width: 'auto', position: 'relative', zIndex: 1,
    filter: 'drop-shadow(0 6px 24px rgba(184,144,74,0.18))',
  },
  titleRow: { display: 'flex', alignItems: 'center', gap: 18 },
  titleLine: { width: 52, height: 1, background: 'rgba(184,144,74,0.45)' },
  tagline: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.7rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.24em', color: '#B8904A',
    margin: 0, whiteSpace: 'nowrap',
  },
  sub: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1.12rem',
    color: 'rgba(242,236,220,0.6)', lineHeight: 1.7, margin: 0, maxWidth: 520,
  },
  actions: { display: 'flex', gap: 12, marginTop: 4 },
  btnGold: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.68rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em',
    background: '#B8904A', color: '#1A1A1A',
    border: '1.5px solid #B8904A', padding: '13px 34px',
    cursor: 'pointer', transition: 'background 0.2s',
  },
  btnGhost: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.68rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.13em',
    background: 'transparent', color: 'rgba(242,236,220,0.8)',
    border: '1.5px solid rgba(242,236,220,0.35)',
    padding: '13px 34px', cursor: 'pointer', transition: 'all 0.2s',
  },
  scrollHint: {
    position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, zIndex: 1,
  },
  scrollLabel: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.52rem', fontWeight: 700,
    letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(184,144,74,0.45)',
  },
  scrollBar: {
    width: 1, height: 36,
    background: 'linear-gradient(180deg, rgba(184,144,74,0.45) 0%, transparent 100%)',
  },
};

Object.assign(window, { DGHero });