/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakToggle, ChatDemo, Tick */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "WhatsApp green",
  "tagline": "Is it halal? Just ask Adam.",
  "showChips": true,
  "showProof": true,
  "headlineFont": "Bricolage Grotesque"
}/*EDITMODE-END*/;

const THEMES = {
  "WhatsApp green": { "--wa-green": "#25D366", "--wa-deep": "#0E7A5F", "--wa-teal": "#075E54", "--paper": "#FBFBF8", "--paper-2": "#F4F3EC", "--gold": "#B8923A" },
  "Emerald & cream": { "--wa-green": "#2BBA7A", "--wa-deep": "#117A55", "--wa-teal": "#0C5C45", "--paper": "#FBF8F1", "--paper-2": "#F3EEE2", "--gold": "#C39A3E" },
  "Deep green & gold": { "--wa-green": "#1FA15E", "--wa-deep": "#0B6B45", "--wa-teal": "#08402C", "--paper": "#FAF8F2", "--paper-2": "#F0ECDF", "--gold": "#C9A227" },
  "Navy & green": { "--wa-green": "#27C26B", "--wa-deep": "#0F5F4A", "--wa-teal": "#13294B", "--paper": "#FAFBFC", "--paper-2": "#EEF1F4", "--gold": "#B8923A" },
};

const TAGLINES = [
  "Is it halal? Just ask Adam.",
  "Halal confidence in your pocket.",
  "One text. Instant halal.",
  "Shop halal. Eat halal. No guesswork.",
];

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="brand">
          <span className="brand-mark"><Tick size={19} color="#fff" /></span>
          Adam Checks
        </div>
        <div className="nav-links">
          <a href="#features">Features</a>
          <a href="#compare">Why Adam</a>
          <a href="#how">How it works</a>
        </div>
        <a className="btn btn-primary" href={window.WA_LINK} target="_blank" rel="noopener" style={{ marginLeft: "auto", padding: "11px 18px", fontSize: 15 }}>
          <window.WAIcon size={18} /> Add Adam
        </a>
      </div>
    </nav>
  );
}

function Hero({ tagline, showChips, showProof }) {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <span className="hero-badge"><span style={{ width: 22, height: 22, borderRadius: 7, background: "var(--wa-green)", color: "#04130C", display: "grid", placeItems: "center" }}><window.WAIcon size={13} /></span>Free &middot; No app &middot; <b>On WhatsApp</b></span>
          <h1 className="h-display">{tagline}</h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 500 }}>
            A free WhatsApp assistant that tells Canadian Muslims instantly whether a food product is halal — plus halal restaurants nearby and the best prices on certified groceries. No app to download.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href={window.WA_LINK} target="_blank" rel="noopener"><window.WAIcon /> Text Adam — it’s free</a>
            <span className="hero-num">{window.PHONE}</span>
          </div>
          {showProof && (
            <div className="hero-proof">
              <div className="stat"><b>Instant</b><span>verdicts in seconds</span></div>
              <div className="stat"><b>5 chains</b><span>price comparisons</span></div>
              <div className="stat"><b>$0</b><span>no app, no account</span></div>
            </div>
          )}
        </div>
        <div className="hero-phone-wrap">
          <div className="hero-blob"></div>
          {showChips && <div className="float-chip f1"><span style={{ color: "var(--halal)", fontSize: 16 }}>✓</span> Halal verified</div>}
          {showChips && <div className="float-chip f2"><span style={{ fontSize: 16 }}>⚡</span> Replies in seconds</div>}
          <ChatDemo />
        </div>
      </div>
    </section>
  );
}

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

  React.useEffect(() => {
    const vars = THEMES[t.theme] || THEMES["WhatsApp green"];
    Object.entries(vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    document.documentElement.style.setProperty("--wa-green-ink", vars["--wa-deep"]);
  }, [t.theme]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--font-display", `"${t.headlineFont}", "Hanken Grotesk", sans-serif`);
  }, [t.headlineFont]);

  // scroll reveal
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav />
      <Hero tagline={t.tagline} showChips={t.showChips} showProof={t.showProof} />
      <window.TrustBar />
      <window.Problem />
      <window.Features />
      <window.NoApp />
      <window.Comparison />
      <window.HowItWorks />
      <window.FinalCTA />
      <window.Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakSelect label="Color theme" value={t.theme} options={Object.keys(THEMES)} onChange={(v) => setTweak("theme", v)} />
        <TweakRadio label="Headline font" value={t.headlineFont} options={["Bricolage Grotesque", "Hanken Grotesk"]} onChange={(v) => setTweak("headlineFont", v)} />
        <TweakSection label="Hero" />
        <TweakSelect label="Tagline" value={t.tagline} options={TAGLINES} onChange={(v) => setTweak("tagline", v)} />
        <TweakToggle label="Floating chips" value={t.showChips} onChange={(v) => setTweak("showChips", v)} />
        <TweakToggle label="Proof stats" value={t.showProof} onChange={(v) => setTweak("showProof", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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