/* ============================================================
   Fitted Landing — App root + Tweaks
   ============================================================ */

const { useState, useEffect, useMemo } = React;

/* Mobile detection and app store redirect */
const APP_STORE_URL = "https://apps.apple.com/us/app/fitted/id6596771952";
const PLAY_STORE_URL = "https://play.google.com/store/apps/details?id=com.fittedcloset.app&hl=en_US";

function getMobileOS() {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  if (/android/i.test(ua)) return "android";
  if (/iPad|iPhone|iPod/.test(ua) && !window.MSStream) return "ios";
  return null;
}

function getAppStoreUrl() {
  const os = getMobileOS();
  if (os === "ios") return APP_STORE_URL;
  if (os === "android") return PLAY_STORE_URL;
  return null;
}

// Intercept web app links on mobile and redirect to app stores
function setupMobileRedirects() {
  document.addEventListener("click", (e) => {
    const link = e.target.closest("a");
    if (!link) return;

    const href = link.getAttribute("href");
    if (href && href.includes("app.fittedcloset.com")) {
      const appUrl = getAppStoreUrl();
      if (appUrl) {
        e.preventDefault();
        window.location.href = appUrl;
      }
    }
  });
}

// Run on load
if (typeof window !== "undefined") {
  setupMobileRedirects();
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "density": "standard",
  "heroCopy": "digitized"
}/*EDITMODE-END*/;

const ACCENTS = {
  gold:  { color: "#A8873F", soft: "rgba(201,169,98,0.12)", label: "Champagne gold" },
  candy: { color: "#FF4FB6", soft: "rgba(255,79,182,0.12)", label: "Candy pink" },
  ink:   { color: "#000000", soft: "rgba(0,0,0,0.08)",     label: "Pure ink" },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENTS[tweaks.accent] || ACCENTS.gold;

  // Apply accent CSS vars at the root
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--fitted-gold", accent.color);
    root.style.setProperty("--fitted-gold-deep", accent.color);
    root.style.setProperty("--accent", accent.color);
    root.style.setProperty("--accent-soft", accent.soft);
  }, [accent]);

  const className = useMemo(
    () => `site density-${tweaks.density || "standard"}`,
    [tweaks.density]
  );

  return (
    <>
      <div className={className}>
        <Nav/>
        <Hero heroCopy={tweaks.heroCopy}/>
        <TrustStrip/>
        <BuildCloset/>
        <AskFittedSection/>
        <ClosetSection/>
        <Partnerships/>
        <MarketplaceSection/>
        <CommunitySection/>
        <QuoteSection/>
        <BigCTA/>
        <FAQSection/>
        <Footer/>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent color">
          <TweakRadio
            value={tweaks.accent}
            onChange={v => setTweak("accent", v)}
            options={[
              { value: "gold",  label: "Gold" },
              { value: "candy", label: "Candy" },
              { value: "ink",   label: "Ink" },
            ]}
          />
          <div style={{ marginTop: 8, fontSize: 12, color: "#6D6D72", display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: accent.color, boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)" }}/>
            <span>{accent.label}</span>
          </div>
        </TweakSection>

        <TweakSection title="Hero copy">
          <TweakRadio
            value={tweaks.heroCopy}
            onChange={v => setTweak("heroCopy", v)}
            options={[
              { value: "digitized", label: "Digitized" },
              { value: "asset",     label: "Asset" },
              { value: "feel",      label: "Faster" },
            ]}
          />
          <div style={{ marginTop: 8, fontSize: 12, color: "#6D6D72" }}>
            "Your closet, digitized." · "Wardrobe is an asset." · "Get dressed faster."
          </div>
        </TweakSection>

        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={v => setTweak("density", v)}
            options={[
              { value: "tight",    label: "Tight" },
              { value: "standard", label: "Standard" },
              { value: "airy",     label: "Airy" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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