/* Production stubs — all symbols from tweaks-panel.jsx */
function useTweaks(defaults) { return [defaults || {}, function(){}]; }
function TweaksPanel({ children }) { return null; }
function TweakSection({ children }) { return null; }
function TweakRow({ children }) { return null; }
function TweakSlider() { return null; }
function TweakToggle() { return null; }
function TweakRadio() { return null; }
function TweakSelect() { return null; }
function TweakText() { return null; }
function TweakNumber() { return null; }
function TweakColor() { return null; }
function TweakButton() { return null; }

/* global React, ReactDOM */
const { useState, useEffect, useMemo } = React;

const PALETTES = {
  // ====== BRAND ======
  arogya: {
    label: "Arogya brand (forest + mint)",
    swatch: ["#083D36", "#E1F5EE", "#ffffff", "#0a2418"],
    vars: {
      "--c-bg":         "#ffffff",
      "--c-bg-2":       "#E1F5EE",
      "--c-ink":        "#0a2418",
      "--c-ink-2":      "#3a5048",
      "--c-mute":       "#7d8c84",
      "--c-line":       "#d4e7df",
      "--c-card":       "#ffffff",
      "--c-brand":      "#083D36",
      "--c-brand-deep": "#063a2f",
      "--c-accent":     "#E1F5EE",
      "--c-accent-ink": "#c97b63",
      "--c-slate":      "#0a2a22",
    }
  },
  // ====== PEPPY / ENERGETIC ======
  electric: {
    label: "Electric Blue",
    swatch: ["#2563eb", "#ffffff", "#22c55e", "#fbbf24"],
    vars: {
      "--c-bg":         "#ffffff",
      "--c-bg-2":       "#eef4ff",
      "--c-ink":        "#0b1530",
      "--c-ink-2":      "#3d4a6b",
      "--c-mute":       "#8b94ad",
      "--c-line":       "#dbe4f5",
      "--c-card":       "#ffffff",
      "--c-brand":      "#2563eb",
      "--c-brand-deep": "#1e40af",
      "--c-accent":     "#22c55e",
      "--c-slate":      "#0b1530",
    }
  },
  fresh: {
    label: "Fresh Mint",
    swatch: ["#10b981", "#ffffff", "#0ea5e9", "#f59e0b"],
    vars: {
      "--c-bg":         "#ffffff",
      "--c-bg-2":       "#ecfdf5",
      "--c-ink":        "#0a2a22",
      "--c-ink-2":      "#365e51",
      "--c-mute":       "#7a8f87",
      "--c-line":       "#d6efe3",
      "--c-card":       "#ffffff",
      "--c-brand":      "#10b981",
      "--c-brand-deep": "#047857",
      "--c-accent":     "#0ea5e9",
      "--c-slate":      "#0a2a22",
    }
  },
  citrus: {
    label: "Citrus Pop",
    swatch: ["#0ea5e9", "#fffbeb", "#84cc16", "#f97316"],
    vars: {
      "--c-bg":         "#fffdf6",
      "--c-bg-2":       "#fef3c7",
      "--c-ink":        "#0c2a3a",
      "--c-ink-2":      "#3d5566",
      "--c-mute":       "#8aa0ad",
      "--c-line":       "#f0e4b5",
      "--c-card":       "#ffffff",
      "--c-brand":      "#0ea5e9",
      "--c-brand-deep": "#0369a1",
      "--c-accent":     "#f97316",
      "--c-slate":      "#0c2a3a",
    }
  },
  meadow: {
    label: "Meadow Bright",
    swatch: ["#22c55e", "#f7fcf3", "#1d4ed8", "#facc15"],
    vars: {
      "--c-bg":         "#f7fcf3",
      "--c-bg-2":       "#e8f5dc",
      "--c-ink":        "#0e2418",
      "--c-ink-2":      "#3a5849",
      "--c-mute":       "#7e9587",
      "--c-line":       "#d3e8c1",
      "--c-card":       "#ffffff",
      "--c-brand":      "#22c55e",
      "--c-brand-deep": "#15803d",
      "--c-accent":     "#1d4ed8",
      "--c-slate":      "#0e2418",
    }
  },
  sky: {
    label: "Clear Sky",
    swatch: ["#3b82f6", "#f0f9ff", "#06b6d4", "#fb7185"],
    vars: {
      "--c-bg":         "#f0f9ff",
      "--c-bg-2":       "#dbeafe",
      "--c-ink":        "#0c1d3a",
      "--c-ink-2":      "#3d5683",
      "--c-mute":       "#8696b8",
      "--c-line":       "#cfe1f7",
      "--c-card":       "#ffffff",
      "--c-brand":      "#3b82f6",
      "--c-brand-deep": "#1d4ed8",
      "--c-accent":     "#fb7185",
      "--c-slate":      "#0c1d3a",
    }
  },
  // ====== ORIGINALS (kept for compare) ======
  sage: {
    label: "Sage & Ivory (original)",
    swatch: ["#7FA58A", "#FAF8F4", "#30475E", "#C97B63"],
    vars: {
      "--c-bg":         "#FAF8F4",
      "--c-bg-2":       "#F2EFE7",
      "--c-ink":        "#22302a",
      "--c-ink-2":      "#4a5b56",
      "--c-mute":       "#8a948f",
      "--c-line":       "#e4e1d8",
      "--c-card":       "#ffffff",
      "--c-brand":      "#7FA58A",
      "--c-brand-deep": "#4d7561",
      "--c-accent":     "#C97B63",
      "--c-slate":      "#30475E",
    }
  },
};

