/* Root app + Tweaks composition */

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "variant": "warm",
  "accent": "#1e3a8a",
  "aiAccent": "#ed7c3a",
  "heroHeadline": "preset",
  "customH1": "Büronuzun",
  "customH2": "sessiz asistanı",
  "customH3": "her gece çalışır.",
  "fontPair": "montserrat",
  "density": "cozy",
  "radius": 12,
  "heroImage": "main",
  "sectionFlow": "standard"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  montserrat: { sans: "'Montserrat', system-ui, sans-serif", head: "'Montserrat', sans-serif" },
  inter: { sans: "'Inter', system-ui, sans-serif", head: "'Inter', system-ui, sans-serif" },
  fraunces: { sans: "'Inter', system-ui, sans-serif", head: "'Fraunces', Georgia, serif" },
  geist: { sans: "'Geist', system-ui, sans-serif", head: "'Geist', system-ui, sans-serif" },
  ibm: { sans: "'IBM Plex Sans', system-ui, sans-serif", head: "'IBM Plex Sans', system-ui, sans-serif" },
};

const FLOWS = {
  // Visual ↔ text alternate ritim (V=visual, T=text, C=cards)
  // hero(V) → products(C) → stats(T) → showcase(V) → dashboard(V) → steps(T) → al(V) → kobi(C) → cta(T) → loop(V) → phone(V) → pricing(C) → comparison(T) → faq(T)
  standard: ["hero", "products", "stats", "showcase", "dashboard", "steps", "al", "kobi", "cta", "loop", "phone", "pricing", "comparison", "faq"],
  warm: ["hero", "products", "stats", "showcase", "dashboard", "steps", "al", "loop", "kobi", "cta", "phone", "pricing", "faq", "comparison"],
  ai: ["hero", "al", "stats", "showcase", "products", "dashboard", "steps", "kobi", "loop", "cta", "phone", "pricing", "comparison", "faq"],
  pro: ["hero", "stats", "showcase", "products", "dashboard", "steps", "kobi", "comparison", "loop", "al", "cta", "phone", "pricing", "faq"],
};

function applyTokens(t) {
  const r = document.documentElement;
  r.style.setProperty("--button-blue", t.accent);
  r.style.setProperty("--bluelight-500", t.accent);
  r.style.setProperty("--blue-bright", t.accent);
  r.style.setProperty("--brand-500", t.accent);
  r.style.setProperty("--ai-purple", t.aiAccent);
  r.style.setProperty("--radius-lg", `${t.radius}px`);
  r.style.setProperty("--radius-xl", `${Math.round(t.radius * 1.4)}px`);
  document.body.dataset.density = t.density;
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.montserrat;
  r.style.setProperty("--font-sans", fp.sans);
  r.style.setProperty("--font-head", fp.head);
  document.body.style.fontFamily = fp.sans;
  document.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((el) => { el.style.fontFamily = fp.head; });
}

/* Inject extra Google Fonts on demand */
function ensureFontLoaded(fontPair) {
  const id = `gf-${fontPair}`;
  if (document.getElementById(id)) return;
  const families = {
    inter: "Inter:wght@400;500;600;700;800",
    fraunces: "Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700",
    geist: "Geist:wght@400;500;600;700;800",
    ibm: "IBM+Plex+Sans:wght@400;500;600;700",
  };
  if (!families[fontPair]) return;
  const link = document.createElement("link");
  link.id = id;
  link.rel = "stylesheet";
  link.href = `https://fonts.googleapis.com/css2?family=${families[fontPair]}&display=swap`;
  document.head.appendChild(link);
}

