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

// ============================================================
// Logo — image officielle (fond transparent) — taille agrandie
// ============================================================
const NofyMark = ({ size = 56 }) => (
  <img src="assets/logo-nofy.png" alt="Nof'y"
       style={{height: size, width:'auto', display:'block'}}/>
);

const NofyWordmark = () => (
  <NofyMark size={40}/>
);

// ============================================================
// Icons (line-style, simples, cohérents)
// ============================================================
const Icon = ({ name, size = 22 }) => {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    web: <><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18"/><path d="M7 18v3M17 18v3M7 21h10"/></>,
    app: <><rect x="7" y="2" width="10" height="20" rx="2.5"/><path d="M11 18h2"/></>,
    learn: <><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M7 9.5V14c0 1.5 2.5 3 5 3s5-1.5 5-3V9.5"/></>,
    arrow: <><path d="M5 12h14M13 5l7 7-7 7"/></>,
    arrowUp: <><path d="M7 17L17 7M9 7h8v8"/></>,
    spark: <><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <><path d="M5 12h14"/></>,
    check: <><path d="M5 12l4 4L19 6"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    phone: <><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></>,
    pin: <><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
};

// ============================================================
// Theme toggle
// ============================================================
const ThemeToggle = () => {
  const [theme, setTheme] = useState(() => {
    if (typeof document === 'undefined') return 'light';
    return document.documentElement.getAttribute('data-theme') || 'light';
  });
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('nofy-theme', theme); } catch(e) {}
  }, [theme]);
  const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
  return (
    <button className="theme-toggle" onClick={toggle} aria-label="Basculer thème" title={theme === 'dark' ? 'Passer en mode clair' : 'Passer en mode sombre'}>
      {theme === 'dark' ? (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
        </svg>
      ) : (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      )}
    </button>
  );
};

// ============================================================
// Navigation
// ============================================================
const Nav = ({ page, setPage }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    ['home', 'Accueil'],
    ['services', 'Services'],
    ['pricing', 'Tarifs'],
    ['about', 'À propos'],
    ['blog', 'Blog'],
  ];
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="shell nav-inner">
        <a href="#" onClick={(e)=>{e.preventDefault(); setPage('home');}} className="nav-logo">
          <NofyMark size={56}/>
        </a>
        <div className="nav-links">
          {items.map(([id, label]) => (
            <a key={id} href={`#${id}`}
               onClick={(e)=>{e.preventDefault(); setPage(id);}}
               className={`nav-link ${page===id?'active':''}`}>
              {label}
            </a>
          ))}
        </div>
        <a href="#contact" onClick={(e)=>{e.preventDefault(); setPage('contact');}} className="nav-cta">
          Démarrer un projet
          <svg className="arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M3 9L9 3M5 3h4v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
      </div>
    </nav>
  );
};

// ============================================================
// Footer
// ============================================================
const Footer = ({ setPage }) => (
  <footer className="footer">
    <div className="shell">
      <div className="footer-top">
        <div className="footer-brand">
          <h3 style={{color:'#FFFFFF'}}>Propulser les entreprises vers <em style={{color:'var(--nofy-sky-300)'}}>l'ère 4.0.</em></h3>
          <p>Nof'y · Transformation digitale, IA, automatisation et cybersécurité au service de votre croissance.</p>
        </div>
        <div className="footer-col">
          <h5>Entreprise</h5>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('services');}}>Services</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('pricing');}}>Tarifs</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('about');}}>Notre approche</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('about');}}>Carrières</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Ressources</h5>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('blog');}}>Blog</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('blog');}}>Études de cas</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault(); setPage('services');}}>Catalogue formations</a></li>
            <li><a href="#">Newsletter</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:contact@nofy.tech">contact@nofy.tech</a></li>
            <li><a href="mailto:info@nofy.tech">info@nofy.tech</a></li>
            <li><a href="tel:+261379442212">+261 37 94 422 12</a></li>
            <li><a href="https://nofy.tech" target="_blank" rel="noopener">nofy.tech</a></li>
            <li>
              <a href="#" onClick={(e)=>{e.preventDefault(); setPage('contact');}}
                 style={{display:'inline-flex', alignItems:'center', gap:6, color:'var(--nofy-sky)'}}>
                 Prendre rendez-vous →
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2025 Nof'y · Tous droits réservés</span>
        <span>Mentions légales · Confidentialité · CGV</span>
      </div>
    </div>
  </footer>
);

// ============================================================
// Reveal on scroll wrapper
// ============================================================
const Reveal = ({ children, delay = 0 }) => {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add('in'), delay);
          obs.unobserve(el);
        }
      });
    }, { threshold: 0.1 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <div ref={ref} className="reveal">{children}</div>;
};

// ============================================================
// Placeholder visuals — utilisés à la place de vraies images
// ============================================================
const Placeholder = ({ kind = 'stripe', label }) => {
  const cls = kind === 'grid' ? 'ph-grid' : kind === 'deep' ? 'ph-deep' : 'ph-stripe';
  return (
    <>
      <div className={cls}/>
      {label && <div className="ph-label">{label}</div>}
    </>
  );
};

Object.assign(window, { NofyMark, NofyWordmark, Icon, Nav, Footer, Reveal, Placeholder, ThemeToggle });