const SECTION_VERSIONS = {
  v2: { label: "v2 — Redesigned (Aug brief)" },
  v1: { label: "v1 — Original" },
};

const HERO_VARIANTS = {
  timeline:  { label: "Timeline",      Comp: () => window.AroHero.HeroTimeline()  },
  stack:     { label: "Family stack",  Comp: () => window.AroHero.HeroStack()     },
  editorial: { label: "Editorial",     Comp: () => window.AroHero.HeroEditorial() },
  portrait:  { label: "Split portrait",Comp: () => window.AroHero.HeroPortrait()  },
};

function applyPalette(p) {
  const root = document.documentElement;
  const pal = PALETTES[p] || PALETTES.sage;
  Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v));
}

function Nav() {
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const links = [
    { href: "/how-it-works", label: "How it works" },
    { href: "#family",        label: "For families" },
    { href: "#privacy",       label: "Privacy" },
    { href: "/pricing",       label: "Pricing" },
    { href: "/faq",           label: "FAQ" },
  ];
  return (
    <React.Fragment>
      <div className="nav">
        <div className="wrap nav-inner">
          <button className="nav-hamburger" onClick={function() { setDrawerOpen(true); }} aria-label="Open menu">
            <span></span><span></span><span></span>
          </button>
          <a href="/" className="logo" style={{ textDecoration: "none", color: "inherit" }}>
            Arogya
          </a>
          <nav className="nav-links">
            {links.map(function(l) { return <a key={l.href} href={l.href}>{l.label}</a>; })}
            <a href="/auth/google/login" className="nav-cta" style={{ fontWeight: 600 }}>Log in</a>
          </nav>
        </div>
      </div>
      {drawerOpen && (
        <div className="nav-drawer-overlay" onClick={function() { setDrawerOpen(false); }}>
          <div className="nav-drawer" onClick={function(e) { e.stopPropagation(); }}>
            <div className="nav-drawer-header">
              <span className="nav-drawer-logo">Arogya</span>
              <button className="nav-drawer-close" onClick={function() { setDrawerOpen(false); }} aria-label="Close menu">✕</button>
            </div>
            {links.map(function(l) {
              return <a key={l.href} href={l.href} className="nav-drawer-link" onClick={function() { setDrawerOpen(false); }}>{l.label}</a>;
            })}
            <a href="/auth/google/login" className="nav-drawer-cta">Log in →</a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}


/* ── Sticky floating Login CTA ──────────────────────────────────────────── */
function StickyLoginCTA() {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(function() {
    function onScroll() {
      var scrollY = window.scrollY || window.pageYOffset;
      var docH = document.documentElement.scrollHeight;
      var winH = window.innerHeight;
      // Show after 400px scroll, hide in the last 300px (final CTA area)
      var nearBottom = scrollY + winH > docH - 300;
      setVisible(scrollY > 400 && !nearBottom);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    return function() { window.removeEventListener('scroll', onScroll); };
  }, []);

  return React.createElement('div', {
    style: {
      position: 'fixed',
      bottom: 28,
      right: 24,
      zIndex: 200,
      transition: 'opacity .25s, transform .25s',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(12px)',
      pointerEvents: visible ? 'auto' : 'none',
    }
  },
    React.createElement('a', {
      href: '/auth/google/login',
      style: {
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
        background: '#1e3a8a',
        color: '#fff',
        fontFamily: 'var(--sans)',
        fontWeight: 600,
        fontSize: 14,
        padding: '12px 20px',
        borderRadius: 999,
        textDecoration: 'none',
        boxShadow: '0 4px 16px rgba(30,58,138,.35)',
        whiteSpace: 'nowrap',
      }
    }, 'Log in to Arogya →')
  );
}

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || { heroVariant: "portrait", palette: "electric", sectionsVersion: "v2", useCasesLayout: "medium" });
  useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const Hero = HERO_VARIANTS[t.heroVariant]?.Comp || HERO_VARIANTS.timeline.Comp;
  const S = window.AroSections;
  const R = window.AroRedesign;
  const v2 = t.sectionsVersion !== "v1";

  return (
    <>
      <Nav />
      <Hero />
      {v2 ? <R.FamilyChaosSection /> : <S.ChaosSection />}
      {v2 ? <R.ByPersonSection />
        : t.useCasesLayout === "cinematic"
        ? <window.AroScenes.CinematicUseCases />
        : t.useCasesLayout === "compact"
        ? <window.AroCompact.CompactUseCases />
        : <window.AroMedium.MediumUseCases />}
      {v2 ? <R.CapabilityWallSection /> : <S.QuietAISection />}
      <S.FamilySection />
      <S.InvisibleSection />
      <S.PrivacySection />
      <S.ChannelsSection />
      <S.FinalCTA />
      <S.Footer />
      <StickyLoginCTA />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Sections 2 – 4">
          <TweakRadio
            value={t.sectionsVersion || "v2"}
            onChange={v => setTweak("sectionsVersion", v)}
            options={[
              { value: "v2", label: "v2 — New" },
              { value: "v1", label: "v1 — Original" },
            ]}
          />
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", lineHeight: 1.45, marginTop: 6 }}>
            <strong>v2</strong> redesigns the chaos section (family-first), use cases (by-person life stages), and the AI capability section (document wall).
          </div>
        </TweakSection>

        <TweakSection title="Hero layout">
          <TweakSelect
            label="Variant"
            value={t.heroVariant}
            onChange={v => setTweak("heroVariant", v)}
            options={Object.entries(HERO_VARIANTS).map(([k, v]) => ({ value: k, label: v.label }))}
          />
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", lineHeight: 1.45, marginTop: 6 }}>
            Try all four — Timeline shows the family memory at work; Family stack hits the emotional note;
            Editorial leans premium; Split portrait centers a warm family moment.
          </div>
        </TweakSection>

        <TweakSection title="Use cases layout">
          <TweakSelect
            value={t.useCasesLayout}
            onChange={v => setTweak("useCasesLayout", v)}
            options={[
              { value: "medium",    label: "Medium — 2 per screen" },
              { value: "compact",   label: "Compact — 8 per screen" },
              { value: "cinematic", label: "Cinematic — 1 per screen" },
            ]}
          />
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", lineHeight: 1.45, marginTop: 6 }}>
            <strong>Medium</strong> — photo · problem · artifact in one row; 2 fit per screen.<br/>
            <strong>Compact</strong> — dense card grid, mobile-friendly menu.<br/>
            <strong>Cinematic</strong> — full-bleed scenes, one per scroll.
          </div>
        </TweakSection>

        <TweakSection title="Color palette">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {Object.entries(PALETTES).map(([k, p]) => {
              const selected = t.palette === k;
              return (
                <button
                  key={k}
                  onClick={() => setTweak("palette", k)}
                  style={{
                    background: "transparent",
                    border: selected
                      ? "1.5px solid rgba(255,255,255,.85)"
                      : "1px solid rgba(255,255,255,.18)",
                    borderRadius: 10,
                    padding: 10,
                    textAlign: "left",
                    cursor: "pointer",
                    color: "white"
                  }}>
                  <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
                    {p.swatch.map((c, i) => (
                      <span key={i} style={{
                        width: 22, height: 22, borderRadius: 5,
                        background: c,
                        border: "1px solid rgba(255,255,255,.18)"
                      }} />
                    ))}
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{p.label}</div>
                </button>
              );
            })}
          </div>
        </TweakSection>

        <TweakSection title="About these directions">
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.62)", lineHeight: 1.55 }}>
            Electric Blue — confident, modern, tech-forward.<br/>
            Fresh Mint — clinical-clean with a green accent of health.<br/>
            Citrus Pop — warmest of the peppy options, optimistic.<br/>
            Meadow Bright — green-led, outdoorsy and alive.<br/>
            Clear Sky — light, airy, blue-on-blue.
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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