function App() {
  const [t, setTweak] = useTweaks(DEFAULT_TWEAKS);
  const [showVideoModal, setShowVideoModal] = React.useState(false);

  React.useEffect(() => { applyTokens(t); }, [t.accent, t.aiAccent, t.radius, t.density, t.fontPair]);
  React.useEffect(() => { ensureFontLoaded(t.fontPair); }, [t.fontPair]);

  const order = FLOWS[t.sectionFlow] || FLOWS.standard;

  const SECTIONS = {
    hero: <Hero tweaks={t} onWatchDemo={() => setShowVideoModal(true)} key="hero" />,
    products: <HeroProductCards key="products" />,
    stats: <StatsStrip key="stats" />,
    showcase: <LiveAutomationShowcase onWatchDemo={() => setShowVideoModal(true)} key="showcase" />,
    steps: <Steps key="steps" />,
    dashboard: <DashboardMockup key="dashboard" />,
    al: <ALSection onWatchDemo={() => setShowVideoModal(true)} key="al" />,
    kobi: <KobiCards key="kobi" />,
    cta: <CtaStrip key="cta" />,
    loop: <CardsLoop key="loop" />,
    phone: <PhoneMockup key="phone" />,
    integrations: <Integrations key="integrations" />,
    pricing: <Pricing key="pricing" />,
    comparison: <Comparison key="comparison" />,
    faq: <FAQ key="faq" />,
  };

  return (
    <>
      <PromoBar />
      <Navbar />
      <main>
        {order.map((k) => SECTIONS[k]).filter(Boolean)}
        {/* Final CTA before footer */}
        <section style={{ background: "linear-gradient(135deg, var(--brand-700) 0%, #1e2a5e 60%, var(--ai-purple) 100%)", padding: "80px 0", color: "#fff", position: "relative", overflow: "hidden" }}>
          <div aria-hidden style={{ position: "absolute", top: -100, right: -100, width: 400, height: 400, borderRadius: "50%", background: "rgba(255,255,255,.05)", filter: "blur(40px)" }} />
          <div className="container-kolaybi" style={{ position: "relative", textAlign: "center" }}>
            <h2 style={{ fontSize: 40, fontWeight: 800, letterSpacing: "-1.4px", color: "#fff", maxWidth: 700, margin: "0 auto", lineHeight: 1.15 }}>
              Mali müşavir ofisinizi <em style={{ fontStyle: "italic", color: "#fff", textShadow: "0 0 30px rgba(109,89,255,.6)" }}>14 günde otomatikleştirin.</em>
            </h2>
            <p style={{ marginTop: 18, fontSize: 16, opacity: .85, maxWidth: 540, margin: "18px auto 0" }}>
              Kredi kartı sorulmaz. İlk 50 AL faturası hediye. İptal kolay.
            </p>
            <div style={{ marginTop: 28, display: "inline-flex", flexWrap: "wrap", gap: 12, justifyContent: "center" }}>
              <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "14px 24px", borderRadius: 12, background: "#fff", color: "var(--brand-700)", fontWeight: 700, fontSize: 15 }}>14 gün ücretsiz dene <Icon.ArrowRight /></a>
              <button 
                onClick={() => setShowVideoModal(true)}
                style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "14px 24px", borderRadius: 12, background: "rgba(255,255,255,.1)", color: "#fff", border: "1px solid rgba(255,255,255,.2)", fontWeight: 600, fontSize: 15, cursor: "pointer", font: "inherit" }}
              >
                Demo iste
              </button>
            </div>
          </div>
        </section>
      </main>
      <Footer />

      {showVideoModal && (
        <div 
          onClick={() => setShowVideoModal(false)}
          style={{
            position: "fixed",
            inset: 0,
            zIndex: 1000,
            background: "rgba(11,23,39,.72)",
            backdropFilter: "blur(12px)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: 24,
            animation: "fadeIn .25s ease"
          }}
        >
          <style>{`
            @keyframes modalZoomIn {
              from { opacity: 0; transform: scale(0.95); }
              to { opacity: 1; transform: scale(1); }
            }
          `}</style>
          <div 
            onClick={(e) => e.stopPropagation()}
            style={{
              width: "100%",
              maxWidth: 800,
              background: "#0b1727",
              borderRadius: 24,
              overflow: "hidden",
              boxShadow: "0 40px 100px rgba(0,0,0,0.6)",
              position: "relative",
              border: "1px solid rgba(255,255,255,0.12)",
              animation: "modalZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
            }}
          >
            {/* Close button */}
            <button 
              onClick={() => setShowVideoModal(false)}
              aria-label="Kapat"
              style={{
                position: "absolute",
                top: 16,
                right: 16,
                zIndex: 10,
                width: 38,
                height: 38,
                borderRadius: "50%",
                background: "rgba(11,23,39,0.72)",
                backdropFilter: "blur(8px)",
                color: "#fff",
                border: "1px solid rgba(255,255,255,0.15)",
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 16,
                transition: "all 0.18s ease"
              }}
            >
              ✕
            </button>

            <video 
              src="assets/e-tebligat-otomatik.mp4" 
              controls 
              autoPlay 
              style={{
                width: "100%",
                display: "block",
                aspectRatio: "16/9",
                objectFit: "contain"
              }}
            />
          </div>
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Varyant">
          <TweakSelect
            label="Sayfa Tonu"
            value={t.variant}
            onChange={(v) => setTweak("variant", v)}
            options={[
              { value: "warm", label: "Sıcak — mali müşavire yakın" },
              { value: "ai", label: "AI-Önce — yapay zekâ vurgulu" },
              { value: "pro", label: "Profesyonel — yapı odaklı" },
            ]}
          />
          <TweakSelect
            label="Bölüm Akışı"
            value={t.sectionFlow}
            onChange={(v) => setTweak("sectionFlow", v)}
            options={[
              { value: "standard", label: "Standart (orijinale en yakın)" },
              { value: "warm", label: "Sıcak akış" },
              { value: "ai", label: "AI-Önce akışı" },
              { value: "pro", label: "Profesyonel akış" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Renkler">
          <TweakColor
            label="Ana renk"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#1e3a8a", "#0b1727", "#3558d4", "#3b82f6", "#0e7490"]}
          />
          <TweakColor
            label="İkincil aksan (turuncu/swoosh)"
            value={t.aiAccent}
            onChange={(v) => setTweak("aiAccent", v)}
            options={["#ed7c3a", "#f97316", "#dc2626", "#22c55e", "#6d59ff"]}
          />
        </TweakSection>

        <TweakSection label="Hero Başlık">
          <TweakRadio
            label="Mod"
            value={t.heroHeadline}
            onChange={(v) => setTweak("heroHeadline", v)}
            options={[
              { value: "preset", label: "Hazır" },
              { value: "custom", label: "Özel" },
            ]}
          />
          {t.heroHeadline === "custom" && (
            <>
              <TweakText label="Satır 1" value={t.customH1} onChange={(v) => setTweak("customH1", v)} />
              <TweakText label="Satır 2 (vurgu)" value={t.customH2} onChange={(v) => setTweak("customH2", v)} />
              <TweakText label="Satır 3" value={t.customH3} onChange={(v) => setTweak("customH3", v)} />
            </>
          )}
          <TweakRadio
            label="Hero görseli"
            value={t.heroImage}
            onChange={(v) => setTweak("heroImage", v)}
            options={[
              { value: "main", label: "Mali müşavir" },
              { value: "alt", label: "AL · fatura" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Tipografi & Düzen">
          <TweakSelect
            label="Font ailesi"
            value={t.fontPair}
            onChange={(v) => setTweak("fontPair", v)}
            options={[
              { value: "montserrat", label: "Montserrat (mevcut)" },
              { value: "inter", label: "Inter" },
              { value: "fraunces", label: "Inter + Fraunces (başlık)" },
              { value: "ibm", label: "IBM Plex Sans" },
              { value: "geist", label: "Geist" },
            ]}
          />
          <TweakRadio
            label="Yoğunluk"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Kompakt" },
              { value: "cozy", label: "Standart" },
              { value: "airy", label: "Ferah" },
            ]}
          />
          <TweakSlider
            label="Köşe yuvarlaklığı"
            value={t.radius}
            onChange={(v) => setTweak("radius", v)}
            min={0} max={28} step={2}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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