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

// ─── Landing i18n dictionary ─────────────────────────────────────────
// Mirrors PRICING_I18N pattern. `lang` is read from <App lang="..."/>.
const LANDING_I18N = {
  en: {
    nav: {
      home: "Home",
      how: "How it works",
      platforms: "Platforms",
      features: "Features",
      pricing: "Pricing",
      faq: "FAQ",
      login: "Log in",
      cta: "Book a demo",
    },
    hero: {
      eyebrow: "AI-native marketing. End to end.",
      h1a: "Brands aren't found.",
      h1b: "They're",
      h1bAccent: "cited.",
      sub: "EOMA makes your brand AI-native. We don't just monitor where models cite you — we analyze GEO/AEO and social presence end to end, then ship the moves that change what AIs say next.",
      seeHow: "See how it works ↓",
      also: "Also works with: ChatGPT · Perplexity · Claude · Gemini",
    },
    dash: {
      visibility: "Overall visibility",
      strong: "Strong",
      developing: "Developing",
      weak: "Weak",
      aiAnswers: "AI answers",
      aiAnswersSub: "answers cite you",
      overallRank: "Overall rank",
      overallRankSub: "competitor analysis",
      training: "Training → Web",
      providerBreakdown: "Provider breakdown",
    },
    kinetic: [
      [{ tone: "navy", text: "Every search." }],
      [{ tone: "navy", text: "Every prompt." }],
      [
        { tone: "navy", text: "Someone is being cited — " },
        { tone: "accent", text: "just not you." },
      ],
      [{ tone: "navy", text: "EOMA changes that." }],
    ],
    how: {
      eyebrow: "How it works",
      ha: "Four steps.",
      hb: "Then it runs",
      hbAccent: "itself.",
      sub: "Connect your brand, pull competitor and industry signals across social and AI, watch your share of citations climb — and let EOMA execute the content, schema, and posts that close every gap.",
      foot: "From signup to first citation in under 14 days. Every move attributed to the visibility it earned.",
      steps: [
        { n: "Step 1", title: "Set up brand" },
        { n: "Step 2", title: "Pull rival data" },
        { n: "Step 3", title: "Visibility climbs" },
        { n: "Step 4", title: "Execute" },
      ],
      tile1: {
        label: "Set up your brand",
        wizardStep: "Step 2 of 10 — Website",
        question: "What's your website?",
        sub: "We'll extract your brand's voice and positioning from it.",
        cta: "Continue",
      },
      tile2: {
        label: "Pull rival data",
        title: "Competitive positioning",
        sub: "Competitor benchmark across AI providers",
        tier: "COMPETITIVE",
        rivalsLabel: "Competitor table",
        rivals: [
          { n: "stripe.com", pos: "ahead", label: "Ahead", icon: "▲" },
          { n: "square.com", pos: "even", label: "Even", icon: "—" },
          { n: "adyen.com", pos: "behind", label: "Behind", icon: "▼" },
        ],
        gapsLabel: "Keyword gaps",
        gaps: [
          {
            sev: "CRITICAL",
            sevCls: "ht-sev-crit",
            kw: "payment orchestration",
            pres: "Absent",
            presCls: "ht-gap-absent",
          },
          {
            sev: "IMPORTANT",
            sevCls: "ht-sev-not",
            kw: "checkout optimization",
            pres: "Weak",
            presCls: "ht-gap-weak",
          },
        ],
      },
      tile3: {
        label: "Visibility climbs",
        kicker: "AI Visibility",
        deltaTxt: "▲ +18 vs rivals",
      },
      tile4: {
        label: "Execute",
        title: "Weekly Actions",
        streak: "🔥 4-week streak",
        tabs: [
          { l: "All", c: 8, on: true },
          { l: "Authority", c: 2 },
          { l: "Content", c: 3 },
          { l: "Technical", c: 2 },
          { l: "Social", c: 1 },
        ],
        actions: [
          {
            done: true,
            p: "crit",
            title: "Add FAQ schema markup",
            eff: "45m",
            cat: "Technical",
            catColor: "indigo",
            agent: true,
          },
          {
            done: false,
            p: "crit",
            title: 'Publish "Payment orchestration" guide',
            eff: "4h",
            cat: "Content",
            catColor: "mint",
            agent: true,
          },
          {
            done: false,
            p: "high",
            title: "Reply on r/SaaS thread",
            eff: "30m",
            cat: "Social",
            catColor: "blue",
          },
          {
            done: false,
            p: "med",
            title: "Backlink outreach: 5 fintech blogs",
            eff: "2h",
            cat: "Authority",
            catColor: "coral",
            agent: true,
          },
        ],
      },
    },
    platforms: {
      eyebrow: "Supported platforms",
      ha: "Works with the",
      hbAccent: "platforms you already use.",
      foot: "EOMA reads citations from every model and ships posts to every social platform — through one pipeline you supervise.",
    },
    bento: {
      eyebrow: "Why EOMA",
      ha: "Others monitor.",
      hbAccent: "EOMA executes.",
      sub: "Every other AI-visibility tool stops at a dashboard. EOMA goes further — analyzing GEO/AEO and social presence end to end, then shipping the content, schema, and social moves that change what models cite next.",
      cards: {
        c1: {
          title: "One pipeline, every model.",
          cap: "ChatGPT, Claude, Gemini, Perplexity — analyzed and acted on continuously. No agencies, no dashboards-only tools, no copy-paste between platforms.",
          live: "Pipeline live",
          connecting: "Connecting models",
        },
        c2: {
          title: "Every shipped move compounds.",
          cap: "Content, schema, social — every execution closes a gap and lifts the next answer. Your AI share grows because EOMA acts, not because it watches.",
          delta: "▲ +16.3 pt last 30d",
        },
        c3: {
          title: "Every model, every answer.",
          cap: "Tracked across providers in real time. One number that means: are AIs citing you?",
          label: "Citations this week",
          meta: "Updated just now · 4 providers",
        },
        c4: {
          title: "Execution is the moat.",
          cap: "Other tools tell you what's broken. EOMA fixes it — content shipped, schema filed, social posted, replies sent. Every move attributed to the citation it earned.",
          rows: [
            {
              id: "claude",
              n: "Claude — cited brand in 8 answers",
              v: "+5.2 pt",
            },
            {
              id: "perplexity",
              n: "Perplexity — 4 new source mentions",
              v: "+2.1 pt",
            },
            {
              id: "instagram",
              n: "Instagram — content shipped",
              v: "+12 reach",
            },
            { id: "x", n: "X — brand handle in 6 replies", v: "+3.4 pt" },
          ],
          more: "View all ⌃",
        },
        c5: {
          title: "Social is the new citation source.",
          cap: "Models increasingly cite social signal. EOMA optimizes your social presence so the AIs find — and quote — you.",
          label: "Social citation share",
          delta: "▲ +14 pt vs last month",
        },
      },
    },
    final: {
      startNow: "Start now",
      h: "Make your brand",
      hAccent: "AI-native.",
      hSub: "Be cited, not searched.",
      footerCols: {
        product: "Platform",
        company: "Company",
        legal: "Legal",
      },
      productLinks: {
        aiNative: "AI-native presence",
        geo: "GEO / AEO engine",
        social: "Social optimization",
        pricing: "Pricing",
        changelog: "Changelog",
      },
      companyLinks: {
        contact: "Contact",
        privacy: "Privacy Policy",
        terms: "Terms of Use",
      },
      copy: "© 2026 EOMA · Synthetic intelligence ecosystem",
    },
    langSwitch: {
      current: "EN",
      other: "TR",
      otherHref: "/tr",
    },
  },

  tr: {
    nav: {
      home: "Ana sayfa",
      how: "Nasıl çalışır",
      platforms: "Platformlar",
      features: "Özellikler",
      pricing: "Fiyatlandırma",
      faq: "SSS",
      login: "Giriş yap",
      cta: "Demo ayarla",
    },
    hero: {
      eyebrow: "AI-native pazarlama. Uçtan uca.",
      h1a: "Markalar bulunmaz.",
      h1b: "Markalar",
      h1bAccent: "alıntılanır.",
      sub: "EOMA markanızı AI-native yapar. Sadece izlemekle kalmaz — GEO/AEO ve sosyal varlığını uçtan uca analiz eder, modellerin sonra ne diyeceğini değiştirecek hamleleri devreye alır.",
      seeHow: "Nasıl çalıştığını gör ↓",
      also: "Şunlarla da çalışır: ChatGPT · Perplexity · Claude · Gemini",
    },
    dash: {
      visibility: "Genel görünürlük",
      strong: "Güçlü",
      developing: "Gelişiyor",
      weak: "Zayıf",
      aiAnswers: "AI cevapları",
      aiAnswersSub: "cevapta görünüyorsun",
      overallRank: "Genel sıralama",
      overallRankSub: "rakip analizi",
      training: "Eğitim → Web",
      providerBreakdown: "Sağlayıcı kırılımı",
    },
    kinetic: [
      [{ tone: "navy", text: "Her arama." }],
      [{ tone: "navy", text: "Her prompt." }],
      [
        { tone: "navy", text: "Birisi alıntılanıyor — " },
        { tone: "accent", text: "ama sen değil." },
      ],
      [{ tone: "navy", text: "EOMA bunu değiştirir." }],
    ],
    how: {
      eyebrow: "Nasıl çalışır",
      ha: "Dört adım.",
      hb: "Sonra",
      hbAccent: "kendi başına çalışır.",
      sub: "Markanı bağla, sosyal ve AI'da rakip + sektör sinyallerini topla, alıntı payının yükselişini izle — ve her boşluğu kapatan içerik, schema, sosyal hamleleri EOMA'nın yürütmesine izin ver.",
      foot: "Kayıttan ilk alıntıya 14 günden az. Her hamle kazandırdığı görünürlüğe atfedilir.",
      steps: [
        { n: "1. Adım", title: "Markayı kur" },
        { n: "2. Adım", title: "Rakip verisini çek" },
        { n: "3. Adım", title: "Görünürlük yükselir" },
        { n: "4. Adım", title: "Yürüt" },
      ],
      tile1: {
        label: "Markanı kur",
        wizardStep: "10 adımdan 2 — Web sitesi",
        question: "Web siteniz nedir?",
        sub: "Markanızın sesini ve konumlandırmasını ondan çıkartırız.",
        cta: "Devam et",
      },
      tile2: {
        label: "Rakip verisini çek",
        title: "Rekabet konumlandırması",
        sub: "AI sağlayıcıları genelinde rakip karşılaştırma",
        tier: "REKABETÇİ",
        rivalsLabel: "Rakip tablosu",
        rivals: [
          { n: "stripe.com", pos: "ahead", label: "Önde", icon: "▲" },
          { n: "square.com", pos: "even", label: "Eşit", icon: "—" },
          { n: "adyen.com", pos: "behind", label: "Geride", icon: "▼" },
        ],
        gapsLabel: "Keyword bazında zayıflıklar",
        gaps: [
          {
            sev: "KRİTİK",
            sevCls: "ht-sev-crit",
            kw: "payment orchestration",
            pres: "Yok",
            presCls: "ht-gap-absent",
          },
          {
            sev: "ÖNEMLİ",
            sevCls: "ht-sev-not",
            kw: "checkout optimization",
            pres: "Zayıf",
            presCls: "ht-gap-weak",
          },
        ],
      },
      tile3: {
        label: "Görünürlük yükselir",
        kicker: "AI Görünürlüğü",
        deltaTxt: "▲ +18 vs rakipler",
      },
      tile4: {
        label: "Yürüt",
        title: "Haftalık Aksiyonlar",
        streak: "🔥 4 hafta seri",
        tabs: [
          { l: "Tümü", c: 8, on: true },
          { l: "Otorite", c: 2 },
          { l: "İçerik", c: 3 },
          { l: "Teknik", c: 2 },
          { l: "Sosyal", c: 1 },
        ],
        actions: [
          {
            done: true,
            p: "crit",
            title: "FAQ schema markup ekle",
            eff: "45dk",
            cat: "Teknik",
            catColor: "indigo",
            agent: true,
          },
          {
            done: false,
            p: "crit",
            title: '"Payment orchestration" rehberi yayınla',
            eff: "4s",
            cat: "İçerik",
            catColor: "mint",
            agent: true,
          },
          {
            done: false,
            p: "high",
            title: "Reddit r/SaaS thread'inde cevap ver",
            eff: "30dk",
            cat: "Sosyal",
            catColor: "blue",
          },
          {
            done: false,
            p: "med",
            title: "Backlink outreach: 5 fintech blog",
            eff: "2s",
            cat: "Otorite",
            catColor: "coral",
            agent: true,
          },
        ],
      },
    },
    platforms: {
      eyebrow: "Desteklenen platformlar",
      ha: "Zaten kullandığın",
      hbAccent: "platformlarla çalışır.",
      foot: "EOMA her modelden alıntıları okur, her sosyal platforma paylaşım gönderir — senin denetlediğin tek bir pipeline üstünden.",
    },
    bento: {
      eyebrow: "Neden EOMA",
      ha: "Diğerleri izler.",
      hbAccent: "EOMA yürütür.",
      sub: "Diğer her AI-görünürlük aracı bir dashboard'da durur. EOMA daha ileri gider — GEO/AEO ve sosyal varlığını uçtan uca analiz eder, modellerin sonra alıntılayacağı içerik, schema ve sosyal hamleleri yapar.",
      cards: {
        c1: {
          title: "Tek pipeline, her model.",
          cap: "ChatGPT, Claude, Gemini, Perplexity — sürekli analiz edilir ve eyleme geçirilir. Ajans yok, sadece-dashboard araç yok, platformlar arası kopyala-yapıştır yok.",
          live: "Pipeline aktif",
          connecting: "Modeller bağlanıyor",
        },
        c2: {
          title: "Yapılan her hamle birikir.",
          cap: "İçerik, schema, sosyal — her uygulama bir boşluğu kapatır ve sonraki cevabı yükseltir. AI payın izlediğin için değil, EOMA hareket ettiği için artar.",
          delta: "▲ son 30 günde +16.3 pt",
        },
        c3: {
          title: "Her model, her cevap.",
          cap: "Sağlayıcılar arasında gerçek zamanlı izlenir. Tek bir sayı: AI'lar seni alıntılıyor mu?",
          label: "Bu haftaki alıntılar",
          meta: "Az önce güncellendi · 4 sağlayıcı",
        },
        c4: {
          title: "Yürütme bir hendek.",
          cap: "Diğer araçlar neyin bozuk olduğunu söyler. EOMA tamir eder — içerik gönderildi, schema yazıldı, sosyal paylaşıldı, cevap verildi. Her hamle, kazandırdığı alıntıya atfedilir.",
          rows: [
            {
              id: "claude",
              n: "Claude — 8 cevapta marka alıntılandı",
              v: "+5.2 pt",
            },
            {
              id: "perplexity",
              n: "Perplexity — 4 yeni kaynak alıntısı",
              v: "+2.1 pt",
            },
            {
              id: "instagram",
              n: "Instagram — içerik gönderildi",
              v: "+12 erişim",
            },
            { id: "x", n: "X — 6 yanıtta marka adı geçti", v: "+3.4 pt" },
          ],
          more: "Tümünü gör ⌃",
        },
        c5: {
          title: "Sosyal yeni alıntı kaynağı.",
          cap: "Modeller giderek daha çok sosyal sinyali alıntılıyor. EOMA sosyal varlığını optimize eder, böylece AI'lar seni bulur — ve seni alıntılar.",
          label: "Sosyal alıntı payı",
          delta: "▲ geçen aya göre +14 pt",
        },
      },
    },
    final: {
      startNow: "Şimdi başla",
      h: "Markanı",
      hAccent: "AI-native yap.",
      hSub: "Aranma, alıntılan.",
      footerCols: {
        product: "Platform",
        company: "Şirket",
        legal: "Yasal",
      },
      productLinks: {
        aiNative: "AI-native varlık",
        geo: "GEO / AEO motoru",
        social: "Sosyal optimizasyon",
        pricing: "Fiyatlandırma",
        changelog: "Sürüm notları",
      },
      companyLinks: {
        contact: "İletişim",
        privacy: "Gizlilik Politikası",
        terms: "Kullanım Şartları",
      },
      copy: "© 2026 EOMA · Sentetik zekâ ekosistemi",
    },
    langSwitch: {
      current: "TR",
      other: "EN",
      otherHref: "/",
    },
  },
};

