/* global React, Icons */
const { useState, useEffect, useRef } = React;

// ---------- Logo (wordmark CSS) ----------
const Logo = ({ size = 22, withMark = false }) => (
  <span className="logo" style={{ fontSize: size }}>
    {withMark && <span className="logo-mark" style={{ marginRight: 10 }}>F</span>}
    <span>FLO</span>
    <span className="dot" />
    <span className="auto">AUTO</span>
  </span>
);

// ---------- Header ----------
const NAV = [
  { id: 'accueil', label: 'Accueil', num: '01' },
  { id: 'services', label: 'Services', num: '02' },
  { id: 'garage', label: 'Le Garage', num: '03' },
  { id: 'realisations', label: 'Réalisations', num: '04' },
  { id: 'contact', label: 'Contact', num: '05' },
];

const Header = ({ page, go }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <header className={`header ${scrolled ? 'scrolled' : ''}`}>
        <a className="header-left" onClick={() => go('accueil')} style={{ cursor: 'pointer' }}>
          <Logo size={20} withMark />
        </a>
        <nav className="header-nav">
          {NAV.map(n => (
            <a key={n.id} className={`nav-link ${page === n.id ? 'active' : ''}`} onClick={() => go(n.id)}>
              <span className="num">{n.num}</span>{n.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button className="btn btn-primary" onClick={() => go('contact')} style={{ padding: '12px 18px' }}>
            Prendre RDV
            <Icons.ArrowRight className="arrow" />
          </button>
          <button
            onClick={() => setOpen(true)}
            aria-label="Menu"
            style={{ display: 'none', padding: 6 }}
            className="mobile-menu-btn"
          >
            <Icons.Menu width="22" height="22" />
          </button>
        </div>
      </header>

      {/* Mobile menu */}
      {open && (
        <div className="mobile-menu" onClick={() => setOpen(false)}>
          <div className="mobile-menu-inner" onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
              <Logo size={20} withMark />
              <button onClick={() => setOpen(false)} style={{ padding: 8 }}>
                <Icons.X width="22" height="22" />
              </button>
            </div>
            {NAV.map(n => (
              <a key={n.id} className="mobile-nav-link" onClick={() => { go(n.id); setOpen(false); }}>
                <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 12, marginRight: 12 }}>{n.num}</span>
                {n.label}
              </a>
            ))}
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 880px) {
          .mobile-menu-btn { display: inline-flex !important; }
        }
        .mobile-menu {
          position: fixed; inset: 0; z-index: 100;
          background: rgba(7,17,38,0.7); backdrop-filter: blur(8px);
          animation: fadein 0.2s;
        }
        .mobile-menu-inner {
          position: absolute; right: 0; top: 0; bottom: 0;
          width: min(360px, 88vw);
          background: var(--nuit);
          padding: 24px;
          display: flex; flex-direction: column;
          border-left: 1px solid var(--gris-bordure);
          animation: slidein 0.25s cubic-bezier(.2,.7,.2,1);
        }
        .mobile-nav-link {
          padding: 16px 0;
          border-bottom: 1px solid var(--gris-bordure);
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 28px;
          text-transform: uppercase;
          letter-spacing: -0.01em;
          cursor: pointer;
        }
        @keyframes fadein { from { opacity:0; } to { opacity: 1; } }
        @keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
      `}</style>
    </>
  );
};

// ---------- Floating call ----------
const FloatingCall = () => (
  <a className="floating-call" href="tel:+33000000000">
    <Icons.Phone />
    <span>06 12 34 56 78</span>
  </a>
);

// ---------- Reveal on scroll ----------
const Reveal = ({ children, delay = 0, as: Tag = 'div', className = '', style = {}, ...rest }) => {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      entries => entries.forEach(e => {
        if (e.isIntersecting) { setSeen(true); io.disconnect(); }
      }),
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${seen ? 'in' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

// ---------- Image placeholder ----------
const ImgPlaceholder = ({ tag, label, icon: IconC = Icons.Image, height, style = {}, children }) => (
  <div className="img-placeholder" style={{ height, ...style }}>
    <span className="corner tl" /><span className="corner tr" />
    <span className="corner bl" /><span className="corner br" />
    {tag && <span className="ph-tag">{tag}</span>}
    <div className="ph-content">
      <IconC className="ph-icon" />
      {label && <span className="ph-label">{label}</span>}
    </div>
    {children}
  </div>
);

// ---------- Footer ----------
const Footer = ({ go }) => (
  <footer className="footer">
    <div className="footer-grid">
      <div className="footer-col">
        <Logo size={22} withMark />
        <p style={{ color: 'var(--gris-clair)', fontSize: 14, lineHeight: 1.6, marginTop: 16, maxWidth: 320 }}>
          Garage automobile sur rendez-vous à Bueil. Travail soigné, transparence, et le temps qu'il faut pour bien faire.
        </p>
        <div style={{ display: 'flex', gap: 16, marginTop: 20 }}>
          <span className="mono small" style={{ color: 'var(--gris-clair)' }}>EST. 2014</span>
          <span className="mono small" style={{ color: 'var(--accent)' }}>SUR RDV</span>
        </div>
      </div>
      <div className="footer-col">
        <h4>Navigation</h4>
        <ul>
          {NAV.map(n => (
            <li key={n.id}><a onClick={() => go(n.id)} style={{ cursor: 'pointer' }}>{n.label}</a></li>
          ))}
        </ul>
      </div>
      <div className="footer-col">
        <h4>Contact</h4>
        <ul>
          <li><a href="tel:+33000000000">06 12 34 56 78</a></li>
          <li><a href="mailto:contact@floauto.fr">contact@floauto.fr</a></li>
          <li style={{ color: 'var(--gris-clair)', fontSize: 14 }}>14 rue de l'Atelier<br/>27730 Bueil</li>
        </ul>
      </div>
      <div className="footer-col">
        <h4>Horaires</h4>
        <ul style={{ fontSize: 14, color: 'var(--gris-clair)' }}>
          <li>Lun — Ven : 8h–18h</li>
          <li>Sam : 9h–12h</li>
          <li>Dim : Fermé</li>
          <li style={{ color: 'var(--accent)', marginTop: 8 }} className="mono small">UNIQUEMENT SUR RDV</li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 FLO'AUTO — TOUS DROITS RÉSERVÉS</span>
      <span>BUEIL / 27730 / FR</span>
    </div>
  </footer>
);

// ---------- Section header (reusable label + title) ----------
const SectionHead = ({ eyebrow, title, lead, align = 'left' }) => (
  <div className={`section-head ${align}`} style={{ textAlign: align, marginBottom: 48 }}>
    {eyebrow && <Reveal><span className="eyebrow">{eyebrow}</span></Reveal>}
    {title && <Reveal delay={80}><h2 className="h-xl" style={{ marginTop: 16, marginBottom: 0 }}>{title}</h2></Reveal>}
    {lead && <Reveal delay={160}><p className="body-lg" style={{ marginTop: 20, color: 'var(--gris-clair)', maxWidth: 600, ...(align==='center' ? { marginLeft: 'auto', marginRight: 'auto' } : {}) }}>{lead}</p></Reveal>}
  </div>
);
// adapt color when on light
const SectionHeadLight = (p) => <SectionHead {...p} />;

window.UI = {
  Logo, Header, FloatingCall, Reveal, ImgPlaceholder, Footer, SectionHead,
  NAV,
};