// app.jsx — root composition with Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "palette": "miami-navy",
  "headlineFont": "manrope",
  "heroVariant": "portrait"
}/*EDITMODE-END*/;

const PALETTES = {
  "miami-navy": {
    name: "Miami Navy + Cyan",
    swatches: ["#0c1d2e", "#22d3ee", "#f5c14a"],
    css: {
      "--bg":         "oklch(40% 0.035 250)",
      "--bg-soft":    "oklch(46% 0.035 250)",
      "--bg-deep":    "oklch(15% 0.03 250)",
      "--ink":        "oklch(98% 0.008 230)",
      "--ink-mid":    "oklch(88% 0.018 230)",
      "--ink-soft":   "oklch(76% 0.022 230)",
      "--line":       "oklch(55% 0.03 250)",
      "--line-soft":  "oklch(48% 0.03 250)",
      "--brand":      "oklch(80% 0.15 210)",     /* cyan — CTAs only */
      "--brand-deep": "oklch(68% 0.17 215)",
      "--brass":      "oklch(84% 0.15 85)",      /* gold — trust accents */
      "--brass-deep": "oklch(72% 0.15 80)",
      "--cream":      "oklch(44% 0.04 250)",
      "--paper":      "oklch(98% 0.005 230)",
      "--surface":    "oklch(44% 0.038 250)",
    },
  },
  "forest-brass": {
    name: "Forest + Brass",
    swatches: ["#1f3a2e", "#f3edde", "#c69643"],
    css: {
      "--bg":         "oklch(96.5% 0.012 85)",
      "--bg-soft":    "oklch(93.5% 0.018 82)",
      "--bg-deep":    "oklch(24% 0.028 160)",
      "--ink":        "oklch(20% 0.012 60)",
      "--ink-mid":    "oklch(38% 0.012 60)",
      "--ink-soft":   "oklch(55% 0.012 60)",
      "--line":       "oklch(85% 0.012 80)",
      "--line-soft":  "oklch(90% 0.012 80)",
      "--brand":      "oklch(34% 0.05 165)",
      "--brand-deep": "oklch(24% 0.04 165)",
      "--brass":      "oklch(70% 0.115 78)",
      "--brass-deep": "oklch(58% 0.115 70)",
      "--cream":      "oklch(94% 0.022 82)",
      "--paper":      "oklch(98% 0.008 85)",
    },
  },
  "oxblood-bone": {
    name: "Oxblood + Bone",
    swatches: ["#5a1f24", "#f3ece1", "#cfa566"],
    css: {
      "--bg":         "oklch(96% 0.013 78)",
      "--bg-soft":    "oklch(92.5% 0.02 78)",
      "--bg-deep":    "oklch(22% 0.05 30)",
      "--ink":        "oklch(20% 0.018 40)",
      "--ink-mid":    "oklch(38% 0.012 40)",
      "--ink-soft":   "oklch(55% 0.012 40)",
      "--line":       "oklch(84% 0.014 70)",
      "--line-soft":  "oklch(90% 0.012 70)",
      "--brand":      "oklch(36% 0.10 25)",
      "--brand-deep": "oklch(26% 0.10 25)",
      "--brass":      "oklch(72% 0.10 80)",
      "--brass-deep": "oklch(60% 0.10 70)",
      "--cream":      "oklch(93% 0.02 78)",
      "--paper":      "oklch(98% 0.008 80)",
    },
  },
  "navy-coral": {
    name: "Navy + Coral",
    swatches: ["#1a2840", "#f5f1e6", "#d96a4a"],
    css: {
      "--bg":         "oklch(96% 0.012 82)",
      "--bg-soft":    "oklch(92.5% 0.02 80)",
      "--bg-deep":    "oklch(22% 0.04 260)",
      "--ink":        "oklch(20% 0.018 260)",
      "--ink-mid":    "oklch(38% 0.014 260)",
      "--ink-soft":   "oklch(55% 0.012 260)",
      "--line":       "oklch(85% 0.012 80)",
      "--line-soft":  "oklch(90% 0.012 80)",
      "--brand":      "oklch(32% 0.08 250)",
      "--brand-deep": "oklch(22% 0.08 250)",
      "--brass":      "oklch(68% 0.14 40)",
      "--brass-deep": "oklch(56% 0.16 35)",
      "--cream":      "oklch(94% 0.018 82)",
      "--paper":      "oklch(98% 0.008 82)",
    },
  },
  "ink-tropic": {
    name: "Ink + Tropic",
    swatches: ["#111418", "#eef0ea", "#5fb585"],
    css: {
      "--bg":         "oklch(96% 0.005 130)",
      "--bg-soft":    "oklch(92% 0.008 130)",
      "--bg-deep":    "oklch(15% 0.005 200)",
      "--ink":        "oklch(18% 0.005 200)",
      "--ink-mid":    "oklch(38% 0.005 200)",
      "--ink-soft":   "oklch(55% 0.005 200)",
      "--line":       "oklch(85% 0.006 200)",
      "--line-soft":  "oklch(90% 0.005 200)",
      "--brand":      "oklch(18% 0.005 200)",
      "--brand-deep": "oklch(10% 0.005 200)",
      "--brass":      "oklch(72% 0.11 150)",
      "--brass-deep": "oklch(58% 0.13 150)",
      "--cream":      "oklch(93% 0.01 130)",
      "--paper":      "oklch(98% 0.004 130)",
    },
  },
};