// ─── External destinations ──────────────────────────────────────────
// All production URLs in one place. Update here when prod routes move.
const URLS = {
  login: "https://eoma.ai/login",
  signup: "https://eoma.ai/signup",
  audit: "mailto:account@eoma.ai?subject=Free%20AEO%20audit&body=Website%20URL%3A%20",
  demo: "mailto:account@eoma.ai?subject=Book%20a%20demo",
  apply: "mailto:account@eoma.ai?subject=Pro%20plan%20inquiry",
  contact: "mailto:account@eoma.ai",
  pricing: "/pricing",
  pricingTr: "/tr/pricing",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  ctaLabel: "Get started",
  showIntro: true,
  accentColor: "#536CBD",
}; /*EDITMODE-END*/

function App({ lang = "en" } = {}) {
  const t = LANDING_I18N[lang] || LANDING_I18N.en;

  // Use translated CTA label by default; the tweaks panel can still override.
  const tweakDefaults = { ...TWEAK_DEFAULTS, ctaLabel: t.nav.cta };
  const [tweaks, setTweak] = useTweaks(tweakDefaults);
  const [introDone, setIntroDone] = useState(false);

  useEffect(() => {
    if (!tweaks.showIntro) {
      setIntroDone(true);
      return;
    }
    const t = setTimeout(() => setIntroDone(true), 3000);
    return () => clearTimeout(t);
  }, [tweaks.showIntro]);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accentColor);
  }, [tweaks.accentColor]);

  // Pricing href changes per language so the lang persists when navigating.
  const pricingHref = lang === "tr" ? URLS.pricingTr : URLS.pricing;

  // Demo modal state. `source` identifies which CTA opened the modal so
  // we can attribute conversions to specific landing-page CTAs in GA4.
  const [demoOpen, setDemoOpen] = useState(false);
  const [demoSource, setDemoSource] = useState("");
  const openDemo = (source) => {
    setDemoSource(source);
    setDemoOpen(true);
  };
  const closeDemo = () => setDemoOpen(false);

  return (
    <>
      {tweaks.showIntro && <Intro done={introDone} />}
      <Nav
        ctaLabel={tweaks.ctaLabel}
        t={t}
        lang={lang}
        pricingHref={pricingHref}
        urls={URLS}
        onDemoClick={() => openDemo("nav_cta")}
      />
      <Hero ctaLabel={tweaks.ctaLabel} t={t} urls={URLS} onDemoClick={() => openDemo("hero_cta")} />
      <Kinetic t={t} />
      <HowItWorks t={t} />
      <Platforms t={t} />
      <Bento
        ctaLabel={tweaks.ctaLabel}
        t={t}
        urls={URLS}
        onDemoClick={() => openDemo("bento_cta")}
      />
      <FAQ t={t} lang={lang} />
      <FinalCTA
        ctaLabel={tweaks.ctaLabel}
        t={t}
        lang={lang}
        urls={URLS}
        pricingHref={pricingHref}
        onDemoClick={() => openDemo("final_cta")}
      />

      {/* Demo booking modal — wired into every primary CTA */}
      {typeof window !== "undefined" && window.DemoBookingModal && (
        <window.DemoBookingModal
          open={demoOpen}
          onClose={closeDemo}
          source={demoSource}
          lang={lang}
        />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Copy">
          <TweakText
            label="CTA label"
            value={tweaks.ctaLabel}
            onChange={(v) => setTweak("ctaLabel", v)}
          />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakColor
            label="Accent color"
            value={tweaks.accentColor}
            onChange={(v) => setTweak("accentColor", v)}
          />
        </TweakSection>
        <TweakSection title="Intro">
          <TweakToggle
            label="Show intro animation"
            value={tweaks.showIntro}
            onChange={(v) => setTweak("showIntro", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Read lang attr from the HTML root if not passed explicitly.
const _htmlLang = (document.documentElement.getAttribute("lang") || "en")
  .toLowerCase()
  .startsWith("tr")
  ? "tr"
  : "en";

ReactDOM.createRoot(document.getElementById("root")).render(<App lang={_htmlLang} />);