/* Cars section, Why us, Reviews, About, FAQ, Footer, Nav, Floating WhatsApp */

/* ---- CAR CARDS ---- */

function CarCard({ car, tweaks }) {
  const { t, lang } = useI18n();
  const Art = CarArt[car.art] || CarArt.sedan;
  const desc = (car.desc && (car.desc[lang] || car.desc.en)) || '';
  const waMsg = `${t('cars_whatsapp_msg')} ${car.name}`;
  return (
    <article style={cardStyles.card}>
      <div style={cardStyles.imgBox}>
        {car.image ? (
          <img src={car.image} alt={car.name} style={cardStyles.img}/>
        ) : (
          <React.Fragment>
            <Art accent={car.swatch || tweaks.primaryGreen}/>
            <div style={cardStyles.photoHint} className="mono">[ car photo ]</div>
          </React.Fragment>
        )}
        <div style={cardStyles.yearTag}>{car.year}</div>
        {car.pricePerDay ? (
          <div style={cardStyles.priceTag}>{car.pricePerDay} <span style={{ fontSize: 10, fontWeight: 500 }}>MAD/day</span></div>
        ) : null}
      </div>
      <div style={cardStyles.body}>
        <div>
          <h3 style={cardStyles.name}>{car.name}</h3>
          <div style={cardStyles.sub}>{t('cars_or_similar')}</div>
        </div>
        <p style={cardStyles.desc}>{desc}</p>
        <div style={cardStyles.footer}>
          <div style={cardStyles.specs}>
            <Spec icon={<Icon.Users width="14" height="14"/>} label={`${car.seats} ${t('spec_seats')}`}/>
            <Spec icon={<Icon.Luggage width="14" height="14"/>} label={`${car.bags} ${t('spec_bags')}`}/>
            <Spec icon={<Icon.Gear width="14" height="14"/>} label={car.trans}/>
            <Spec icon={<Icon.Fuel width="14" height="14"/>} label={car.fuel}/>
          </div>
          <a href={waLink(waMsg)} target="_blank" rel="noopener" style={cardStyles.cta}>
            <Icon.Whatsapp width="16" height="16"/>
            <span>{t('cars_contact_wa')}</span>
          </a>
        </div>
      </div>
    </article>
  );
}

function Spec({ icon, label }) {
  return (
    <div style={cardStyles.spec}>
      <span style={{ color: 'var(--green)', display: 'inline-flex' }}>{icon}</span>
      <span>{label}</span>
    </div>
  );
}

const cardStyles = {
  card: {
    background: '#fff', border: '1px solid var(--line)',
    borderRadius: 'var(--radius-lg)', overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
    transition: 'transform .18s, box-shadow .18s, border-color .18s',
  },
  imgBox: {
    position: 'relative', background: 'var(--cream)',
    borderBottom: '1px solid var(--line)',
    padding: '18px 12px 8px', aspectRatio: '16/9',
    display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
  },
  img: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 },
  yearTag: {
    position: 'absolute', top: 12, insetInlineStart: 12,
    background: '#fff', border: '1px solid var(--line)',
    fontSize: 11, fontWeight: 600, padding: '4px 8px', borderRadius: 6, color: 'var(--green)',
  },
  priceTag: {
    position: 'absolute', top: 12, insetInlineEnd: 12,
    background: 'var(--green)', color: '#fff',
    fontSize: 14, fontWeight: 700, padding: '4px 10px', borderRadius: 6,
    display: 'flex', alignItems: 'baseline', gap: 3,
  },
  photoHint: { position: 'absolute', bottom: 6, insetInlineEnd: 12, fontSize: 9, color: 'var(--muted)', opacity: 0.5 },
  body: { padding: 22, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 },
  name: { margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--ink)', lineHeight: 1.2 },
  sub: { fontSize: 12, color: 'var(--muted)', marginTop: 4 },
  desc: { margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--muted)', flex: 1 },
  footer: { display: 'flex', flexDirection: 'column', gap: 14 },
  specs: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, paddingTop: 14, borderTop: '1px solid var(--line)' },
  spec: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--ink)', fontWeight: 500 },
  cta: {
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    background: '#25D366', color: '#fff', padding: '13px 16px', borderRadius: 999,
    fontSize: 14, fontWeight: 600,
    boxShadow: '0 4px 12px rgba(37,211,102,0.25)',
  },
};

