// app.jsx — HOTMESS commercial layer (v2)
// Repositions HOTMESS as the live queer signal layer for partner conversion.

const GOLD_PRESETS = {
  brand: "#C8962C",
  bright: "#F2C24A",
  dark: "#8E6A1F",
  desat: "#A09682",
};

// ── Host-aware audience routing ───────────────────────────────
// World Doctrine (shared) + Emotional Entry (join.) + Infrastructure Entry (founders.)
// founders.* -> "founders"; everything else (join., vercel, local) -> "join".
const HM_SITE = (function () {
  try {
    var h = (window.location.hostname || "").toLowerCase();
    return h.indexOf("founders.") === 0 ? "founders" : "join";
  } catch (e) { return "join"; }
})();
const IS_JOIN = HM_SITE === "join";
const IS_FOUNDERS = HM_SITE === "founders";
const EDIT_MODE = (function () { try { return new URLSearchParams(window.location.search).get("edit") === "1"; } catch (e) { return false; } })();

function App() {
  const [t, setTweak] = useTweaks(window.HM_TWEAK_DEFAULTS || {
    goldIntensity: "brand",
    showWorldStates: true,
    showLiveProof: true,
    showHNH: true,
    showMembers: true,
  });

  // Apply gold to CSS variable
  React.useEffect(() => {
    const c = GOLD_PRESETS[t.goldIntensity] || GOLD_PRESETS.brand;
    document.documentElement.style.setProperty("--gold", c);
  }, [t.goldIntensity]);

  return (
    <>
      <NavV2 />
      <HeroV2 variant={IS_FOUNDERS ? "founders" : "join"} />

      {/* Hook — emotional charter, surfaces the reason upfront */}
      {IS_JOIN && <HookSection />}

      {/* 1. A Night on HOTMESS — concrete ecosystem flow */}
      <NightOnHotmessSection />

      {/* 2. What HOTMESS is — ecosystem */}
      <EcosystemSection />

      {/* 3. Who uses it — user archetypes */}
      {IS_JOIN && <WhoItsForSection />}

      {/* 4. Difference — doctrine via contrast */}
      <DifferenceSection />

      {/* 5. Everything is a signal */}
      <SignalTypesSection />

      {/* 6. The globe — Pulse expanded */}
      <PulseSectionV2 />

      {/* 7. Ghosted — mutuality first */}
      {IS_JOIN && <GhostedSection />}

      {/* 8. Why partners join — commercial logic */}
      {IS_FOUNDERS && <WhyPartnersSection />}

      {/* 9. Care infrastructure — promoted */}
      <CareInfraSection />

      {/* 10. World states — city breathing */}
      {t.showWorldStates && <WorldStatesSection />}

      {/* 11. Sound of the city — Radio + RAW CONVICT + Globe as one system */}
      <SoundOfCitySection />

      {/* 12. Ambient — continuity infrastructure when nobody's talking */}
      <AmbientSection />

      {/* 13. Dispatches — live heartbeat */}
      {IS_JOIN && <DispatchesSection />}

      {/* 14. Tap-Pack — physical infrastructure */}
      {IS_FOUNDERS && <TapPackV2 />}

      {/* 12. Live proof */}
      {t.showLiveProof && IS_FOUNDERS && <LiveProofSection />}

      {/* 13. Founding tiers */}
      {IS_FOUNDERS && <FoundingTiersV2 />}

      {/* 14. City rollout */}
      {IS_FOUNDERS && <CityRolloutSection />}

      {/* 15. Why now — category timing */}
      <WhyNowSection />

      {/* 18. Trust — privacy, safety, partner, HNH clarity */}
      <TrustSection />

      {/* 19. FAQ */}
      <FAQSection />

      {/* 20. Conversion */}
      {IS_FOUNDERS && <ConversionSection />}

      {/* Care continuity — HNH MESS + landing room (preserved) */}
      {t.showHNH && IS_JOIN && <HNHMessSection />}

      {/* Emotional anchor pair (preserved) */}
      <Dedication />
      <FounderNote />

      {/* Members (preserved) */}
      {t.showMembers && IS_JOIN && <MembersSection />}

      <Footer />

      {/* Signal Bot — bottom-left, chat widget trained on HOTMESS doctrine */}
      <SignalBot />

      {/* Floating WhatsApp — in-site contact dock (stays on site) */}
      <WhatsAppDock />

      {EDIT_MODE && <TweaksPanel>
        <TweakSection label="Gold accent" />
        <TweakColor
          label="Intensity"
          value={GOLD_PRESETS[t.goldIntensity] || GOLD_PRESETS.brand}
          options={[GOLD_PRESETS.brand, GOLD_PRESETS.bright, GOLD_PRESETS.dark, GOLD_PRESETS.desat]}
          onChange={(v) => {
            const key = Object.keys(GOLD_PRESETS).find((k) => GOLD_PRESETS[k] === v) || "brand";
            setTweak("goldIntensity", key);
          }}
        />

        <TweakSection label="Optional sections" />
        <TweakToggle label="World States" value={t.showWorldStates} onChange={(v) => setTweak("showWorldStates", v)} />
        <TweakToggle label="Live Proof"   value={t.showLiveProof}   onChange={(v) => setTweak("showLiveProof",   v)} />
        <TweakToggle label="HNH MESS"     value={t.showHNH}         onChange={(v) => setTweak("showHNH",         v)} />
        <TweakToggle label="Members"      value={t.showMembers}     onChange={(v) => setTweak("showMembers",     v)} />
      </TweaksPanel>}
    </>
  );
}

