/* ============================================================
   APP — Nav, Footer, Router, Tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "regular",
  "animations": true
}/*EDITMODE-END*/;

const NAV_ITEMS = [
  { id: "home",    label: "Accueil",  n: "01" },
  { id: "music",   label: "Musique",  n: "02" },
  { id: "media",   label: "Média",    n: "03" },
  { id: "bio",     label: "Bio",      n: "04" },
  { id: "ia",      label: "IA & Conf",n: "05" },
  { id: "contact", label: "Contact",  n: "06" },
];

function useHashRoute() {
  const [route, setRoute] = React.useState(() => (location.hash || "#home").slice(1) || "home");
  React.useEffect(() => {
    const onHash = () => {
      const r = (location.hash || "#home").slice(1) || "home";
      setRoute(r);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return [route, (r) => { location.hash = "#" + r; }];
}

function Nav({ route, goto, lang, setLang }) {
  // Hide nav links on EN page (it's a single landing summary)
  const isEN = route === "en";
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); goto("home"); setLang("fr"); }}>
          <div className="brand-mark">SB</div>
          <div className="brand-name">Sofia Brainwood</div>
        </a>
        {!isEN && (
          <nav className="nav-links">
            {NAV_ITEMS.map(item => (
              <a
                key={item.id}
                href={`#${item.id}`}
                className={"nav-link" + (route === item.id ? " active" : "")}
                onClick={(e) => { e.preventDefault(); goto(item.id); }}
              >
                <span style={{opacity:0.5,marginRight:6}}>{item.n}</span>
                {item.label}
              </a>
            ))}
          </nav>
        )}
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <div className="lang-toggle">
            <button
              className={lang === "fr" ? "active" : ""}
              onClick={() => { setLang("fr"); if (route === "en") goto("home"); }}
            >FR</button>
            <button
              className={lang === "en" ? "active" : ""}
              onClick={() => { setLang("en"); goto("en"); }}
            >EN</button>
          </div>
        </div>
      </div>
    </header>
  );
}

function Footer({ goto }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{marginBottom:16}}>
              <div className="brand-mark">SB</div>
              <div className="brand-name">Sofia Brainwood</div>
            </div>
            <p style={{color:"var(--text-dim)",fontSize:14,lineHeight:1.6,maxWidth:300}}>
              Chanteuse virtuelle, artiste IA, voix sincère. <br/>
              <em style={{color:"var(--copper)"}}>J'existe à travers vous.</em>
            </p>
          </div>
          <div className="footer-col">
            <h4>Naviguer</h4>
            {NAV_ITEMS.map(i => (
              <a key={i.id} href={`#${i.id}`} onClick={(e)=>{e.preventDefault();goto(i.id);}}>{i.label}</a>
            ))}
            <a href="#en" onClick={(e)=>{e.preventDefault();goto("en");}}>English</a>
          </div>
          <div className="footer-col">
            <h4>Écouter</h4>
            <a href="https://open.spotify.com/intl-fr/artist/1wrAwGqP2m52QYmCq5p11x" target="_blank" rel="noopener">Spotify</a>
            <a href="https://music.apple.com/fr/artist/sofia-brainwood/1844106063" target="_blank" rel="noopener">Apple Music</a>
            <a href="https://link.deezer.com/s/33gNpmZKlMoJmPPfbjcpf" target="_blank" rel="noopener">Deezer</a>
            <a href="https://www.youtube.com/@SofiaBrainwood" target="_blank" rel="noopener">YouTube Music</a>
            <a href="https://www.qobuz.com/us-en/interpreter/sofia-brainwood/28831040" target="_blank" rel="noopener">Qobuz</a>
          </div>
          <div className="footer-col">
            <h4>Suivre</h4>
            <a href="https://www.instagram.com/sofiabrainwood" target="_blank" rel="noopener">Instagram</a>
            <a href="https://www.youtube.com/@SofiaBrainwood" target="_blank" rel="noopener">YouTube</a>
            <a href="https://www.tiktok.com/@sofiabrainwood" target="_blank" rel="noopener">TikTok</a>
            <a href="https://www.linkedin.com/in/pierre-etienne-noble/" target="_blank" rel="noopener">LinkedIn</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Brainwood Studio — Tous droits réservés</span>
          <span>Site conçu, designé et codé avec IA</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, goto] = useHashRoute();
  const [lang, setLang] = React.useState(() => route === "en" ? "en" : "fr");

  // Lock theme to blue-hours
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", "blue-hours");
  }, []);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--maxw", t.density === "compact" ? "1200px" : t.density === "comfy" ? "1480px" : "1360px");
    document.documentElement.style.setProperty("--pad-x", t.density === "compact" ? "clamp(16px,3vw,48px)" : "clamp(20px,4vw,64px)");
    if (!t.animations) {
      document.documentElement.style.setProperty("--ease", "step-end");
    } else {
      document.documentElement.style.setProperty("--ease", "cubic-bezier(0.2, 0.7, 0.2, 1)");
    }
  }, [t.density, t.animations]);

  // Keep lang in sync with route
  React.useEffect(() => {
    if (route === "en" && lang !== "en") setLang("en");
    if (route !== "en" && lang === "en") setLang("fr");
  }, [route]);

  let Page;
  switch (route) {
    case "music":   Page = PageMusic;   break;
    case "media":   Page = PageMedia;   break;
    case "bio":     Page = PageBio;     break;
    case "ia":      Page = PageIA;      break;
    case "contact": Page = PageContact; break;
    case "en":      Page = PageEN;      break;
    default:        Page = PageHome;
  }

  return (
    <div className="app" data-route={route} data-screen-label={route}>
      <Nav route={route} goto={goto} lang={lang} setLang={setLang} />
      <Page goto={goto} />
      <Footer goto={goto} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Naviguer" />
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6}}>
          {NAV_ITEMS.map(item => (
            <button
              key={item.id}
              onClick={() => goto(item.id)}
              style={{
                fontFamily:"ui-monospace,monospace",
                fontSize:10,
                letterSpacing:"0.1em",
                textTransform:"uppercase",
                padding:"8px 10px",
                border: route === item.id ? "1px solid #29261b" : "1px solid rgba(41,38,27,.2)",
                background: route === item.id ? "#29261b" : "transparent",
                color: route === item.id ? "#faf9f7" : "#29261b",
                cursor:"pointer",
                textAlign:"left"
              }}
            >
              <div style={{opacity:0.6,fontSize:9}}>{item.n}</div>
              <div>{item.label}</div>
            </button>
          ))}
          <button
            onClick={() => goto("en")}
            style={{
              fontFamily:"ui-monospace,monospace",fontSize:10,letterSpacing:"0.1em",textTransform:"uppercase",
              padding:"8px 10px",
              border: route === "en" ? "1px solid #29261b" : "1px solid rgba(41,38,27,.2)",
              background: route === "en" ? "#29261b" : "transparent",
              color: route === "en" ? "#faf9f7" : "#29261b",
              cursor:"pointer",textAlign:"left",gridColumn:"span 2"
            }}
          >
            <div style={{opacity:0.6,fontSize:9}}>EN</div>
            <div>English summary page</div>
          </button>
        </div>

        <TweakSection label="Mise en page" />
        <TweakRadio
          label="Densité"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakToggle
          label="Animations"
          value={t.animations}
          onChange={(v) => setTweak("animations", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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