// Tweaks for Turkey Textil index page
// Palette swatches, type system, hero variants, density.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#b8553a", "#1c1814", "#f3eee3", "#ebe4d3", "#faf6ec", "#d8cdb6"],
  "typePair": "serif-sans",
  "heroVariant": "stack",
  "density": "regular",
  "showCertTicker": true
}/*EDITMODE-END*/;

// Palettes: [accent, ink, bg, bg2, surface, line]
const PALETTES = {
  heritage:  ["#b8553a", "#1c1814", "#f3eee3", "#ebe4d3", "#faf6ec", "#d8cdb6"],  // warm terracotta
  navy:      ["#1d3557", "#0b1929", "#f4f3ef", "#e8e7e0", "#fbfaf6", "#d4d3cb"],  // navy pro
  mono:      ["#c8423a", "#111111", "#ededea", "#e0dfdb", "#f7f6f3", "#cdccc8"],  // mono industrial
  forest:    ["#a4583b", "#1a2820", "#eaeae0", "#dadbcc", "#f5f5ec", "#c8c8b8"],  // deep forest
};

const TYPE_PAIRS = {
  "serif-sans":  { serif: '"Instrument Serif"', sans: '"Geist"' },
  "sans-bold":   { serif: '"Bricolage Grotesque"', sans: '"Geist"' },
  "editorial":   { serif: '"Cormorant Garamond"', sans: '"Geist"' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const [accent, ink, bg, bg2, surface, line] = t.palette;
    r.setProperty("--accent", accent);
    // derive a deep tone
    r.setProperty("--accent-deep", shade(accent, -0.25));
    r.setProperty("--accent-soft", shade(accent, 0.55));
    r.setProperty("--ink", ink);
    r.setProperty("--ink-2", shade(ink, 0.35));
    r.setProperty("--ink-3", shade(ink, 0.6));
    r.setProperty("--bg", bg);
    r.setProperty("--bg-2", bg2);
    r.setProperty("--surface", surface);
    r.setProperty("--line", line);

    const pair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS["serif-sans"];
    r.setProperty("--serif", `${pair.serif}, "Cormorant Garamond", Georgia, serif`);
    r.setProperty("--sans", `${pair.sans}, "Inter Tight", system-ui, -apple-system, sans-serif`);

    // density
    const density = t.density === "compact" ? "56px" : t.density === "spacious" ? "144px" : "104px";
    r.setProperty("--pad-section", `clamp(48px, 7vw, ${density})`);

    // cert ticker
    const topbar = document.querySelector(".topbar");
    if (topbar) topbar.style.display = t.showCertTicker ? "" : "none";

    // hero variant — swap art block
    applyHeroVariant(t.heroVariant);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palet" />
      <TweakColor
        label="Renk paleti"
        value={t.palette}
        options={[PALETTES.heritage, PALETTES.navy, PALETTES.mono, PALETTES.forest]}
        onChange={v => setTweak("palette", v)}
      />

      <TweakSection label="Tipografi" />
      <TweakSelect
        label="Font pair"
        value={t.typePair}
        options={[
          { value: "serif-sans", label: "Instrument Serif + Geist" },
          { value: "sans-bold",  label: "Bricolage Grotesque + Geist" },
          { value: "editorial",  label: "Cormorant + Geist" },
        ]}
        onChange={v => setTweak("typePair", v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Görsel varyant"
        value={t.heroVariant}
        options={[
          { value: "stack",  label: "Kumaş yığını" },
          { value: "loom",   label: "Dokuma tezgâhı" },
          { value: "thread", label: "İplik makaraları" },
        ]}
        onChange={v => setTweak("heroVariant", v)}
      />

      <TweakSection label="Yoğunluk" />
      <TweakRadio
        label="Boşluk"
        value={t.density}
        options={["compact", "regular", "spacious"]}
        onChange={v => setTweak("density", v)}
      />

      <TweakSection label="Üst Bar" />
      <TweakToggle
        label="Sertifika şeridi"
        value={t.showCertTicker}
        onChange={v => setTweak("showCertTicker", v)}
      />
    </TweaksPanel>
  );
}

// ─── helpers ────────────────────────────────────────────────────────────────
function shade(hex, amt) {
  // amt > 0 lightens, amt < 0 darkens. Simple HSL mix.
  const c = hex.replace("#", "");
  const r = parseInt(c.substring(0, 2), 16);
  const g = parseInt(c.substring(2, 4), 16);
  const b = parseInt(c.substring(4, 6), 16);
  const mix = (x) => {
    if (amt >= 0) return Math.round(x + (255 - x) * amt);
    return Math.round(x * (1 + amt));
  };
  const toHex = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, "0");
  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
}

function applyHeroVariant(variant) {
  const art = document.getElementById("hero-art");
  if (!art) return;
  const svg = art.querySelector("svg");
  if (!svg) return;

  // Three pre-baked SVGs as innerHTML; same viewBox 480x600.
  if (variant === "stack") {
    svg.innerHTML = STACK_SVG;
  } else if (variant === "loom") {
    svg.innerHTML = LOOM_SVG;
  } else if (variant === "thread") {
    svg.innerHTML = THREAD_SVG;
  }
}

const STACK_SVG = `
  <defs>
    <linearGradient id="bgGrad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#e6dcc4"/><stop offset="1" stop-color="#cfc09a"/>
    </linearGradient>
    <pattern id="weave" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
      <path d="M0 3 H6 M3 0 V6" stroke="rgba(28,24,20,0.08)" stroke-width="0.6"/>
    </pattern>
  </defs>
  <rect width="480" height="600" fill="url(#bgGrad)"/>
  <rect width="480" height="600" fill="url(#weave)"/>
  <circle cx="380" cy="80" r="180" fill="#fff" opacity="0.16"/>
  <circle cx="420" cy="60" r="100" fill="#fff" opacity="0.22"/>
  <g opacity="0.92">
    <rect x="30" y="270" width="80" height="240" fill="#5a4632" rx="2"/>
    <ellipse cx="70" cy="270" rx="40" ry="9" fill="#3f3327"/>
    <rect x="110" y="240" width="80" height="270" fill="#3a566f" rx="2"/>
    <ellipse cx="150" cy="240" rx="40" ry="9" fill="#1d2b3a"/>
    <rect x="190" y="260" width="80" height="250" fill="#f3eee3" rx="2"/>
    <ellipse cx="230" cy="260" rx="40" ry="9" fill="#bda985"/>
    <rect x="270" y="245" width="80" height="265" fill="#3a6048" rx="2"/>
    <ellipse cx="310" cy="245" rx="40" ry="9" fill="#1f3a2c"/>
    <rect x="350" y="265" width="80" height="245" fill="#b8553a" rx="2"/>
    <ellipse cx="390" cy="265" rx="40" ry="9" fill="#7d2f1a"/>
  </g>
  <g transform="translate(60, 460)">
    <rect x="0" y="0" width="380" height="20" fill="#b8553a"/>
    <rect x="6" y="20" width="368" height="14" fill="#9e4732"/>
    <rect x="0" y="34" width="380" height="20" fill="#e6dcc4"/>
    <rect x="6" y="54" width="368" height="14" fill="#bda985"/>
    <rect x="0" y="68" width="380" height="20" fill="#1d2b3a"/>
    <rect x="6" y="88" width="368" height="14" fill="#162132"/>
    <rect x="0" y="102" width="380" height="20" fill="#1f3a2c"/>
    <rect x="6" y="122" width="368" height="14" fill="#162a20"/>
  </g>
  <rect width="480" height="600" fill="#000" opacity="0.06"/>
`;

const LOOM_SVG = `
  <defs>
    <linearGradient id="bgGrad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#3f3327"/><stop offset="1" stop-color="#1c1814"/>
    </linearGradient>
    <pattern id="weave3" width="4" height="4" patternUnits="userSpaceOnUse">
      <path d="M0 2 H4 M2 0 V4" stroke="rgba(243,238,227,0.08)" stroke-width="0.5"/>
    </pattern>
  </defs>
  <rect width="480" height="600" fill="url(#bgGrad)"/>
  <rect width="480" height="600" fill="url(#weave3)"/>
  <g stroke="#bda985" stroke-width="1.4" fill="none" opacity="0.85">
    <line x1="80"  y1="80" x2="80"  y2="520"/>
    <line x1="130" y1="80" x2="130" y2="520"/>
    <line x1="180" y1="80" x2="180" y2="520"/>
    <line x1="230" y1="80" x2="230" y2="520"/>
    <line x1="280" y1="80" x2="280" y2="520"/>
    <line x1="330" y1="80" x2="330" y2="520"/>
    <line x1="380" y1="80" x2="380" y2="520"/>
    <path d="M40 220 Q240 200 440 220" stroke="#b8553a" stroke-width="2.4"/>
    <path d="M40 260 Q240 280 440 260" stroke="#e6dcc4" stroke-width="2.4"/>
    <path d="M40 300 Q240 280 440 300" stroke="#b8553a" stroke-width="2.4"/>
    <path d="M40 340 Q240 360 440 340" stroke="#bda985" stroke-width="2.4"/>
    <path d="M40 380 Q240 360 440 380" stroke="#e6dcc4" stroke-width="2.4"/>
  </g>
  <rect x="30" y="60" width="420" height="24" fill="#5a4632"/>
  <rect x="30" y="516" width="420" height="24" fill="#5a4632"/>
  <circle cx="48" cy="72" r="5" fill="#1c1814"/>
  <circle cx="432" cy="72" r="5" fill="#1c1814"/>
  <circle cx="48" cy="528" r="5" fill="#1c1814"/>
  <circle cx="432" cy="528" r="5" fill="#1c1814"/>
`;

const THREAD_SVG = `
  <defs>
    <linearGradient id="bgGrad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#faf6ec"/><stop offset="1" stop-color="#ebe4d3"/>
    </linearGradient>
  </defs>
  <rect width="480" height="600" fill="url(#bgGrad)"/>
  <!-- shelf -->
  <rect x="0" y="380" width="480" height="6" fill="#5a4632"/>
  <rect x="0" y="180" width="480" height="6" fill="#5a4632"/>
  <!-- spools row 1 -->
  ${spool(70, 270, "#b8553a")}
  ${spool(170, 270, "#1d2b3a")}
  ${spool(270, 270, "#1f3a2c")}
  ${spool(370, 270, "#7d2f1a")}
  <!-- spools row 2 (top) -->
  ${spool(120, 70, "#3f3327")}
  ${spool(220, 70, "#bda985")}
  ${spool(320, 70, "#b8553a")}
  <!-- foreground large spool -->
  ${spool(70, 470, "#1d2b3a", 1.4)}
  ${spool(240, 470, "#b8553a", 1.4)}
  ${spool(410, 470, "#1f3a2c", 1.4)}
`;

function spool(cx, cy, color, scale = 1) {
  const w = 64 * scale, h = 100 * scale;
  return `
    <g transform="translate(${cx - w/2}, ${cy - h/2})">
      <rect x="0" y="0" width="${w}" height="6" fill="#3f3327"/>
      <rect x="0" y="${h-6}" width="${w}" height="6" fill="#3f3327"/>
      <rect x="${w*0.1}" y="6" width="${w*0.8}" height="${h-12}" fill="${color}"/>
      <line x1="${w*0.1}" y1="${h*0.3}" x2="${w*0.9}" y2="${h*0.3}" stroke="rgba(0,0,0,0.2)" stroke-width="0.5"/>
      <line x1="${w*0.1}" y1="${h*0.5}" x2="${w*0.9}" y2="${h*0.5}" stroke="rgba(0,0,0,0.2)" stroke-width="0.5"/>
      <line x1="${w*0.1}" y1="${h*0.7}" x2="${w*0.9}" y2="${h*0.7}" stroke="rgba(0,0,0,0.2)" stroke-width="0.5"/>
    </g>
  `;
}

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