const HEADLINE_FONTS = {
  manrope: { name: "Manrope (Bold Sans)", family: '"Manrope", ui-sans-serif, system-ui, sans-serif' },
  serif:   { name: "Instrument (Serif)",  family: '"Instrument Serif", "Iowan Old Style", serif' },
  geist:   { name: "Geist (Sans)",        family: '"Geist", ui-sans-serif, system-ui, sans-serif' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang === "es" ? "es" : "en";
  window._lang = lang;
  const copy = window.CONTENT[lang];

  // Apply palette
  React.useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES["miami-navy"];
    const root = document.documentElement;
    Object.entries(p.css).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty("--serif", HEADLINE_FONTS[t.headlineFont]?.family || HEADLINE_FONTS.manrope.family);
    root.setAttribute("data-headline-font", t.headlineFont);
  }, [t.palette, t.headlineFont]);

  return (
    <>
      <TopBar t={copy} lang={lang} onToggleLang={() => setTweak("lang", lang === "en" ? "es" : "en")} />
      <Nav t={copy} />
      <Hero t={copy} variant={t.heroVariant} />
      <PhoneBanner t={copy} lang={lang} />
      <Services t={copy} />
      <CaseResults t={copy} />
      <WhyUs t={copy} />
      <HowItWorks t={copy} />
      <FinalCTA t={copy} />
      <Footer t={copy} />
      <MobileStickyBar />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language" />
        <TweakRadio
          label="Language"
          value={lang}
          options={["en", "es"]}
          onChange={(v) => setTweak("lang", v)}
        />

        <TweakSection label="Palette" />
        <TweakColor
          label="Theme"
          value={PALETTES[t.palette]?.swatches}
          options={Object.values(PALETTES).map((p) => p.swatches)}
          onChange={(v) => {
            const found = Object.entries(PALETTES).find(([, p]) =>
              JSON.stringify(p.swatches) === JSON.stringify(v));
            if (found) setTweak("palette", found[0]);
          }}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Headlines"
          value={t.headlineFont}
          options={[
            { value: "manrope", label: "Manrope (Bold Sans)" },
            { value: "serif",   label: "Instrument (Serif)" },
            { value: "geist",   label: "Geist (Sans)" },
          ]}
          onChange={(v) => setTweak("headlineFont", v)}
        />
      </TweaksPanel>

      {/* Responsive helpers via JSX */}
      <style>{`
        .menu-toggle { display: none; }
        .mobile-sticky-bar { display: none; }
        /* Desktop primary nav (React home) */
        .primary-nav-react > ul {
          list-style: none; padding: 0; margin: 0;
          display: flex; gap: 28px; align-items: center;
        }
        .primary-nav-react a {
          color: var(--paper); text-decoration: none;
          font-family: "Roboto", sans-serif; font-weight: 700; font-size: 17px;
          padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
          border-bottom: 2px solid transparent;
        }
        .primary-nav-react a:hover { color: var(--brand); border-bottom-color: var(--brand); }
        .primary-nav-react .caret { font-size: 11px; opacity: 0.7; }
        .primary-nav-react .has-dd { position: relative; }
        .primary-nav-react .has-dd::after {
          content: ""; position: absolute; top: 100%; left: 0; right: 0;
          height: 18px; /* invisible bridge into the dropdown */
        }
        .primary-nav-react .dd {
          position: absolute; top: calc(100% + 14px); left: 50%;
          transform: translateX(-50%) translateY(-6px);
          background: var(--surface); border: 1px solid var(--line);
          border-radius: 12px; min-width: 240px; padding: 10px;
          list-style: none; margin: 0;
          display: flex; flex-direction: column; gap: 2px;
          opacity: 0; pointer-events: none;
          transition: opacity .15s ease, transform .15s ease;
          box-shadow: 0 18px 40px rgba(0,0,0,.35);
          z-index: 60;
        }
        .primary-nav-react .has-dd:hover > .dd,
        .primary-nav-react .has-dd:focus-within > .dd {
          opacity: 1; pointer-events: auto;
          transform: translateX(-50%) translateY(0);
        }
        .primary-nav-react .dd a {
          color: var(--ink); font-weight: 600; font-size: 14.5px;
          padding: 10px 14px; border-radius: 8px; display: block;
          border-bottom: 0;
        }
        .primary-nav-react .dd a:hover { background: rgba(255,255,255,.06); color: var(--brand); }
        /* Drawer collapsible groups */
        .drawer-nav details summary {
          font-family: "Roboto", sans-serif; font-weight: 700; font-size: 22px;
          color: var(--paper); padding: 18px 0;
          border-bottom: 1px solid var(--line);
          cursor: pointer; list-style: none;
        }
        .drawer-nav details summary::-webkit-details-marker { display: none; }
        .drawer-nav details summary::after {
          content: " ▾"; color: var(--brass); font-size: 16px;
        }
        .drawer-nav details[open] summary::after { content: " ▴"; }
        .drawer-nav details ul {
          list-style: none; padding: 8px 0 12px 14px; margin: 0;
          display: grid; gap: 8px;
        }
        .drawer-nav details ul a {
          font-family: "Roboto", sans-serif;
          color: var(--ink-mid); font-size: 15.5px; font-weight: 500;
          padding: 6px 0; border-bottom: 0;
        }
        .mobile-drawer {
          position: fixed; inset: 0; z-index: 100;
          background: var(--bg);
          padding: 24px clamp(20px, 6vw, 32px) 32px;
          display: flex; flex-direction: column; gap: 28px;
          transform: translateX(100%);
          transition: transform .28s cubic-bezier(.2,.7,.2,1);
          overflow-y: auto;
        }
        .mobile-drawer[data-open="true"] { transform: translateX(0); }
        .drawer-head {
          display: flex; align-items: center; justify-content: space-between;
        }
        .drawer-nav {
          display: flex; flex-direction: column; gap: 0;
          margin-top: 8px;
        }
        .drawer-nav a {
          font-family: "Roboto", sans-serif; font-size: 22px; font-weight: 700;
          text-decoration: none; color: var(--paper);
          padding: 18px 0; border-bottom: 1px solid var(--line);
        }
        .drawer-nav a:active { color: var(--brand); }
        .drawer-cta {
          margin-top: auto; display: flex; flex-direction: column; gap: 12px;
          padding-top: 16px;
        }
        @media (max-width: 1100px) {
          .hide-md { display: none !important; }
          .menu-toggle { display: inline-flex !important; }
          .hero-grid { grid-template-columns: 1fr !important; }
          .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .services-grid > div:nth-child(2n) { border-right: none !important; }
          .cases-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .findhelp-grid, .why-grid, .cta-grid { grid-template-columns: 1fr !important; }
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
          .voices-grid { grid-template-columns: 1fr !important; }
          .services-head { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 720px) {
          .hide-sm { display: none !important; }
          .services-grid { grid-template-columns: 1fr !important; }
          .services-grid > div { border-right: none !important; }
          .cases-grid { grid-template-columns: 1fr !important; }
          .how-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .how-line { display: none !important; }
          .footer-grid { grid-template-columns: 1fr !important; }
          .topbar-row { padding-top: 8px !important; padding-bottom: 8px !important; flex-wrap: wrap; gap: 8px; }
          .topbar-phone { font-size: 20px !important; font-weight: 700; letter-spacing: 0 !important; }
          .topbar-phone svg { width: 18px; height: 18px; }
          .lang-toggle { font-size: 14px !important; padding: 7px 16px !important; }
          body { padding-bottom: 64px; }
          .mobile-sticky-bar {
            display: flex !important; position: fixed; left: 0; right: 0; bottom: 0;
            z-index: 95; gap: 1px; background: var(--line);
            box-shadow: 0 -6px 22px rgba(0,0,0,.16);
            transform: translateZ(0); -webkit-transform: translateZ(0);
            will-change: transform;
          }
          .msb-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
            padding: 16px 8px; font-size: 16px; font-weight: 700;
            font-family: var(--sans); text-decoration: none;
          }
          .msb-call { background: var(--bg-deep); color: var(--paper); }
          .msb-wa { background: #25D366; color: #fff; }
        }
      `}</style>
    </>
  );
}

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