// Updated nav for v2 IA — with mobile hamburger
function NavV2() {
  const [open, setOpen] = React.useState(false);
  return (
    <header className="nav">
      <div className="nav-inner" style={{ position: "relative" }}>
        <a href="#top" aria-label="HOTMESS home">
          <Wordmark />
        </a>
        <nav className={`nav-links${open ? " open" : ""}`} onClick={() => setOpen(false)}>
          <a href="#why">Why</a>
          <a href="#night">Night</a>
          <a href="#what">What</a>
          {IS_JOIN && <a href="#who" className="nav-tertiary">Who</a>}
          <a href="#signals">Signals</a>
          <a href="#pulse">Pulse</a>
          {IS_JOIN && <a href="#ghosted" className="nav-tertiary">Ghosted</a>}
          {IS_FOUNDERS && <a href="#why-partners" className="nav-secondary">Why join</a>}
          <a href="#care">Care</a>
          <a href="#sound">Sound</a>
          {IS_FOUNDERS && <a href="#partners">Tiers</a>}
          {IS_JOIN && <a href="#members" className="nav-tertiary">Wave</a>}
          <a href="#faq" className="nav-tertiary">FAQ</a>
          {IS_JOIN
            ? <a href="/members" className="nav-cta-mobile">Claim your spot ↗</a>
            : <a href="#conversion" className="nav-cta-mobile">Become a partner ↗</a>}
        </nav>
        {IS_JOIN
          ? <a href="/members" className="nav-cta">Claim your spot ↗</a>
          : <a href="#conversion" className="nav-cta">Become a partner ↗</a>}
        <button
          type="button"
          className={`nav-mobile-toggle${open ? " open" : ""}`}
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
        ><span></span></button>
      </div>
    </header>
  );
}

function WhatsAppDock() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      {open && (
        <div role="dialog" aria-label="WhatsApp Direct" style={{
          position: "fixed", right: "clamp(16px, 3vw, 28px)", bottom: "clamp(84px, 11vw, 96px)",
          width: "min(320px, calc(100vw - 32px))", zIndex: 71,
          background: "var(--bg, #050507)", border: "1px solid var(--line, rgba(255,255,255,0.14))",
          boxShadow: "0 24px 70px rgba(0,0,0,0.55)", padding: "20px 20px 18px",
        }}>
          <div className="mono" style={{ color: "#25D366", letterSpacing: "0.16em", fontSize: 11, display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#25D366", display: "inline-block" }}></span>
            WHATSAPP DIRECT
          </div>
          <p className="serif" style={{ fontSize: 21, lineHeight: 1.15, color: "var(--ink, #fff)", margin: "14px 0 6px" }}>Real operator. Real number.</p>
          <p style={{ fontSize: 13, color: "var(--ink-2, #c9c4bb)", lineHeight: 1.55, margin: "0 0 14px" }}>Phil reads messages personally.</p>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3, #8a8a8a)", lineHeight: 2.0, letterSpacing: 0, textTransform: "none" }}>
            For:<br/>&middot; partnerships<br/>&middot; venues<br/>&middot; city conversations<br/>&middot; Radio<br/>&middot; recovery<br/>&middot; signal questions
          </div>
          <a href="https://wa.me/447457404159?text=Hi%20HOTMESS%20%E2%80%94" target="_blank" rel="noreferrer"
             style={{ display: "block", textAlign: "center", marginTop: 16, padding: "12px", background: "#25D366", color: "#04210f", fontWeight: 700, letterSpacing: "0.1em", fontSize: 12, textDecoration: "none" }}>
            OPEN WHATSAPP
          </a>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-4, #6a6a6a)", marginTop: 10, textAlign: "center" }}>07457 404159 &middot; you choose when to leave</div>
        </div>
      )}
      <button type="button" aria-label="WhatsApp HOTMESS" aria-expanded={open} onClick={() => setOpen((v) => !v)} style={{
        position: "fixed", right: "clamp(16px, 3vw, 28px)", bottom: "clamp(16px, 3vw, 28px)",
        width: 56, height: 56, borderRadius: "50%", border: "none", cursor: "pointer",
        background: "#25D366", display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "0 10px 30px rgba(37,211,102,0.4), 0 0 0 1px rgba(0,0,0,0.2)", zIndex: 70, transition: "transform .2s ease",
      }} onMouseEnter={(e) => { e.currentTarget.style.transform = "scale(1.08)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "scale(1)"; }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M17.6 14.2c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1-.8.9-1 1.1-.4.2-.7.1c-.3-.1-1.2-.5-2.3-1.4-.9-.7-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5s0-.4 0-.5-.7-1.7-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.7.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.2 4.7L2 22l5.4-1.2c1.4.7 2.9 1.1 4.6 1.1 5.5 0 10-4.5 10-10S17.5 2 12 2"/></svg>
      </button>
    </>
  );
}

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