function CarsSection({ tweaks }) {
  const { t } = useI18n();
  const cars = useCars();
  const [tab, setTab] = React.useState('all');

  const filtered = React.useMemo(() => {
    if (tab === 'economy') return cars.filter(c => c.category === 'economy');
    if (tab === 'luxury') return cars.filter(c => c.category === 'luxury');
    return cars;
  }, [tab, cars]);

  const economyCount = cars.filter(c => c.category === 'economy').length;
  const luxuryCount = cars.filter(c => c.category === 'luxury').length;

  return (
    <section id="cars" style={sectStyles.section}>
      <div className="container">
        <SectionHead eyebrow={t('cars_eyebrow')} title={t('cars_title')} sub={t('cars_sub')}/>
        <div style={sectStyles.tabs}>
          {[
            { id: 'all', label: t('cars_all'), count: cars.length },
            { id: 'economy', label: t('cars_economy'), count: economyCount },
            { id: 'luxury', label: t('cars_luxury'), count: luxuryCount },
          ].map(tb => (
            <button key={tb.id} onClick={()=>setTab(tb.id)}
                    style={{ ...sectStyles.tab, ...(tab === tb.id ? sectStyles.tabActive : null)}}>
              {tb.label}
              <span style={sectStyles.tabCount}>{tb.count}</span>
            </button>
          ))}
        </div>
        <div style={sectStyles.grid}>
          {filtered.map(c => <CarCard key={c.id} car={c} tweaks={tweaks}/>)}
        </div>
      </div>
    </section>
  );
}

const sectStyles = {
  section: { paddingTop: 80, paddingBottom: 100 },
  tabs: { display: 'flex', gap: 6, marginBottom: 32, flexWrap: 'wrap' },
  tab: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '10px 18px', borderRadius: 999,
    fontSize: 14, fontWeight: 500,
    border: '1px solid var(--line)', background: '#fff', color: 'var(--muted)',
    transition: 'all .15s', cursor: 'pointer',
  },
  tabActive: { background: 'var(--green)', color: '#fff', borderColor: 'var(--green)' },
  tabCount: { fontSize: 11, opacity: 0.7, fontWeight: 600 },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 20 },
};

