// ui_kits/website/Hero.jsx

const heroStyles = {
  outer: {
    position: 'relative',
    minHeight: 660,
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden',
    background: '#1F4F40',
  },
  bg: {
    position: 'absolute', inset: 0,
    backgroundImage: "url('hero-background.png')",
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  scrim: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(90deg, rgba(31,79,64,0.55) 0%, rgba(31,79,64,0.05) 55%, rgba(31,79,64,0) 100%)',
  },
  content: {
    position: 'relative', zIndex: 2,
    flex: 1,
    maxWidth: 1200, width: '100%', margin: '0 auto',
    padding: '110px 32px 56px',
    color: '#fff',
    boxSizing: 'border-box',
  },
  eyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: '#fff', opacity: 0.9, marginBottom: 18,
  },
  title: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.02em',
    margin: 0, color: '#fff',
    textShadow: '0 2px 20px rgba(0,0,0,0.25)',
    textWrap: 'balance',
  },
  titleItalic: { fontStyle: 'italic', fontWeight: 400 },
  sub: {
    fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6,
    color: '#fff', opacity: 0.95, marginTop: 20, maxWidth: 560,
    textWrap: 'pretty',
  },
  ctas: { display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' },
  marquee: {
    position: 'relative', zIndex: 2,
    padding: '14px 32px',
    background: 'rgba(15,15,15,0.55)',
    backdropFilter: 'blur(6px)',
    WebkitBackdropFilter: 'blur(6px)',
    color: '#fff',
    display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap',
    fontFamily: 'var(--font-sans)', fontSize: 13,
    letterSpacing: '0.14em', textTransform: 'uppercase',
  },
};

function Hero({ onPrimary, onSecondary }) {
  const tr = useT();
  return (
    <section style={heroStyles.outer}>
      <div style={heroStyles.bg}></div>
      <div style={heroStyles.scrim}></div>

      <div style={heroStyles.content}>
        <div style={{ maxWidth: 600 }}>
          <div style={heroStyles.eyebrow}>{tr('hero.eyebrow')}</div>
          <h1 style={heroStyles.title}>
            {tr('hero.title.a')} <br/>
            <span style={heroStyles.titleItalic}>{tr('hero.title.b')}</span>
          </h1>
          <p style={heroStyles.sub}>{tr('hero.sub')}</p>
          <div style={heroStyles.ctas}>
            <button className="btn btn--primary btn--lg" onClick={onPrimary}>{tr('hero.cta.primary')}</button>
            <button className="btn btn--secondary btn--lg" onClick={onSecondary} style={{ background:'rgba(255,255,255,0.92)' }}>{tr('hero.cta.secondary')}</button>
          </div>
        </div>
      </div>

      <div style={heroStyles.marquee}>
        <span style={{ opacity: 0.7 }}>{tr('hero.marquee.label')}</span>
        <span>· {tr('hero.marquee.1')}</span>
        <span>· {tr('hero.marquee.2')}</span>
        <span>· {tr('hero.marquee.3')}</span>
        <span>· {tr('hero.marquee.4')}</span>
        <span>· {tr('hero.marquee.5')}</span>
      </div>
    </section>
  );
}

window.Hero = Hero;