// Songbook Master — Logo (Option C: Glyph B + Wordmark A typographic stack)
// Exposes window.SBM_LOGOS used by Logo Exploration.html and the app screens.

const PAPER = "#EFEAE0";
const PAPER_DARK = "#0E0D0B";
const INK = "#0A0A0A";
const CREAM = "#EFEAE0";
const CHORD_LIGHT = "#A02828";
const CHORD_DARK  = "#E89A6B";

const fontDisplay = '"Instrument Serif", "Times New Roman", serif';
const fontUI = '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif';
const fontMono = '"JetBrains Mono", ui-monospace, Menlo, monospace';

// ----- Glyph: geometric "S" with a string running through it -----
function SBMGlyph({ size = 200, fg = INK, accent = CHORD_LIGHT, strokeWidth = 22, stringWidth = 6 }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: "block" }}>
      <g fill="none" stroke={fg} strokeWidth={strokeWidth} strokeLinecap="square">
        <path d="M 158 60 A 40 40 0 1 0 100 100"/>
        <path d="M 42 140 A 40 40 0 1 0 100 100"/>
      </g>
      <line x1="20" y1="100" x2="180" y2="100" stroke={accent} strokeWidth={stringWidth} strokeLinecap="square"/>
      <circle cx="180" cy="100" r={Math.max(4, stringWidth)} fill={accent}/>
    </svg>
  );
}

// ----- Wordmark layouts -----
function WordmarkH({ fg, accent, size = "md" }) {
  const sz = size === "sm" ? { glyph: 44, title: 26, sub: 9, gap: 12, kern: "0.36em", subTop: 4 }
           : size === "lg" ? { glyph: 120, title: 72, sub: 13, gap: 24, kern: "0.42em", subTop: 8 }
           :                  { glyph: 64,  title: 38, sub: 10, gap: 14, kern: "0.4em",  subTop: 5 };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: sz.gap }}>
      <SBMGlyph size={sz.glyph} fg={fg} accent={accent} strokeWidth={sz.glyph >= 100 ? 22 : sz.glyph >= 60 ? 24 : 26} stringWidth={sz.glyph >= 100 ? 6 : 5}/>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 0.9 }}>
        <span style={{ fontFamily: fontDisplay, fontSize: sz.title, fontWeight: 400, color: fg, letterSpacing: "-0.025em" }}>Songbook</span>
        <span style={{ fontFamily: fontUI, fontSize: sz.sub, fontWeight: 800, letterSpacing: sz.kern, textTransform: "uppercase", color: fg, marginTop: sz.subTop }}>Master</span>
      </div>
    </div>
  );
}

function WordmarkStacked({ fg, accent, size = "md" }) {
  const sz = size === "lg" ? { glyph: 160, title: 64, sub: 13, gap: 18, kern: "0.5em", subTop: 8 }
           :                  { glyph: 120, title: 48, sub: 11, gap: 14, kern: "0.5em", subTop: 6 };
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: sz.gap }}>
      <SBMGlyph size={sz.glyph} fg={fg} accent={accent}/>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 0.95 }}>
        <span style={{ fontFamily: fontDisplay, fontSize: sz.title, fontWeight: 400, color: fg, letterSpacing: "-0.02em" }}>Songbook</span>
        <span style={{ fontFamily: fontUI, fontSize: sz.sub, fontWeight: 800, letterSpacing: sz.kern, textTransform: "uppercase", color: fg, marginTop: sz.subTop }}>Master</span>
      </div>
    </div>
  );
}

