/* Fenimore Deli — live Tweaks panel for the hero (drives window.__fdHero). */

const FD_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#fbf6ec",
  "primaryText": "#191007",
  "secondaryBorder": "#c7902f",
  "secondaryText": "#fbf6ec",
  "trim": "#c7902f",
  "wmColor": "#c7902f",
  "layout": "left",
  "overlay": 20,
  "halo": 0,
  "scrubLength": 40,
  "wmSize": 6,
  "eyebrowSize": 14.5,
  "accentSize": 14,
  "subSize": 19.5,
  "ctaSize": 14.5,
  "subColor": "#fbf6ec",
  "subStroke": 1.25,
  "subStrokeColor": "#191007",
  "eyebrowColor": "#fbf6ec",
  "accentColor": "#fbf6ec",
  "labelStroke": 1.75,
  "labelStrokeColor": "#191007",
  "wmStroke": 3,
  "wmStrokeColor": "#191007",
  "headingFont": "Sorts Mill Goudy",
  "subFont": "EB Garamond",
  "headingLH": 0.8,
  "subLH": 1.45,
  "sectionGap": -70,
  "siteFonts": true,
  "sectionSpacing": 80,
  "goldStroke": 1.25,
  "goldStrokeColor": "#191007",
  "menuStroke": 0,
  "menuStrokeColor": "#191007",
  "veilStart": 85,
  "veilSoft": 100,
  "grain": true,
  "idle": "drift",
  "heroImg": "images/storefront-hero.jpg",
  "mFocusX": 86,
  "mFocusY": 0,
  "mZoom": 1.15,
  "mWmSize": 50,
  "mSubSize": 15,
  "mEyebrowSize": 11.5,
  "mBottomPad": 104,
  "mScrim": 150,
  "mShowWm": false,
  "mShowEyebrow": true,
  "mShowTagline": true,
  "mShowSub": true
}/*EDITMODE-END*/;

