/* Hero + Nav with language switcher + WhatsApp CTAs */

function LangSwitcher({ compact = false }) {
  const { lang, setLang } = useI18n();
  const [open, setOpen] = React.useState(false);
  const current = LANGS.find(l => l.code === lang) || LANGS[0];
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, []);
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={()=>setOpen(v=>!v)} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: compact ? '6px 10px' : '8px 14px',
        borderRadius: 999, border: '1px solid var(--line)',
        background: '#fff', fontSize: 13, fontWeight: 500, color: 'var(--ink)',
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
        </svg>
        <span>{current.label}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 6px)',
          insetInlineEnd: 0, minWidth: 140,
          background: '#fff', border: '1px solid var(--line)', borderRadius: 10,
          boxShadow: 'var(--shadow)', overflow: 'hidden', zIndex: 60,
        }}>
          {LANGS.map(l => (
            <button key={l.code}
                    onClick={()=>{ setLang(l.code); setOpen(false); }}
                    style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      width: '100%', padding: '10px 14px',
                      fontSize: 13, fontWeight: 500,
                      background: l.code === lang ? 'var(--green-soft)' : '#fff',
                      color: l.code === lang ? 'var(--green)' : 'var(--ink)',
                      textAlign: 'start',
                    }}>
              <span>{l.name}</span>
              <span style={{ fontSize: 11, opacity: 0.6 }}>{l.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Hero({ tweaks }) {
  const { t } = useI18n();
  const media = useMedia();
  return (
    <section style={heroStyles.section}>
      {tweaks.showMoroccanPattern && (
        <div aria-hidden style={heroStyles.zelligeAccent}>
          <ZelligePattern color={tweaks.primaryGreen}/>
        </div>
      )}

      <div className="container" style={heroStyles.inner}>
        <div style={heroStyles.left}>
          <div style={heroStyles.eyebrow}>
            <span style={heroStyles.eyebrowDot}/>
            <span>{t('hero_eyebrow')}</span>
          </div>
          <h1 style={heroStyles.h1}>
            {t('hero_title_1')}<br/>
            <span style={heroStyles.h1Accent}>{t('hero_title_2')}</span>
          </h1>
          <p style={heroStyles.sub}>{t('hero_sub')}</p>

          <div style={heroStyles.ctaRow}>
            <a href={waLink('Hello ALZ, I would like to rent a car.')}
               target="_blank" rel="noopener"
               style={heroStyles.ctaPrimary}>
              <Icon.Whatsapp width="18" height="18"/>
              <span>{t('hero_cta')}</span>
            </a>
            <a href="#cars" style={heroStyles.ctaSecondary}>
              <span>{t('hero_cta_secondary')}</span>
              <Icon.Arrow width="16" height="16"/>
            </a>
          </div>

          <div style={heroStyles.stats}>
            <Stat n={t('stat_fleet_num')} l={t('stat_fleet')}/>
            <Stat n={t('stat_cities_num')} l={t('stat_cities')}/>
            <Stat n={t('stat_rating_num')} l={t('stat_rating')}/>
          </div>
        </div>

        <div style={heroStyles.right}>
          <div style={heroStyles.carWrap}>
            {!media.hero && (
              <div style={heroStyles.carPlate}>
                <span className="mono" style={heroStyles.plateText}>74-ALZ-2025</span>
              </div>
            )}
            {media.hero ? (
              <img src={media.hero} alt="Hero car"
                   style={{ width: '100%', borderRadius: 16, objectFit: 'cover', aspectRatio: '16/9', display: 'block' }}/>
            ) : (
              <React.Fragment>
                <CarArt.bigsuv accent={tweaks.primaryGreen}/>
                <div style={heroStyles.carCaption} className="mono">
                  [ hero photo · Range Rover Vogue 2025 ]
                </div>
              </React.Fragment>
            )}
          </div>
          <div style={heroStyles.heroBlob} aria-hidden/>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--green)', letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{l}</div>
    </div>
  );
}

function ZelligePattern({ color = '#0B3D2E' }) {
  const tiles = [];
  for (let r = 0; r < 6; r++) {
    for (let c = 0; c < 6; c++) {
      tiles.push(
        <g key={`${r}-${c}`} transform={`translate(${c*60} ${r*60})`}>
          <path d="M30 6 L36 24 L54 24 L40 36 L46 54 L30 44 L14 54 L20 36 L6 24 L24 24 Z"
                fill="none" stroke={color} strokeWidth="0.6" opacity="0.35"/>
          <circle cx="30" cy="30" r="3" fill={color} opacity="0.25"/>
        </g>
      );
    }
  }
  return <svg viewBox="0 0 360 360" width="100%" height="100%">{tiles}</svg>;
}

const heroStyles = {
  section: { position: 'relative', background: 'var(--cream)', paddingTop: 60, paddingBottom: 100, overflow: 'hidden' },
  zelligeAccent: { position: 'absolute', top: -40, insetInlineEnd: -60, width: 380, height: 380, opacity: 0.6, pointerEvents: 'none' },
  inner: { display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 60, alignItems: 'center', position: 'relative', zIndex: 1 },
  left: {},
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontSize: 12, color: 'var(--green)', fontWeight: 500,
    background: '#fff', border: '1px solid var(--line)',
    padding: '6px 12px', borderRadius: 999, marginBottom: 24,
  },
  eyebrowDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--red)' },
  h1: {
    fontSize: 'clamp(40px, 6vw, 76px)', lineHeight: 1.02, letterSpacing: '-0.04em',
    fontWeight: 700, margin: '0 0 24px', color: 'var(--green-deep)', textWrap: 'balance',
  },
  h1Accent: { fontStyle: 'italic', fontWeight: 400, color: 'var(--green)' },
  sub: { fontSize: 17, lineHeight: 1.55, color: 'var(--muted)', maxWidth: 460, margin: '0 0 28px' },
  ctaRow: { display: 'flex', gap: 12, marginBottom: 36, flexWrap: 'wrap' },
  ctaPrimary: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: '#25D366', color: '#fff',
    padding: '14px 22px', borderRadius: 999,
    fontSize: 15, fontWeight: 600,
    boxShadow: '0 6px 18px rgba(37,211,102,0.35)',
  },
  ctaSecondary: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: '#fff', color: 'var(--green)',
    padding: '14px 22px', borderRadius: 999,
    fontSize: 15, fontWeight: 600,
    border: '1px solid var(--line)',
  },
  stats: { display: 'flex', gap: 36, paddingTop: 24, borderTop: '1px solid var(--line)', flexWrap: 'wrap' },
  right: { position: 'relative', minHeight: 320 },
  heroBlob: {
    position: 'absolute', inset: '10% -10% 10% -10%',
    background: 'radial-gradient(ellipse at center, rgba(11,61,46,0.05) 0%, transparent 70%)',
    zIndex: 0,
  },
  carWrap: { position: 'relative', zIndex: 1 },
  carPlate: {
    position: 'absolute', top: 0, insetInlineEnd: 0,
    background: '#fff', border: '1px solid var(--line)',
    padding: '6px 10px', borderRadius: 6, boxShadow: 'var(--shadow-sm)',
  },
  plateText: { fontSize: 12, fontWeight: 600, color: 'var(--ink)' },
  carCaption: { fontSize: 11, color: 'var(--muted)', textAlign: 'center', marginTop: 8, opacity: 0.7 },
};

window.Hero = Hero;
window.ZelligePattern = ZelligePattern;
window.LangSwitcher = LangSwitcher;
window.heroStyles = heroStyles;