function WordmarksGrid() {
  return (
    <div style={{ width: "100%", height: "100%", display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr", gap: 0 }}>
      <div style={{ background: PAPER, padding: 48, display: "flex", alignItems: "center", justifyContent: "center", borderRight: `1px solid rgba(10,10,10,0.12)`, borderBottom: `1px solid rgba(10,10,10,0.12)` }}>
        <WordmarkH fg={INK} accent={CHORD_LIGHT} size="lg"/>
      </div>
      <div style={{ background: PAPER_DARK, padding: 48, display: "flex", alignItems: "center", justifyContent: "center", borderBottom: `1px solid rgba(239,234,224,0.18)` }}>
        <WordmarkH fg={CREAM} accent={CHORD_DARK} size="lg"/>
      </div>
      <div style={{ background: PAPER, padding: 48, display: "flex", alignItems: "center", justifyContent: "center", borderRight: `1px solid rgba(10,10,10,0.12)` }}>
        <WordmarkStacked fg={INK} accent={CHORD_LIGHT} size="lg"/>
      </div>
      <div style={{ background: PAPER_DARK, padding: 48, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <WordmarkStacked fg={CREAM} accent={CHORD_DARK} size="lg"/>
      </div>
    </div>
  );
}

// ----- App icon (geometric glyph) -----
function AppIcon({ mode = "light", size = 600 }) {
  const palettes = {
    light:  { bg: PAPER,      fg: INK,   accent: CHORD_LIGHT },
    dark:   { bg: PAPER_DARK, fg: CREAM, accent: CHORD_DARK  },
    accent: { bg: INK,        fg: CREAM, accent: CHORD_DARK  },
  };
  const p = palettes[mode];
  return (
    <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
      <AppIconRaw mode={mode} size={size}/>
    </div>
  );
}

function AppIconRaw({ mode = "light", size = 180 }) {
  const palettes = {
    light:  { bg: PAPER,      fg: INK,   accent: CHORD_LIGHT },
    dark:   { bg: PAPER_DARK, fg: CREAM, accent: CHORD_DARK  },
    accent: { bg: INK,        fg: CREAM, accent: CHORD_DARK  },
  };
  const p = palettes[mode];
  return (
    <div style={{
      width: size, height: size,
      borderRadius: size * 0.2237,
      background: p.bg,
      position: "relative",
      overflow: "hidden",
      boxShadow: mode === "dark" || mode === "accent"
        ? "0 6px 18px rgba(0,0,0,0.4)"
        : "0 6px 18px rgba(10,10,10,0.15)",
    }}>
      <svg viewBox="0 0 200 200" width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
        <g stroke={p.fg} strokeWidth="0.5">
          <line x1="0" y1="60" x2="200" y2="60"/>
          <line x1="0" y1="80" x2="200" y2="80"/>
          <line x1="0" y1="120" x2="200" y2="120"/>
          <line x1="0" y1="140" x2="200" y2="140"/>
        </g>
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <svg viewBox="0 0 200 200" width="78%" height="78%">
          <g fill="none" stroke={p.fg} strokeWidth="22" strokeLinecap="square">
            <path d="M 158 60 A 40 40 0 1 0 100 100"/>
            <path d="M 42 140 A 40 40 0 1 0 100 100"/>
          </g>
          <line x1="10" y1="100" x2="190" y2="100" stroke={p.accent} strokeWidth="7" strokeLinecap="square"/>
          <circle cx="190" cy="100" r="7" fill={p.accent}/>
        </svg>
      </div>
    </div>
  );
}

function AppIconWrapped({ mode = "light", size = 600 }) {
  return (
    <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
      <AppIconRaw mode={mode} size={size}/>
    </div>
  );
}

// ----- Scale strip -----
function ScaleStrip() {
  const sizes = [180, 120, 80, 60, 40];
  return (
    <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", padding: 28, gap: 22 }}>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 28, justifyContent: "center" }}>
        {sizes.map(s => (
          <div key={`l-${s}`} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <AppIconRaw mode="light" size={s}/>
            <span style={{ fontFamily: fontMono, fontSize: 11, color: "#6E6A60" }}>{s}px</span>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 28, justifyContent: "center" }}>
        {sizes.map(s => (
          <div key={`d-${s}`} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <AppIconRaw mode="dark" size={s}/>
          </div>
        ))}
      </div>
    </div>
  );
}

// ----- Home screen context -----
function HomeScreen() {
  const apps = [
    { name: "Mail",     bg: "#1F8AFE", fg: "#fff", glyph: "✉" },
    { name: "Calendar", bg: "#fff",    fg: "#FF3B30", glyph: "12" },
    { name: "Photos",   bg: "#fff",    fg: "#000", glyph: "❀" },
    { name: "Camera",   bg: "#1C1C1E", fg: "#fff", glyph: "◉" },
    { name: "Maps",     bg: "#E2EBC8", fg: "#1F4F1F", glyph: "📍" },
    { name: "Music",    bg: "linear-gradient(180deg,#FF6486,#E91D63)", fg: "#fff", glyph: "♫" },
    { name: "Notes",    bg: "linear-gradient(180deg,#FFE680,#F4C026)", fg: "#3F2F00", glyph: "✎" },
  ];
  return (
    <div style={{
      width: "100%", height: "100%",
      background: "linear-gradient(180deg, #2B4A78 0%, #6F88B0 60%, #C1B89A 100%)",
      display: "flex", flexDirection: "column",
      padding: 32,
      gap: 28,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", color: "white", fontFamily: fontUI, fontSize: 14, fontWeight: 600 }}>
        <span>9:41</span><span>● ● ●</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28, padding: "20px 8px 0" }}>
        {apps.slice(0, 4).map(a => <FakeAppIcon key={a.name} {...a}/>)}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
          <AppIconRaw mode="light" size={100}/>
          <span style={{ color: "white", fontFamily: fontUI, fontSize: 13, fontWeight: 500, textShadow: "0 1px 2px rgba(0,0,0,0.4)" }}>Songbook</span>
        </div>
        {apps.slice(4, 7).map(a => <FakeAppIcon key={a.name} {...a}/>)}
      </div>
    </div>
  );
}

function FakeAppIcon({ name, bg, fg, glyph }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
      <div style={{ width: 100, height: 100, borderRadius: 22, background: bg, color: fg, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: fontUI, fontWeight: 700, fontSize: 38, boxShadow: "0 6px 18px rgba(0,0,0,0.18)" }}>{glyph}</div>
      <span style={{ color: "white", fontFamily: fontUI, fontSize: 13, fontWeight: 500, textShadow: "0 1px 2px rgba(0,0,0,0.4)" }}>{name}</span>
    </div>
  );
}

// ----- Splash screen — shown before Onboarding -----
function SplashScreen({ mode = "light" }) {
  const palettes = {
    light: { bg: PAPER, fg: INK, accent: CHORD_LIGHT, soft: "rgba(10,10,10,0.55)", line: "rgba(10,10,10,0.18)" },
    dark:  { bg: PAPER_DARK, fg: CREAM, accent: CHORD_DARK, soft: "rgba(239,234,224,0.55)", line: "rgba(239,234,224,0.18)" },
  };
  const p = palettes[mode];
  return (
    <div style={{
      flex: 1,
      background: p.bg,
      color: p.fg,
      display: "flex",
      flexDirection: "column",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* faint horizontal staff lines as texture */}
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.45 }}>
        <g stroke={p.line} strokeWidth="1">
          <line x1="0" y1="22%" x2="100%" y2="22%"/>
          <line x1="0" y1="32%" x2="100%" y2="32%"/>
          <line x1="0" y1="42%" x2="100%" y2="42%"/>
          <line x1="0" y1="58%" x2="100%" y2="58%"/>
          <line x1="0" y1="68%" x2="100%" y2="68%"/>
          <line x1="0" y1="78%" x2="100%" y2="78%"/>
        </g>
      </svg>

      {/* top corners */}
      <div style={{ display: "flex", justifyContent: "space-between", padding: "28px 36px", fontFamily: fontUI, fontSize: 11, fontWeight: 800, letterSpacing: "0.32em", textTransform: "uppercase", color: p.soft, position: "relative" }}>
        <span>SBM · v1.0</span>
        <span style={{ fontFamily: fontMono, letterSpacing: "0.1em" }}>♩ = 64</span>
      </div>

      {/* hero — wordmark stacked, generously centered */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 36, position: "relative" }}>
        <WordmarkStacked fg={p.fg} accent={p.accent} size="lg"/>

        {/* tagline + loader */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 28, marginTop: 12 }}>
          <span style={{ fontFamily: fontDisplay, fontStyle: "italic", fontSize: 22, color: p.soft }}>
            The musician's library, on stage.
          </span>
          <SplashLoader accent={p.accent} line={p.line}/>
        </div>
      </div>

      {/* bottom typographic rule */}
      <div style={{ padding: "0 36px 32px", position: "relative" }}>
        <div style={{ height: 1, background: p.fg, opacity: 0.85 }}/>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12, fontFamily: fontUI, fontSize: 10.5, fontWeight: 800, letterSpacing: "0.32em", textTransform: "uppercase", color: p.fg }}>
          <span>Library</span>
          <span style={{ color: p.soft }}>·</span>
          <span>Setlists</span>
          <span style={{ color: p.soft }}>·</span>
          <span>Stage</span>
          <span style={{ color: p.soft }}>·</span>
          <span>Import</span>
        </div>
      </div>

      {/* keyframes */}
      <style>{`
        @keyframes sbmSweep {
          0%   { transform: translateX(-100%); }
          50%  { transform: translateX(0%); }
          100% { transform: translateX(100%); }
        }
      `}</style>
    </div>
  );
}

function SplashLoader({ accent, line }) {
  return (
    <div style={{ width: 220, height: 2, background: line, position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0,
        width: "40%",
        background: accent,
        animation: "sbmSweep 1.6s ease-in-out infinite",
      }}/>
    </div>
  );
}

// ----- Export -----
window.SBM_LOGOS = {
  Glyph: SBMGlyph,
  WordmarkH,
  WordmarkStacked,
  WordmarksGrid,
  AppIcon: AppIconWrapped,
  AppIconRaw,
  ScaleStrip,
  HomeScreen,
  SplashScreen,
  // direction-aware palette helpers
  palettes: {
    light: { bg: PAPER, fg: INK, accent: CHORD_LIGHT },
    dark:  { bg: PAPER_DARK, fg: CREAM, accent: CHORD_DARK },
  },
};