// app-chrome.jsx — wordmark, layout shell, control bar
const { useState: useStateA, useEffect: useEffectA } = React;

function Wordmark({ height = 22 }) {
  // Letterforms follow the theme foreground; the compass "O" picks up the active accent.
  return (
    <svg height={height} viewBox="0 0 597 138" fill="none" style={{ color: "var(--foreground)", display: "block" }} aria-label="Merion">
      <path d="M326.322 119.724V17.6418H346.128V119.724H326.322Z" fill="currentColor"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M223.521 119.724V17.6418H260.299C267.278 17.6418 273.455 19.0515 278.83 21.871C284.205 24.6904 288.402 28.5792 291.419 33.5375C294.437 38.3986 295.946 44.086 295.946 50.5998C295.946 57.0164 294.343 62.7524 291.137 67.8079C288.025 72.7662 283.734 76.6551 278.264 79.4745C274.413 81.391 270.189 82.6328 265.59 83.2001L296.135 119.724H273.384L242.901 83.5578V119.724H223.521ZM260.441 65.3288H242.901V35.8708H259.451C264.26 35.8708 268.174 37.2319 271.191 39.9541C274.303 42.6763 275.859 46.2249 275.859 50.5998C275.859 53.4192 275.152 55.947 273.738 58.1831C272.417 60.4191 270.578 62.1691 268.221 63.433C265.958 64.6969 263.364 65.3288 260.441 65.3288Z" fill="currentColor"/>
      <path d="M130.152 119.724V17.6418H193.341V35.8708H149.518V59.058H183.91V76.8495H149.518V101.495H193.341V119.724H130.152Z" fill="currentColor"/>
      <path d="M0 119.724V17.6418H21.1287L50.0567 61.683L78.9846 17.6418H99.9716V119.724H80.6863V48.8498L50.0567 95.2243L19.4271 48.9957V119.724H0Z" fill="currentColor"/>
      <path d="M597 119.724V17.6418H576.585L527.761 86.1827V17.6418H508.346V119.724H527.761L577.442 49.8706V119.724H597Z" fill="currentColor"/>
      <path d="M478.166 0L457.248 27.758C469.929 37.0418 478.166 52.0568 478.166 69C478.166 96.5445 456.395 118.993 429.158 120.005C427.889 120.053 426.625 120.257 425.427 120.679L376.308 138L397.224 110.241C384.545 100.957 376.308 85.9427 376.308 69C376.308 41.4555 398.079 19.0071 425.315 17.9946C426.585 17.9474 427.849 17.7431 429.047 17.3206L478.166 0ZM427.237 38.375C410.361 38.375 396.679 52.0865 396.679 69C396.679 85.9135 410.361 99.625 427.237 99.625C444.113 99.625 457.795 85.9135 457.795 69C457.795 52.0865 444.113 38.375 427.237 38.375Z" fill="var(--brand)"/>
    </svg>
  );
}

const NEONS = [
  { id: "cyan", label: "Merion (primária)", c: "#00FFD4", primary: true },
  { id: "lime", label: "Lime", c: "#D4FF00" },
  { id: "pink", label: "Pink", c: "#ED145B" },
  { id: "violet", label: "Violet", c: "#5F37FF" },
  { id: "magenta", label: "Magenta", c: "#FF00FF" },
  { id: "orange", label: "Orange", c: "#FF8C00" },
];
const DIRECTIONS = [
  { id: "soft", label: "Soft" },
  { id: "structural", label: "Estrutural" },
  { id: "glow", label: "Glow" },
];

function usePersist(key, init) {
  const [v, setV] = useStateA(() => { try { return localStorage.getItem(key) || init; } catch (e) { return init; } });
  useEffectA(() => { try { localStorage.setItem(key, v); } catch (e) {} }, [key, v]);
  return [v, setV];
}

function ControlBar({ theme, setTheme, direction, setDirection, neon, setNeon }) {
  return (
    <div className="ctl-bar">
      <div className="ctl-group">
        <span className="ctl-lbl">Tema</span>
        <div className="seg">
          <button className="seg-btn" data-active={theme === "light"} onClick={() => setTheme("light")}><Icon name="sun" />Light</button>
          <button className="seg-btn" data-active={theme === "dark"} onClick={() => setTheme("dark")}><Icon name="moon" />Dark</button>
        </div>
      </div>
      <div className="ctl-group">
        <span className="ctl-lbl">Direção</span>
        <div className="seg">
          {DIRECTIONS.map((d) => <button key={d.id} className="seg-btn" data-active={direction === d.id} onClick={() => setDirection(d.id)}>{d.label}</button>)}
        </div>
      </div>
      <div className="ctl-group">
        <span className="ctl-lbl">Solução</span>
        <div className="neon-row">
          {NEONS.map((n) => (
            <React.Fragment key={n.id}>
              {n.primary === undefined && NEONS[0].id === "cyan" && n.id === "lime" && <span className="neon-div" />}
              <button className="neon-sw" data-active={neon === n.id} data-primary={!!n.primary} title={n.label}
                style={{ background: n.c }} onClick={() => setNeon(n.id)} />
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

function Section({ id, kicker, title, desc, children }) {
  return (
    <section id={id} className="ds-section">
      <header className="ds-section-head">
        <div className="ds-kicker">{kicker}</div>
        <h2 className="ds-title">{title}</h2>
        {desc && <p className="ds-desc">{desc}</p>}
      </header>
      {children}
    </section>
  );
}

function Well({ title, children, cols }) {
  return (
    <div className="well">
      {title && <div className="well-label">{title}</div>}
      <div className="well-body" style={cols ? { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 18 } : null}>{children}</div>
    </div>
  );
}

Object.assign(window, { Wordmark, ControlBar, Section, Well, NEONS, DIRECTIONS, usePersist });