function SectionHead({ eyebrow, title, sub, align = 'start' }) {
  return (
    <div style={{
      marginBottom: 40,
      display: 'flex', flexDirection: 'column',
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align === 'center' ? 'center' : 'start',
    }}>
      <div style={{ fontSize: 12, color: 'var(--red)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 12 }}>{eyebrow}</div>
      <h2 style={{ margin: 0, fontSize: 'clamp(30px, 4vw, 46px)', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--green-deep)', lineHeight: 1.05, textWrap: 'balance' }}>{title}</h2>
      {sub && <p style={{ margin: '14px 0 0', fontSize: 16, color: 'var(--muted)', maxWidth: 560, lineHeight: 1.55 }}>{sub}</p>}
    </div>
  );
}

/* ---- WHY US ---- */
function WhyUs() {
  const { t } = useI18n();
  const items = [
    { icon: <Icon.Bolt width="22" height="22"/>,    title: t('why_1_t'), body: t('why_1_b') },
    { icon: <Icon.Tag width="22" height="22"/>,     title: t('why_2_t'), body: t('why_2_b') },
    { icon: <Icon.Headset width="22" height="22"/>, title: t('why_3_t'), body: t('why_3_b') },
    { icon: <Icon.Shield width="22" height="22"/>,  title: t('why_4_t'), body: t('why_4_b') },
  ];
  return (
    <section style={{ background: 'var(--green-deep)', color: '#fff', padding: '100px 0', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', insetInlineStart: -100, bottom: -100, width: 400, height: 400, opacity: 0.15, pointerEvents: 'none' }}>
        <ZelligePattern color="#fff"/>
      </div>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 640, marginBottom: 48 }}>
          <div style={{ fontSize: 12, color: '#fff', opacity: 0.6, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 12 }}>{t('why_eyebrow')}</div>
          <h2 style={{ margin: 0, fontSize: 'clamp(30px, 4vw, 46px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, textWrap: 'balance' }}>
            {t('why_title_1')} <span style={{ fontStyle: 'italic', fontWeight: 400, opacity: 0.85 }}>{t('why_title_2')}</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 1, background: 'rgba(255,255,255,0.1)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ background: 'var(--green-deep)', padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{it.icon}</div>
              <div>
                <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>{it.title}</h3>
                <p style={{ margin: '8px 0 0', fontSize: 14, opacity: 0.72, lineHeight: 1.55 }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- REVIEWS ---- */
function Stars({ n = 5 }) {
  return (
    <div style={{ display: 'inline-flex', gap: 2, color: 'var(--red)' }}>
      {Array.from({ length: 5 }).map((_, i) => <Icon.Star key={i} width="14" height="14" filled={i < n}/>)}
    </div>
  );
}

function Reviews() {
  const { t } = useI18n();
  const reviews = [
    { n: 'Yassine B.', loc: 'Casablanca',         text: t('rev_1'), trip: t('trip_1') },
    { n: 'Sarah L.',   loc: 'Paris → Marrakech',   text: t('rev_2'), trip: t('trip_2') },
    { n: 'Omar K.',    loc: 'Rabat',               text: t('rev_3'), trip: t('trip_3') },
    { n: 'Emma W.',    loc: 'London → Agadir',     text: t('rev_4'), trip: t('trip_4') },
    { n: 'Mehdi A.',   loc: 'Tangier',             text: t('rev_5'), trip: t('trip_5') },
  ];
  return (
    <section style={{ background: 'var(--cream)', padding: '100px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, gap: 24, flexWrap: 'wrap' }}>
          <SectionHead eyebrow={t('rev_eyebrow')} title={t('rev_title')}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 18px', background: '#fff', border: '1px solid var(--line)', borderRadius: 999, boxShadow: 'var(--shadow-sm)' }}>
            <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--green)', letterSpacing: '-0.02em' }}>4.9</div>
            <div>
              <Stars n={5}/>
              <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{t('rev_badge_sub')}</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {reviews.map((r, i) => (
            <article key={i} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Stars n={5}/>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--ink)' }}>"{r.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 14, borderTop: '1px solid var(--line)', marginTop: 'auto' }}>
                <div style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--green-soft)', color: 'var(--green)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600 }}>
                  {r.n.split(' ').map(p => p[0]).join('')}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{r.n}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{r.loc} · {r.trip}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- ABOUT ---- */
function About() {
  const { t } = useI18n();
  const media = useMedia();
  return (
    <section id="about" style={{ padding: '100px 0' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, color: 'var(--red)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 12 }}>{t('about_eyebrow')}</div>
          <h2 style={{ margin: 0, fontSize: 'clamp(28px, 3.2vw, 40px)', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--green-deep)', lineHeight: 1.1, textWrap: 'balance' }}>{t('about_title')}</h2>
          <p style={{ margin: '20px 0 28px', fontSize: 16, lineHeight: 1.7, color: 'var(--muted)', maxWidth: 520 }}>{t('about_body')}</p>
          <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--green)', letterSpacing: '-0.02em' }}>2019</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{t('about_founded')}</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--green)', letterSpacing: '-0.02em' }}>9</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{t('about_locations')}</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--green)', letterSpacing: '-0.02em' }}>30k+</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{t('about_trips')}</div>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative', background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', aspectRatio: '4/5', overflow: 'hidden', display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
          {media.about ? (
            <img src={media.about} alt="Atlas drive"
                 style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius-lg)' }}/>
          ) : (
            <React.Fragment>
              <MoroccoMap/>
              <div className="mono" style={{ position: 'absolute', bottom: 16, insetInlineStart: 16, fontSize: 11, color: 'var(--muted)', opacity: 0.6 }}>[ photo · Atlas drive ]</div>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

function MoroccoMap() {
  const pins = [
    { x: 35, y: 25, label: 'Tangier' }, { x: 28, y: 38, label: 'Casablanca' },
    { x: 40, y: 32, label: 'Rabat' }, { x: 38, y: 52, label: 'Marrakech' },
    { x: 55, y: 38, label: 'Fes' }, { x: 28, y: 72, label: 'Agadir' },
  ];
  return (
    <svg viewBox="0 0 100 120" style={{ width: '100%', height: '100%' }} dir="ltr">
      <path d="M18 12 Q30 8 48 14 Q62 18 72 28 Q80 36 76 48 Q78 58 70 68 Q62 78 52 84 Q44 92 32 98 Q22 102 16 94 Q12 82 16 70 Q12 58 14 46 Q10 32 18 12 Z" fill="#fff" stroke="#0B3D2E" strokeWidth="0.6" opacity="0.9"/>
      {pins.map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="1.8" fill="#C1272D"/>
          <circle cx={p.x} cy={p.y} r="4" fill="#C1272D" opacity="0.2"/>
          <text x={p.x + 3.5} y={p.y + 1.2} fontSize="2.6" fontFamily="Inter" fill="#0B3D2E" fontWeight="500">{p.label}</text>
        </g>
      ))}
    </svg>
  );
}

/* ---- FAQ ---- */
function FAQ() {
  const { t } = useI18n();
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: t('faq_1_q'), a: t('faq_1_a') }, { q: t('faq_2_q'), a: t('faq_2_a') },
    { q: t('faq_3_q'), a: t('faq_3_a') }, { q: t('faq_4_q'), a: t('faq_4_a') },
    { q: t('faq_5_q'), a: t('faq_5_a') }, { q: t('faq_6_q'), a: t('faq_6_a') },
  ];
  return (
    <section id="faq" style={{ background: 'var(--cream)', padding: '100px 0' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'flex-start' }}>
        <div>
          <SectionHead eyebrow={t('faq_eyebrow')} title={t('faq_title')} sub={t('faq_sub')}/>
          <a href={waLink('Hello, I have a question.')} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: '#fff', padding: '12px 18px', background: '#25D366', borderRadius: 999, boxShadow: '0 4px 12px rgba(37,211,102,0.25)' }}>
            <Icon.Whatsapp width="16" height="16"/>
            {t('faq_cta')}
          </a>
        </div>
        <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: i === items.length - 1 ? 'none' : '1px solid var(--line)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', textAlign: 'start', padding: '22px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, fontSize: 16, fontWeight: 500, color: 'var(--ink)', cursor: 'pointer' }}>
                  <span>{it.q}</span>
                  <span style={{ width: 32, height: 32, borderRadius: 999, background: isOpen ? 'var(--green)' : 'var(--green-soft)', color: isOpen ? '#fff' : 'var(--green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all .2s' }}>
                    {isOpen ? <Icon.Minus width="16" height="16"/> : <Icon.Plus width="16" height="16"/>}
                  </span>
                </button>
                <div style={{ maxHeight: isOpen ? 220 : 0, overflow: 'hidden', transition: 'max-height .3s ease' }}>
                  <p style={{ margin: 0, padding: '0 24px 22px', fontSize: 15, lineHeight: 1.6, color: 'var(--muted)', maxWidth: 560 }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---- FOOTER ---- */
function Footer() {
  const { t } = useI18n();
  const waNum = (typeof localStorage !== 'undefined' && localStorage.getItem('alz_whatsapp')) || '212708006377';
  const phone = (typeof localStorage !== 'undefined' && localStorage.getItem('alz_phone')) || '+212 708 006 377';
  return (
    <footer id="contact" style={{ background: 'var(--green-deep)', color: '#fff', padding: '80px 0 40px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', insetInlineEnd: -120, top: -120, width: 400, height: 400, opacity: 0.1, pointerEvents: 'none' }}>
        <ZelligePattern color="#fff"/>
      </div>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <Logo light/>
            <p style={{ margin: '16px 0 24px', fontSize: 14, opacity: 0.7, lineHeight: 1.6, maxWidth: 300 }}>{t('foot_tagline')}</p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <a href={`https://wa.me/${waNum}`} target="_blank" rel="noopener" style={footStyles.whatsapp}>
                <Icon.Whatsapp width="16" height="16"/>
                <span dir="ltr">{phone}</span>
              </a>
              <a href={`tel:${phone.replace(/\s/g,'')}`} style={footStyles.phone}>
                <Icon.Phone width="14" height="14"/>
                <span dir="ltr">{phone}</span>
              </a>
            </div>
          </div>
          <FootCol title={t('foot_explore')} links={[t('foot_home'), t('nav_cars'), t('foot_economy'), t('foot_luxury'), t('nav_contact')]}/>
          <FootCol title={t('foot_company')} links={[t('about_eyebrow'), t('foot_locations'), t('foot_partners')]}/>
          <FootCol title={t('foot_support')} links={[t('faq_eyebrow'), t('foot_terms'), t('foot_insurance'), t('foot_privacy')]}/>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 32, fontSize: 12, opacity: 0.6, flexWrap: 'wrap', gap: 12 }}>
          <div>{t('foot_copy')}</div>
          <div>{t('foot_made')} · <a href="admin.html" style={{ opacity: 0.7 }}>Admin</a></div>
        </div>
      </div>
    </footer>
  );
}

const footStyles = {
  whatsapp: { display: 'inline-flex', alignItems: 'center', gap: 8, background: '#25D366', color: '#fff', padding: '10px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600 },
  phone: { display: 'inline-flex', alignItems: 'center', gap: 8, border: '1px solid rgba(255,255,255,0.2)', color: '#fff', padding: '10px 14px', borderRadius: 999, fontSize: 13, fontWeight: 500 },
};

function FootCol({ title, links }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 16, opacity: 0.7 }}>{title}</div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map((l, i) => <li key={i}><a href="#" style={{ fontSize: 14, opacity: 0.8 }}>{l}</a></li>)}
      </ul>
    </div>
  );
}

/* ---- NAV ---- */
function Logo({ light }) {
  const color = light ? '#fff' : 'var(--green-deep)';
  return (
    <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg width="34" height="34" viewBox="0 0 34 34">
        <rect x="1" y="1" width="32" height="32" rx="9" fill={light ? 'rgba(255,255,255,0.1)' : 'var(--green)'} stroke={light ? 'rgba(255,255,255,0.2)' : 'none'}/>
        <path d="M11 23 L17 9 L23 23 M13.5 18 L20.5 18" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <span style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', color }}>ALZ</span>
      <span style={{ fontSize: 10, fontWeight: 500, letterSpacing: '0.15em', color: light ? 'rgba(255,255,255,0.5)' : 'var(--muted)', textTransform: 'uppercase', marginInlineStart: 2, marginTop: 4 }}>Morocco</span>
    </a>
  );
}

function Nav() {
  const { t } = useI18n();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.9)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(180%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px) saturate(180%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all .2s',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 24px' }}>
        <Logo/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, fontSize: 14 }}>
          <a href="#cars" style={{ fontWeight: 500 }}>{t('nav_cars')}</a>
          <a href="#about" style={{ fontWeight: 500 }}>{t('nav_about')}</a>
          <a href="#faq" style={{ fontWeight: 500 }}>{t('nav_faq')}</a>
          <a href="#contact" style={{ fontWeight: 500 }}>{t('nav_contact')}</a>
          <LangSwitcher/>
          <a href={waLink('Hello ALZ!')} target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '10px 18px', borderRadius: 999,
            background: '#25D366', color: '#fff', fontWeight: 600,
            boxShadow: '0 4px 12px rgba(37,211,102,0.25)',
          }}>
            <Icon.Whatsapp width="14" height="14"/>
            {t('nav_whatsapp')}
          </a>
        </div>
      </div>
    </nav>
  );
}