function FDTweaks() {
  const [t, setTweak] = useTweaks(FD_DEFAULTS);
  const [editText, setEditText] = React.useState(false);

  // turn inline text editing on/off
  React.useEffect(() => {
    if (window.__fdText) window.__fdText.setMode(editText);
  }, [editText]);

  // push the whole config to the hero whenever it changes (waits for the hero to mount)
  React.useEffect(() => {
    let tries = 0;
    const push = () => {
      if (window.__fdHero) { window.__fdHero.setAll(t); }
      else if (tries++ < 60) { setTimeout(push, 150); }
    };
    push();
  }, [t]);

  // Expose the real tweak setter/getter so an external panel (e.g. the phone
  // harness's side panel in the black area) can drive + persist these tweaks.
  React.useEffect(() => {
    window.__fdSetTweak = setTweak;
    window.__fdGetTweaks = () => t;
    window.dispatchEvent(new CustomEvent("fd-tweaks-ready"));
  });

  return (
    <TweaksPanel>
      <TweakSection label="Hero photo" />
      <TweakSelect label="Background" value={t.heroImg}
        options={[
          { value: "images/storefront-hero.jpg", label: "Storefront — golden hour" },
          { value: "images/storefront-corner.jpg", label: "Storefront — sign" },
          { value: "images/storefront-street.jpg", label: "Storefront — street" },
          { value: "images/hero.jpg", label: "Signature sandwich" },
        ]}
        onChange={(v) => setTweak("heroImg", v)} />

      <TweakSection label="Mobile hero — crop" />
      <TweakSlider label="Crop focus X" value={t.mFocusX} min={0} max={100} unit="%"
        onChange={(v) => setTweak("mFocusX", v)} />
      <TweakSlider label="Crop focus Y" value={t.mFocusY} min={0} max={100} unit="%"
        onChange={(v) => setTweak("mFocusY", v)} />
      <TweakSlider label="Crop zoom" value={t.mZoom} min={0.5} max={2} step={0.05} unit="×"
        onChange={(v) => setTweak("mZoom", v)} />

      <TweakSection label="Mobile hero — text & layout" />
      <TweakSlider label="Heading size" value={t.mWmSize} min={28} max={64} step={1} unit="px"
        onChange={(v) => setTweak("mWmSize", v)} />
      <TweakSlider label="Subtext size" value={t.mSubSize} min={12} max={20} step={0.5} unit="px"
        onChange={(v) => setTweak("mSubSize", v)} />
      <TweakSlider label="Eyebrow size" value={t.mEyebrowSize} min={9} max={16} step={0.5} unit="px"
        onChange={(v) => setTweak("mEyebrowSize", v)} />
      <TweakSlider label="Text bottom gap" value={t.mBottomPad} min={16} max={180} step={2} unit="px"
        onChange={(v) => setTweak("mBottomPad", v)} />
      <TweakSlider label="Scrim strength" value={t.mScrim} min={0} max={150} step={5} unit="%"
        onChange={(v) => setTweak("mScrim", v)} />
      <TweakToggle label="Show wordmark" value={t.mShowWm}
        onChange={(v) => setTweak("mShowWm", v)} />
      <TweakToggle label="Show eyebrow" value={t.mShowEyebrow}
        onChange={(v) => setTweak("mShowEyebrow", v)} />
      <TweakToggle label="Show tagline line" value={t.mShowTagline}
        onChange={(v) => setTweak("mShowTagline", v)} />
      <TweakToggle label="Show subtext" value={t.mShowSub}
        onChange={(v) => setTweak("mShowSub", v)} />

      <TweakSection label="Edit text" />
      <TweakToggle label="Edit text on page" value={editText}
        onChange={(v) => setEditText(v)} />

      <TweakSection label="Brand colors" />
      <TweakColor label="Wordmark" value={t.wmColor}
        options={["#fbf6ec", "#191007", "#c7902f", "#b8860b"]}
        onChange={(v) => setTweak("wmColor", v)} />

      <TweakSection label="Buttons" />
      <TweakColor label="“See the Menu” fill" value={t.accent}
        options={["#1f1a14", "#a8302a", "#c7902f", "#2f6b4f", "#7a1f1a", "#2a1d0f", "#fbf6ec"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakColor label="“See the Menu” text" value={t.primaryText}
        options={["#ffffff", "#191007", "#c7902f", "#fbf6ec"]}
        onChange={(v) => setTweak("primaryText", v)} />
      <TweakColor label="“Order” outline" value={t.secondaryBorder}
        options={["#191007", "#a8302a", "#c7902f", "#2f6b4f", "#7a1f1a", "#2a1d0f"]}
        onChange={(v) => setTweak("secondaryBorder", v)} />
      <TweakColor label="“Order” text" value={t.secondaryText}
        options={["#191007", "#a8302a", "#c7902f", "#2f6b4f", "#7a1f1a", "#fbf6ec"]}
        onChange={(v) => setTweak("secondaryText", v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Position" value={t.layout}
        options={["center", "top", "left"]}
        onChange={(v) => setTweak("layout", v)} />
      <TweakSlider label="Wordmark size" value={t.wmSize} min={4} max={9} step={0.2} unit="vw"
        onChange={(v) => setTweak("wmSize", v)} />

      <TweakSection label="Hero text — sizes" />
      <TweakSlider label="Eyebrow" value={t.eyebrowSize} min={9} max={18} step={0.5} unit="px"
        onChange={(v) => setTweak("eyebrowSize", v)} />
      <TweakSlider label="Accent line" value={t.accentSize} min={8} max={16} step={0.5} unit="px"
        onChange={(v) => setTweak("accentSize", v)} />
      <TweakSlider label="Subtext" value={t.subSize} min={13} max={26} step={0.5} unit="px"
        onChange={(v) => setTweak("subSize", v)} />
      <TweakSlider label="Buttons" value={t.ctaSize} min={10} max={16} step={0.5} unit="px"
        onChange={(v) => setTweak("ctaSize", v)} />

      <TweakSection label="Hero text — color & stroke" />
      <TweakColor label="Subtext color" value={t.subColor}
        options={["#2a1d0f", "#fbf6ec", "#c7902f", "#7a1f1a"]}
        onChange={(v) => setTweak("subColor", v)} />
      <TweakSlider label="Subtext stroke" value={t.subStroke} min={0} max={2} step={0.25} unit="px"
        onChange={(v) => setTweak("subStroke", v)} />
      <TweakColor label="Subtext stroke color" value={t.subStrokeColor}
        options={["#191007", "#fbf6ec", "#7a1f1a", "#c7902f"]}
        onChange={(v) => setTweak("subStrokeColor", v)} />
      <TweakSlider label="Wordmark stroke" value={t.wmStroke} min={0} max={3} step={0.25} unit="px"
        onChange={(v) => setTweak("wmStroke", v)} />
      <TweakColor label="Wordmark stroke color" value={t.wmStrokeColor}
        options={["#191007", "#c7902f", "#7a1f1a", "#ffffff"]}
        onChange={(v) => setTweak("wmStrokeColor", v)} />

      <TweakSection label="Eyebrow & accent line" />
      <TweakColor label="Eyebrow color" value={t.eyebrowColor}
        options={["#c7902f", "#b06a0c", "#8a4f08", "#a8302a", "#7a1f1a", "#2f6b4f", "#2a1d0f", "#fbf6ec"]}
        onChange={(v) => setTweak("eyebrowColor", v)} />
      <TweakColor label="Accent line color" value={t.accentColor}
        options={["#cabfa9", "#fbf6ec", "#c7902f", "#b06a0c", "#a8302a", "#2f6b4f", "#2a1d0f"]}
        onChange={(v) => setTweak("accentColor", v)} />
      <TweakSlider label="Outline / stroke" value={t.labelStroke} min={0} max={2} step={0.25} unit="px"
        onChange={(v) => setTweak("labelStroke", v)} />
      <TweakColor label="Stroke color" value={t.labelStrokeColor}
        options={["#191007", "#fbf6ec", "#7a1f1a", "#c7902f"]}
        onChange={(v) => setTweak("labelStrokeColor", v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Heading font" value={t.headingFont}
        options={["Sorts Mill Goudy", "Goudy Bookletter 1911", "Cormorant", "Fraunces", "Playfair Display", "DM Serif Display"]}
        onChange={(v) => setTweak("headingFont", v)} />
      <TweakSelect label="Subtext font" value={t.subFont}
        options={["EB Garamond", "Cormorant Garamond", "Sorts Mill Goudy", "Inter", "Newsreader", "Libre Franklin"]}
        onChange={(v) => setTweak("subFont", v)} />
      <TweakSlider label="Heading line-height" value={t.headingLH} min={0.8} max={1.3} step={0.05}
        onChange={(v) => setTweak("headingLH", v)} />
      <TweakSlider label="Subtext line-height" value={t.subLH} min={1.2} max={2} step={0.05}
        onChange={(v) => setTweak("subLH", v)} />

      <TweakSection label="Atmosphere" />
      <TweakSlider label="Photo darkness" value={t.overlay} min={20} max={90} unit="%"
        onChange={(v) => setTweak("overlay", v)} />
      <TweakSlider label="Halo glow" value={t.halo} min={0} max={100} unit="%"
        onChange={(v) => setTweak("halo", v)} />
      <TweakToggle label="Film grain" value={t.grain}
        onChange={(v) => setTweak("grain", v)} />

      <TweakSection label="Whole site" />
      <TweakToggle label="Match site to hero fonts" value={t.siteFonts}
        onChange={(v) => setTweak("siteFonts", v)} />
      <TweakSlider label="Section spacing" value={t.sectionSpacing} min={32} max={140} step={4} unit="px"
        onChange={(v) => setTweak("sectionSpacing", v)} />

      <TweakSection label="Gold text" />
      <TweakSlider label="Outline / stroke" value={t.goldStroke} min={0} max={3} step={0.25} unit="px"
        onChange={(v) => setTweak("goldStroke", v)} />
      <TweakColor label="Stroke color" value={t.goldStrokeColor}
        options={["#3a2410", "#191007", "#7a1f1a", "#ffffff"]}
        onChange={(v) => setTweak("goldStrokeColor", v)} />

      <TweakSection label="Menu labels" />
      <TweakSlider label="Outline / stroke" value={t.menuStroke} min={0} max={2} step={0.1} unit="px"
        onChange={(v) => setTweak("menuStroke", v)} />
      <TweakColor label="Stroke color" value={t.menuStrokeColor}
        options={["#191007", "#3a2410", "#7a1f1a", "#ffffff"]}
        onChange={(v) => setTweak("menuStrokeColor", v)} />

      <TweakSection label="Scroll motion" />
      <TweakSlider label="Scrub length" value={t.scrubLength} min={30} max={240} step={10} unit="vh"
        onChange={(v) => setTweak("scrubLength", v)} />
      <TweakSlider label="Dissolve start" value={t.veilStart} min={20} max={85} unit="%"
        onChange={(v) => setTweak("veilStart", v)} />
      <TweakSlider label="Dissolve softness" value={t.veilSoft} min={0} max={100} unit="%"
        onChange={(v) => setTweak("veilSoft", v)} />
      <TweakSlider label="Space after hero" value={t.sectionGap} min={-200} max={240} step={10} unit="px"
        onChange={(v) => setTweak("sectionGap", v)} />
      <TweakRadio label="Idle motion" value={t.idle} options={["hold", "drift"]}
        onChange={(v) => setTweak("idle", v)} />
    </TweaksPanel>
  );
}

(function mount() {
  function go() {
    if (!window.useTweaks || !window.TweaksPanel) { setTimeout(go, 80); return; }
    var host = document.createElement("div");
    host.id = "fd-tweaks-root";
    document.body.appendChild(host);
    ReactDOM.createRoot(host).render(<FDTweaks />);
  }
  go();
})();