/* global React, ReactDOM, Nav, Footer, Home, IDIAPage, ProgramPage, EventCasePage, WorkPage, CommunityCasePage, AboutPage, MediaPage, Icon, Slashes, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect, t */

const { useState, useEffect } = React;

// =====================================================
// Tweak defaults
// =====================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "kinetic",
  "motion": "standard",
  "accent": "#D97757",
  "lang": "en"
}/*EDITMODE-END*/;

// =====================================================
// Contact page — email handoff until a richer contact flow exists
// =====================================================
function ContactPage({ lang }) {
  const emailHref = "mailto:contact@immersia.ml";

  return (
    <main data-screen-label="Contact" style={{ background:"white", minHeight:"70vh" }}>
      <section style={{ position:"relative",overflow:"hidden",background:"linear-gradient(180deg,var(--bg-subtle) 0%,white 100%)",padding:"120px 0" }}>
        <div aria-hidden style={{ position:"absolute",right:-40,top:10 }}><Slashes size="min(38vw,420px)" color="rgba(124,58,237,.08)"/></div>
        <div className="container-wide contact-grid" style={{ position:"relative",zIndex:1,display:"grid",gridTemplateColumns:"1.25fr .75fr",gap:80,alignItems:"end" }}>
          <div>
            <h1 style={{ fontSize:"clamp(58px,8vw,118px)",lineHeight:.94,letterSpacing:"-.045em",margin:"0 0 28px",maxWidth:960 }}>
              {lang === "fr" ? <>Construisons quelque chose <span style={{color:"var(--brand)"}}>d'utile ensemble</span>.</> : <>Let’s build something <span style={{color:"var(--brand)"}}>useful together</span>.</>}
            </h1>
            <p className="lead" style={{ maxWidth:720,marginBottom:38 }}>
              {lang === "fr" ? "Parlez-nous d'une formation, d'un programme communautaire, d'une initiative d'IA responsable ou d'un partenariat." : "Tell us about a training program, community initiative, responsible AI project, or partnership."}
            </p>
            <a href={emailHref} className="btn btn-primary">
              <Icon name="mail" size={17}/>{lang === "fr" ? "Écrivez-nous" : "Email us"}
            </a>
          </div>
          <aside style={{ borderTop:"1px solid var(--line-1)" }}>
            <div style={{ padding:"26px 0",borderBottom:"1px solid var(--line-1)" }}>
              <div style={{ fontSize:12,fontWeight:700,letterSpacing:".12em",textTransform:"uppercase",color:"var(--fg-3)",marginBottom:10 }}>{lang === "fr" ? "E-mail" : "Email"}</div>
              <a href={emailHref} style={{ fontFamily:"var(--font-display)",fontSize:"clamp(20px,2vw,28px)",fontWeight:700,color:"var(--brand)",borderBottom:"none",overflowWrap:"anywhere" }}>contact@immersia.ml</a>
            </div>
            <div style={{ padding:"26px 0",borderBottom:"1px solid var(--line-1)" }}>
              <div style={{ fontSize:12,fontWeight:700,letterSpacing:".12em",textTransform:"uppercase",color:"var(--fg-3)",marginBottom:10 }}>{lang === "fr" ? "Adresse" : "Location"}</div>
              <div style={{ fontFamily:"var(--font-display)",fontSize:19,fontWeight:600 }}>Sotuba ACI · Bamako, Mali</div>
            </div>
          </aside>
        </div>
      </section>
      <style>{`@media(max-width:860px){.contact-grid{grid-template-columns:1fr!important;gap:64px!important}}`}</style>
    </main>
  );
}

// =====================================================
// Stub page for non-prototyped routes
// =====================================================
function StubPage({ title, sub, lang, navigate }) {
  return (
    <main data-screen-label={title} style={{ background: "white", minHeight: "70vh" }}>
      <section style={{
        position: "relative", overflow: "hidden",
        background: "linear-gradient(180deg, var(--bg-subtle) 0%, white 100%)",
        padding: "120px 0 100px",
      }}>
        <div aria-hidden style={{ position: "absolute", right: -40, top: 0 }}>
          <Slashes size="min(36vw, 380px)" color="rgba(124,58,237,0.08)"/>
        </div>
        <div className="container-wide" style={{ position: "relative", zIndex: 1 }}>
          <span className="eyebrow-mark">{lang === "fr" ? "Page en construction" : "Page in progress"}</span>
          <h1 style={{ marginTop: 14, marginBottom: 20, textWrap: "balance", maxWidth: 900 }}>{title}</h1>
          <p className="lead" style={{ maxWidth: 620, marginBottom: 32 }}>{sub}</p>
          <a href="#home" onClick={(e) => { e.preventDefault(); navigate("home"); }}
             className="btn btn-ghost">
            <Icon name="arrow-right" size={14} style={{ transform: "rotate(180deg)" }}/>
            {lang === "fr" ? "Retour à l'accueil" : "Back to home"}
          </a>
        </div>
      </section>
    </main>
  );
}

const stubCopy = {
  about:   { fr: ["À propos", "ImmersIA est une initiative basée au Mali qui rend l'IA accessible, utile et responsable par la formation pratique, les communautés et l'engagement public."], en: ["About", "ImmersIA is a Mali-based initiative making AI accessible, useful, and responsible through hands-on training, communities, and public engagement."] },
  event:   { fr: ["Événements & activités", "Build sprints, Vibe Coding, masterclasses et rencontres de communauté à Bamako et en ligne."], en: ["Events & activities", "Build sprints, Vibe Coding, masterclasses, and community meetups in Bamako and online."] },
  media:   { fr: ["Médiathèque", "Photos, récapitulatifs et ressources issus de nos formations, communautés et consultations."], en: ["Media library", "Photographs, recaps, and resources from our training, communities, and consultations."] },
  blog:    { fr: ["Actualités", "Retrouvez les annonces et récapitulatifs publiés par ImmersIA sur LinkedIn."], en: ["News", "Find announcements and recaps published by ImmersIA on LinkedIn."] },
  join:    { fr: ["Nous rejoindre", "Participez à une formation, rejoignez la communauté ou construisez un programme avec nous."], en: ["Join us", "Attend a training, join the community, or build a program with us."] },
};

// =====================================================
// App
// =====================================================
function App() {
  const [route, setRoute] = useState(() => (location.hash || "#home").replace("#", "") || "home");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState("en");

  // English is the default on every fresh page load; French is a per-visit choice.
  useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  // Sync motion intensity to root
  useEffect(() => {
    document.documentElement.setAttribute("data-motion", tweaks.motion || "standard");
  }, [tweaks.motion]);

  // Sync warm accent CSS var
  useEffect(() => {
    document.documentElement.style.setProperty("--warm-accent", tweaks.accent);
    // derive soft tint
    const c = tweaks.accent;
    document.documentElement.style.setProperty("--warm-accent-soft", c + "33");
  }, [tweaks.accent]);

  // Hash-based router
  useEffect(() => {
    const onHash = () => {
      const r = (location.hash || "#home").replace("#", "") || "home";
      setRoute(r);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (r) => {
    if (r === route) {
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      location.hash = r;
    }
  };

  const renderPage = () => {
    switch (route) {
      case "home":    return <Home lang={lang} navigate={navigate} tweaks={tweaks}/>;
      case "about": return <AboutPage lang={lang} navigate={navigate}/>;
      case "idia":    return <IDIAPage lang={lang} navigate={navigate}/>;
      case "program": return <ProgramPage lang={lang} navigate={navigate}/>;
      case "event": return <WorkPage lang={lang} navigate={navigate}/>;
      case "vibe": return <EventCasePage lang={lang} navigate={navigate}/>;
      case "community": return <CommunityCasePage lang={lang} navigate={navigate}/>;
      case "media": return <MediaPage lang={lang} navigate={navigate}/>;
      case "contact": return <ContactPage lang={lang}/>;
      default: {
        const c = stubCopy[route];
        if (c) {
          const [title, sub] = c[lang];
          return <StubPage title={title} sub={sub} lang={lang} navigate={navigate}/>;
        }
        return <Home lang={lang} navigate={navigate} tweaks={tweaks}/>;
      }
    }
  };

  return (
    <>
      <Nav lang={lang} setLang={setLang}
           route={route} navigate={navigate}/>
      {renderPage()}
      <Footer lang={lang} navigate={navigate}/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio label="Treatment" value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "kinetic", label: "Kinetic" },
              { value: "stacked", label: "Editorial" },
            ]}/>
        </TweakSection>

        <TweakSection title="Motion">
          <TweakRadio label="Intensity" value={tweaks.motion}
            onChange={(v) => setTweak("motion", v)}
            options={[
              { value: "calm",     label: "Calm" },
              { value: "standard", label: "Standard" },
              { value: "kinetic",  label: "Kinetic" },
            ]}/>
        </TweakSection>

        <TweakSection title="Warm accent">
          <TweakColor label="Warm" value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#D97757", "#E5A300", "#1E40AF"]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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