function TopStrip() {
  const { t } = useI18n();
  return (
    <div style={{ background: 'var(--green-deep)', color: '#fff', fontSize: 12, fontWeight: 500, padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, opacity: 0.85, flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon.Check width="13" height="13"/> {t('top_cancel')}</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon.Check width="13" height="13"/> {t('top_mileage')}</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon.Check width="13" height="13"/> {t('top_delivery')}</span>
        </div>
      </div>
    </div>
  );
}

/* ---- FLOATING WHATSAPP ---- */
function FloatingWhatsapp() {
  const { t } = useI18n();
  const [expanded, setExpanded] = React.useState(false);
  React.useEffect(() => {
    const timer = setTimeout(() => setExpanded(true), 1500);
    return () => clearTimeout(timer);
  }, []);
  return (
    <a href={waLink('Hello ALZ, I would like more information.')}
       target="_blank" rel="noopener"
       onMouseEnter={()=>setExpanded(true)}
       style={{
         position: 'fixed', bottom: 24, insetInlineEnd: 24, zIndex: 100,
         display: 'inline-flex', alignItems: 'center', gap: 10,
         background: '#25D366', color: '#fff',
         padding: expanded ? '14px 20px 14px 14px' : 14,
         borderRadius: 999,
         boxShadow: '0 10px 24px rgba(37,211,102,0.4), 0 2px 6px rgba(0,0,0,0.1)',
         fontSize: 14, fontWeight: 600,
         transition: 'padding .25s ease',
       }}>
      <Icon.Whatsapp width="24" height="24"/>
      {expanded && <span style={{ whiteSpace: 'nowrap' }}>{t('wa_float_label')}</span>}
    </a>
  );
}

window.CarsSection = CarsSection;
window.WhyUs = WhyUs;
window.Reviews = Reviews;
window.About = About;
window.FAQ = FAQ;
window.Footer = Footer;
window.Nav = Nav;
window.TopStrip = TopStrip;
window.FloatingWhatsapp = FloatingWhatsapp;
window.Logo = Logo;