/* global React, ReactDOM, Header, Hero, ServicesGrid, CaseStudyGrid, ResultsBand, ValuesList, ContactSection, Footer */
const { useState: useAppState } = React;

function CaseModal({ c, onClose }) {
  if (!c) return null;
  return (
    <div className="fn-modal" onClick={onClose}>
      <div className="fn-modal-card" onClick={(e)=>e.stopPropagation()}>
        <button className="fn-modal-close" onClick={onClose}>Fermer ✕</button>
        <div className="fn-modal-img" style={{backgroundImage: `url(${c.img})`}}/>
        <div className="fn-modal-body">
          <span className="caption" style={{color: "var(--accent)"}}>{c.cat} · {c.year}</span>
          <h2 className="display-m">{c.title}</h2>
          <span className="caption">{c.loc}</span>
          <p className="lead" style={{marginTop: 12}}>
            Reportage cuisine et déclinaison réseaux sociaux pour la maison.
            Photo, vidéo, motion et calendrier éditorial sur 6 mois.
          </p>
          <ul className="fn-service-items" style={{marginTop: 8}}>
            <li><span className="fn-bullet">—</span> Reportage 2 jours sur place</li>
            <li><span className="fn-bullet">—</span> 12 reels · 40 photos · 3 motion</li>
            <li><span className="fn-bullet">—</span> Distribution Instagram + TikTok</li>
            <li><span className="fn-bullet">—</span> Reporting mensuel</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [active, setActive] = useAppState("home");
  const [openCase, setOpenCase] = useAppState(null);

  const onNav = (k) => {
    setActive(k);
    const el = document.getElementById(k);
    if (el) el.scrollIntoView({behavior: "smooth", block: "start"});
  };

  return (
    <div className="fn-app fennec-page">
      <Header active={active} onNav={onNav}/>
      <main>
        <div id="home"/>
        <Hero onCta={() => onNav("contact")}/>
        <ServicesGrid/>
        <CaseStudyGrid onOpen={(c)=>setOpenCase(c)}/>
        <ResultsBand/>
        <ValuesList/>
        <ContactSection/>
      </main>
      <Footer/>
      <CaseModal c={openCase} onClose={()=>setOpenCase(null)}/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);