/* listgetbuy — landing root: header, mode toggle, hero, footer */

const MAIN_LABELS = {
  tr: {
    buyerLabel: 'Alıcıyım',
    sellerLabel: 'Satıcıyım',
    login: 'Giriş Yap',
    badge: 'LİSTELE, TEKLİF AL',
    heroTitle: 'Fiyatı sen kovalama. Sana gelsin.',
    heroSubtitle: 'Ne almak istediğini yaz, bütçeni belirle. Satıcılar teklifleriyle rekabet etsin, fiyat sen izlerken düşsün. En iyi teklif kazansın.',
    motto: 'Alan memnun, Satan memnun',
    startCTA: 'Hemen Başla',
    scrollCTA: 'KAYDIR, NASIL ÇALIŞTIĞINI GÖR',
    footerTitle: 'Listele. Teklif al. Ucuza al.',
    footerSubtitle: 'Bir tarafta ucuza alan alıcı, diğer tarafta reklamsız satan satıcı. İkisi de kazanır.',
    footerStartBuyer: 'Alıcı olarak başla',
    footerStartSeller: 'Satıcı olarak başla',
    howEyebrow: 'NASIL ÇALIŞIR',
    howTitle: 'Bütçeni yaz — satıcılar fiyatı senin için düşürsün.',
    howSubtitle: 'Klasik pazaryerinin tersi: aramaya değil, sana geliyor. Birden fazla satıcı bütçenin altında, birbirinin altına teklif veriyor. Sen fiyatın eridiğini izliyorsun.',
    step1Eyebrow: '1. Sen',
    step1Title: 'İstediğini ve bütçeni söyle',
    step1Desc: 'Ne almak istediğini bir cümleyle yaz, ödeyebileceğin maks bütçeyi belirle. Süreyi sen seçiyorsun.',
    step2Eyebrow: '2. Satıcılar',
    step2Title: 'Bütçenin altında yarışıyorlar',
    step2Desc: 'Birden fazla satıcı senin için rekabet ediyor. Her yeni teklif bir önceki en düşüğün altına iniyor.',
    step3Eyebrow: '3. Sonuç',
    step3Title: 'En düşük teklif senin oluyor',
    step3Desc: 'Süre bitince ya da sen onayladığında işlem kapanır. Cebinde kalan miktar net.',
    demoBudgetLabel: 'Bütçen',
    demoLowestLabel: 'En düşük teklif',
    demoSavingsLabel: 'Sen tasarruf ettin',
    demoSellersCompeting: 'satıcı yarışıyor',
    faqEyebrow: 'SIKÇA SORULAN',
    faqTitle: 'Aklındaki sorular',
    faq: [
      { q: 'ListGetBuy nedir?', a: 'Klasik bir satış pazaryeri değil — alım pazaryeri. Alıcı ne aldığını ve bütçesini söyler; satıcılar bu bütçenin altında rekabet eder. Yön tersine işliyor: ürün sana geliyor, sen ürünün peşinden koşmuyorsun.' },
      { q: 'Kimler satıcı olabilir?', a: 'Herkes — bireysel kullanıcı ya da firma. Telefon doğrulamasıyla satıcı moduna geçilir; istersen firma kaydı yaparak vergi belgenle şirket olarak teklif verebilirsin. Şirket satıcılar profilde "Mağaza" rozetiyle görünür.' },
      { q: 'Ücretsiz mi?', a: 'Listeleme + teklif verme + mesajlaşma tamamen ücretsiz. Komisyon sadece kargolu / online ödemeli işlemlerde, alıcının bütçesinden yaptığı tasarruftan alınır. Yani sıfır cepten maliyet — kazandığın indirimden küçük bir pay platforma kalır.' },
      { q: 'Elden teslimde komisyon var mı?', a: 'Hayır. Elden teslimde hiçbir komisyon yok; alıcı ile satıcı tutarı kendi aralarında halleder.' },
      { q: 'Ödeme güvenliği nasıl?', a: 'Online ödemelerde Stripe Connect pazaryeri sistemi kullanılır. Ödeme alıcıdan tahsil edilir, satıcıya hemen geçmez — iki taraf da teslimi onayladığında para güvenli biçimde satıcıya aktarılır.' },
      { q: 'İade ve anlaşmazlık?', a: 'İade süreçleri alıcı ile satıcı arasındadır. Mesajlaşma altyapısını biz sağlarız, çözümü taraflar kendi aralarında bulur. Mutabakata varılamazsa Stripe üzerinden anlaşmazlık (dispute) açılabilir.' },
      { q: 'Süre dolarsa ne olur?', a: 'Süre bitince en düşük teklif otomatik kazanır, ödeme alınır ve satıcı kargolar. Sen istersen süre dolmadan da kabul edebilirsin.' },
    ],
    sellerCtaEyebrow: 'SATICI MISIN?',
    sellerCtaTitle: 'Alıcı sana hazır geliyor.',
    sellerCtaDesc: 'Alıcı ne istediğini ve bütçesini söylüyor. Sen sadece teklifini ver. Reklam, mağaza yönetimi, depo yok — sadece satış.',
    sellerCtaButton: 'Satıcı sayfasını gör',
    sellerCtaBullets: [
      'Hazır talep, hazır bütçe',
      'Komisyon yalnızca alıcının tasarrufundan, sadece online ödemede',
      'Reklam, mağaza, depo yok',
      'Stripe pazaryeri — onay sonrası güvenli aktarım',
    ]
  },
  en: {
    buyerLabel: 'I\'m a Buyer',
    sellerLabel: 'I\'m a Seller',
    login: 'Log In',
    badge: 'LIST, GET OFFERS',
    heroTitle: 'Don\'t chase the price. Let it come to you.',
    heroSubtitle: 'Write down what you want to buy, set your budget. Sellers underbid each other, watch the price drop. The lowest offer wins.',
    motto: 'Happy Buyer, Happy Seller',
    startCTA: 'Get Started',
    scrollCTA: 'SCROLL TO SEE HOW IT WORKS',
    footerTitle: 'List. Get offers. Buy cheaper.',
    footerSubtitle: 'On one side, the buyer gets it cheaper; on the other, the seller sells without ads. Both win.',
    footerStartBuyer: 'Start as a buyer',
    footerStartSeller: 'Start as a seller',
    howEyebrow: 'HOW IT WORKS',
    howTitle: 'Set your budget — sellers compete to lower the price for you.',
    howSubtitle: "The reverse marketplace: it comes to you, not the other way around. Multiple sellers underbid each other below your budget. You watch the price melt.",
    step1Eyebrow: '1. You',
    step1Title: 'Tell us what & your budget',
    step1Desc: 'Write what you want to buy in one line and set the max you would pay. You choose the time window.',
    step2Eyebrow: '2. Sellers',
    step2Title: 'They compete under your budget',
    step2Desc: 'Multiple sellers race for your purchase. Each new bid goes below the previous lowest.',
    step3Eyebrow: '3. Result',
    step3Title: 'The lowest bid is yours',
    step3Desc: 'When the timer ends or you accept, the deal is sealed. What stays in your pocket is clear.',
    demoBudgetLabel: 'Your budget',
    demoLowestLabel: 'Lowest offer',
    demoSavingsLabel: 'You saved',
    demoSellersCompeting: 'sellers competing',
    faqEyebrow: 'FREQUENTLY ASKED',
    faqTitle: 'Things you might wonder',
    faq: [
      { q: 'What is ListGetBuy?', a: 'Not a classic selling marketplace — a buying marketplace. The buyer states what they want and their budget; sellers compete under that budget. The flow is reversed: the product comes to you instead of you chasing it.' },
      { q: 'Who can be a seller?', a: 'Anyone — individuals or businesses. Sellers verify by phone; if you wish, register as a company with a tax document and bid as a business. Business sellers show a "Shop" badge on their profile.' },
      { q: 'Is it free?', a: 'Posting a listing, bidding and messaging are completely free. Commission applies only on shipped / online-paid orders and comes out of the buyer\'s savings (the gap between budget and winning bid). Zero out-of-pocket cost — just a small share of what you saved.' },
      { q: 'Any fee for in-person handover?', a: 'No. Zero commission on in-person handovers; the buyer and seller settle the amount between themselves.' },
      { q: 'How safe is the payment?', a: 'Online payments use the Stripe Connect marketplace system. The buyer is charged but the seller is not paid immediately — funds are released to the seller only after both sides confirm delivery.' },
      { q: 'Returns and disputes?', a: 'Returns are handled directly between the buyer and the seller — we provide the messaging layer; the resolution stays with them. If no agreement is reached, a Stripe dispute can be opened.' },
      { q: 'What happens when time runs out?', a: 'The lowest offer wins automatically; payment is taken and the seller ships. You can also accept before the timer ends.' },
    ],
    sellerCtaEyebrow: 'ARE YOU A SELLER?',
    sellerCtaTitle: 'The buyer comes ready.',
    sellerCtaDesc: 'The buyer tells you what they want and their budget. You just submit your offer. No ads, no storefront, no warehouse — just sales.',
    sellerCtaButton: 'See the seller page',
    sellerCtaBullets: [
      'Ready demand, ready budget',
      'Commission only from buyer\'s savings, only on online payments',
      'No ads, no storefront, no warehouse',
      'Stripe marketplace — secure transfer after confirmation',
    ]
  },
  de: {
    buyerLabel: 'Ich bin Käufer',
    sellerLabel: 'Ich bin Verkäufer',
    login: 'Einloggen',
    badge: 'INSERIEREN, ANGEBOTE ERHALTEN',
    heroTitle: 'Jag dem Preis nicht hinterher. Lass ihn zu dir kommen.',
    heroSubtitle: 'Schreibe auf, was du kaufen möchtest, setze dein Budget. Verkäufer unterbieten sich gegenseitig, sieh zu, wie der Preis sinkt. Das niedrigste Angebot gewinnt.',
    motto: 'Zufriedener Käufer, Zufriedener Verkäufer',
    startCTA: 'Loslegen',
    scrollCTA: 'SCROLLEN, UM ZU SEHEN WIE ES FUNKTIONIERT',
    footerTitle: 'Inserieren. Angebote erhalten. Günstiger kaufen.',
    footerSubtitle: 'Auf der einen Seite kauft der Käufer günstiger, auf der anderen verkauft der Verkäufer ohne Werbung. Beide gewinnen.',
    footerStartBuyer: 'Als Käufer starten',
    footerStartSeller: 'Als Verkäufer starten',
    howEyebrow: 'SO FUNKTIONIERT ES',
    howTitle: 'Lege dein Budget fest — Verkäufer drücken den Preis für dich.',
    howSubtitle: 'Der umgekehrte Marktplatz: der Preis kommt zu dir, nicht du zum Preis. Mehrere Verkäufer unterbieten sich unter deinem Budget. Du siehst, wie der Preis schmilzt.',
    step1Eyebrow: '1. Du',
    step1Title: 'Sag, was du willst und dein Budget',
    step1Desc: 'Schreibe in einem Satz, was du kaufen möchtest, und lege das maximale Budget fest. Du wählst den Zeitraum.',
    step2Eyebrow: '2. Verkäufer',
    step2Title: 'Sie konkurrieren unter deinem Budget',
    step2Desc: 'Mehrere Verkäufer wetteifern. Jedes neue Angebot liegt unter dem bisherigen niedrigsten.',
    step3Eyebrow: '3. Ergebnis',
    step3Title: 'Das niedrigste Angebot gehört dir',
    step3Desc: 'Wenn die Zeit endet oder du annimmst, ist der Deal besiegelt. Was bei dir bleibt, ist klar.',
    demoBudgetLabel: 'Dein Budget',
    demoLowestLabel: 'Niedrigstes Angebot',
    demoSavingsLabel: 'Du sparst',
    demoSellersCompeting: 'Verkäufer im Wettbewerb',
    faqEyebrow: 'HÄUFIGE FRAGEN',
    faqTitle: 'Was dich vielleicht interessiert',
    faq: [
      { q: 'Was ist ListGetBuy?', a: 'Kein klassischer Verkaufsmarktplatz — ein Kaufmarktplatz. Der Käufer nennt, was er sucht, und sein Budget; Verkäufer konkurrieren unter diesem Budget. Der Ablauf ist umgekehrt: das Produkt kommt zu dir, statt dass du es jagst.' },
      { q: 'Wer kann verkaufen?', a: 'Jeder — Privatpersonen oder Firmen. Verkäufer verifizieren sich per Telefon; wer möchte, registriert sich als Firma mit Steuernachweis und bietet gewerblich. Geschäftliche Verkäufer tragen ein "Shop"-Badge im Profil.' },
      { q: 'Ist es kostenlos?', a: 'Listings erstellen, bieten und chatten sind komplett kostenlos. Eine Provision fällt nur bei versendeten / online bezahlten Aufträgen an — und zwar aus der Ersparnis des Käufers (Differenz Budget − Gewinnergebot). Keine Auslagen, nur ein kleiner Anteil deiner Ersparnis.' },
      { q: 'Gibt es eine Gebühr bei Übergabe vor Ort?', a: 'Nein. Keine Provision bei persönlicher Übergabe; Käufer und Verkäufer regeln den Betrag unter sich.' },
      { q: 'Wie ist mein Geld geschützt?', a: 'Online-Zahlungen laufen über Stripe Connect (Marketplace). Der Käufer zahlt, der Verkäufer erhält das Geld aber erst, wenn beide Seiten die Übergabe bestätigt haben.' },
      { q: 'Rückgaben und Streitfälle?', a: 'Rückgaben werden direkt zwischen Käufer und Verkäufer abgewickelt — wir stellen den Nachrichten-Layer; die Lösung bleibt bei euch. Bei Uneinigkeit kann ein Stripe-Dispute eröffnet werden.' },
      { q: 'Was passiert, wenn die Zeit abläuft?', a: 'Das niedrigste Angebot gewinnt automatisch, die Zahlung wird abgewickelt und der Verkäufer versendet. Du kannst auch früher annehmen.' },
    ],
    sellerCtaEyebrow: 'BIST DU VERKÄUFER?',
    sellerCtaTitle: 'Der Käufer kommt fertig zu dir.',
    sellerCtaDesc: 'Der Käufer sagt, was er möchte und sein Budget. Du gibst nur dein Angebot ab. Keine Werbung, kein Shop, kein Lager — nur Verkauf.',
    sellerCtaButton: 'Verkäufer-Seite ansehen',
    sellerCtaBullets: [
      'Bereite Nachfrage, bereites Budget',
      'Provision nur aus der Käufer-Ersparnis, nur bei Online-Zahlung',
      'Keine Werbung, kein Shop, kein Lager',
      'Stripe-Marketplace — sichere Auszahlung nach Bestätigung',
    ]
  }
};

function detectLanguage() {
  // Önce landing kendi anahtarı, sonra webapp anahtarı (kullanıcı /webapp'te dil değiştirdiyse de hatırla)
  const saved = localStorage.getItem('listgetbuy_lang') || localStorage.getItem('lgb_lang');
  if (saved && ['tr', 'en', 'de'].includes(saved)) return saved;
  const browserLang = (navigator.language || navigator.userLanguage || 'tr').toLowerCase();
  if (browserLang.startsWith('de')) return 'de';
  if (browserLang.startsWith('en')) return 'en';
  return 'tr';
}

function Header({ mode, setMode, labels, lang }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'oklch(0.965 0.008 95 / 0.82)', backdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="header-container" style={{ maxWidth: 1100, margin: '0 auto', padding: '12px 5vw', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="logo-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <window.Lockup size={28} />
          {/* Mobile Login Icon */}
          <a href={`/app?mode=signin&lang=${lang}`} className="mobile-login-icon" style={{
            display: 'none',
            alignItems: 'center',
            justifyContent: 'center',
            width: 38,
            height: 38,
            borderRadius: 999,
            background: 'var(--green-soft)',
            border: '1.5px solid var(--green)',
            color: 'var(--green-ink)',
            textDecoration: 'none',
            transition: 'all .2s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = 'var(--green)';
            e.currentTarget.style.color = '#fff';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = 'var(--green-soft)';
            e.currentTarget.style.color = 'var(--green-ink)';
          }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          </a>
        </div>
        <div className="mode-switch-container" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a href={`/app?mode=signin&lang=${lang}`} className="desktop-login" style={{
            textDecoration: 'none',
            fontSize: 13,
            fontWeight: 700,
            padding: '8px 18px',
            borderRadius: 999,
            background: 'var(--ink)',
            color: '#fff',
            transition: 'all .2s',
          }}
          onMouseEnter={(e) => e.target.style.opacity = 0.85}
          onMouseLeave={(e) => e.target.style.opacity = 1}
          >{labels.login}</a>
        </div>
      </div>
    </header>
  );
}

function BuyerHero({ labels, lang }) {
  return (
    <section style={{ maxWidth: 1100, margin: '0 auto', padding: 'clamp(56px, 12vh, 130px) 5vw clamp(20px, 5vh, 40px)', ...window.GREEN_THEME }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '7px 13px', borderRadius: 999, background: 'var(--green-soft)', marginBottom: 22 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--green)', animation: 'pulseDot 1.6s infinite' }} />
        <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--green-ink)', letterSpacing: '0.04em' }}>{labels.badge}</span>
      </div>
      <h1 style={{ fontSize: 'clamp(38px, 8vw, 84px)', fontWeight: 800, letterSpacing: '-0.045em', lineHeight: 0.98, margin: '0 0 20px', maxWidth: 820, textWrap: 'balance' }}>
        {labels.heroTitle.split('. ')[0]}.<br /><span style={{ color: 'var(--green-ink)' }}>{labels.heroTitle.split('. ')[1]}</span>
      </h1>
      <p style={{ fontSize: 'clamp(16px, 2.2vw, 21px)', fontWeight: 600, color: 'var(--ink-2)', lineHeight: 1.45, maxWidth: 540, margin: '0 0 16px', textWrap: 'pretty' }}>
        {labels.heroSubtitle}
      </p>
      <div style={{ fontSize: 'clamp(14px, 1.8vw, 17px)', fontWeight: 700, color: 'var(--green-ink)', fontStyle: 'italic', marginBottom: 32 }}>
        ✨ {labels.motto}
      </div>
      <div style={{ margin: '0 0 48px' }}>
        <a href={`/app?mode=signup&lang=${lang}`} style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          textDecoration: 'none',
          fontSize: 16,
          fontWeight: 800,
          padding: '14px 28px',
          borderRadius: 14,
          background: 'var(--green)',
          color: 'var(--dark)',
          boxShadow: '0 8px 20px -6px rgba(0,0,0,0.25)',
          transition: 'all .2s',
        }}
        onMouseEnter={(e) => e.target.style.opacity = 0.9}
        onMouseLeave={(e) => e.target.style.opacity = 1}
        >
          {labels.startCTA}
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
        </a>
      </div>
      <div
        className="scroll-cue"
        role="button"
        tabIndex={0}
        aria-label={labels.scrollCTA}
        onClick={() => window.scrollBy({ top: Math.round(window.innerHeight * 0.85), behavior: 'smooth' })}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.scrollBy({ top: Math.round(window.innerHeight * 0.85), behavior: 'smooth' }); } }}
        style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          color: 'var(--green)', cursor: 'pointer', userSelect: 'none',
          animation: 'cueBlink 1.4s ease-in-out infinite',
        }}
      >
        <span className="mono" style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: '0.08em' }}>{labels.scrollCTA}</span>
        <span style={{ fontSize: 28, lineHeight: 1, animation: 'cueBounce 1.4s ease-in-out infinite' }}>↓</span>
      </div>
    </section>
  );
}

function HowItWorks({ labels }) {
  // Animated bid demo: budget 8000, lowest bid drops 8000 → 5450
  const [lowest, setLowest] = React.useState(8000);
  const target = 5450;
  const budget = 8000;
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        // Animasyonu bir kez başlat
        let step = 0;
        const steps = [7800, 7400, 7150, 6800, 6500, 6200, 5950, 5750, 5600, 5450];
        const timer = setInterval(() => {
          setLowest(steps[step]);
          step += 1;
          if (step >= steps.length) clearInterval(timer);
        }, 220);
        obs.disconnect();
      }
    }, { threshold: 0.4 });
    const el = document.getElementById('how-demo-anchor');
    if (el) obs.observe(el);
    return () => obs.disconnect();
  }, []);
  const fmt = (n) => '€ ' + n.toLocaleString('de-DE');
  const pct = Math.round(((budget - lowest) / budget) * 100);
  const savings = budget - lowest;

  const steps = [
    { eyebrow: labels.step1Eyebrow, title: labels.step1Title, desc: labels.step1Desc, icon: '📝' },
    { eyebrow: labels.step2Eyebrow, title: labels.step2Title, desc: labels.step2Desc, icon: '⚡' },
    { eyebrow: labels.step3Eyebrow, title: labels.step3Title, desc: labels.step3Desc, icon: '🏆' },
  ];

  return (
    <section id="how-it-works" style={{ background: '#fff', padding: 'clamp(60px, 10vh, 120px) 5vw' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, background: 'var(--green-soft)', marginBottom: 18 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--green)' }} />
          <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--green-ink)', letterSpacing: '0.06em' }}>{labels.howEyebrow}</span>
        </div>
        <h2 style={{ fontSize: 'clamp(30px, 5.5vw, 56px)', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.04, margin: '0 0 14px', maxWidth: 820, textWrap: 'balance' }}>
          {labels.howTitle}
        </h2>
        <p style={{ fontSize: 'clamp(15px, 1.9vw, 19px)', fontWeight: 600, color: 'var(--ink-2)', lineHeight: 1.5, maxWidth: 720, margin: '0 0 48px', textWrap: 'pretty' }}>
          {labels.howSubtitle}
        </p>

        {/* Bütçe yarışı görseli */}
        <div id="how-demo-anchor" style={{
          background: 'linear-gradient(180deg, var(--green-soft) 0%, #fff 100%)',
          border: '1.5px solid var(--green-soft)',
          borderRadius: 24, padding: 'clamp(20px, 4vw, 36px)',
          marginBottom: 60,
          boxShadow: '0 30px 80px -40px rgba(0,0,0,0.18)',
        }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 16, marginBottom: 18 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>{labels.demoBudgetLabel}</div>
              <div className="mono" style={{ fontSize: 'clamp(24px, 4vw, 36px)', fontWeight: 800, color: 'var(--ink-2)', textDecoration: 'line-through', letterSpacing: '-0.02em' }}>{fmt(budget)}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--green-ink)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>
                <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--green)', marginRight: 6, animation: 'pulseDot 1.6s infinite' }} />
                {labels.demoLowestLabel}
              </div>
              <div className="mono" style={{ fontSize: 'clamp(34px, 6vw, 56px)', fontWeight: 900, color: 'var(--green-ink)', letterSpacing: '-0.035em', lineHeight: 1, transition: 'color 0.2s' }}>{fmt(lowest)}</div>
            </div>
          </div>

          {/* Bar: budget → lowest */}
          <div style={{ position: 'relative', height: 14, background: 'rgba(0,0,0,0.06)', borderRadius: 999, overflow: 'hidden', marginBottom: 18 }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, bottom: 0,
              width: `${(lowest / budget) * 100}%`,
              background: 'linear-gradient(90deg, var(--green) 0%, var(--green-ink) 100%)',
              borderRadius: 999, transition: 'width 0.4s cubic-bezier(.4,0,.2,1)',
            }} />
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex' }}>
                {[1,2,3,4,5].map(i => (
                  <div key={i} style={{
                    width: 28, height: 28, borderRadius: 999, marginLeft: i === 1 ? 0 : -8,
                    background: ['#FCA5A5','#FCD34D','#A7F3D0','#93C5FD','#C4B5FD'][i-1],
                    border: '2px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 800, color: 'var(--ink)',
                  }}>{['M','A','K','Y','S'][i-1]}</div>
                ))}
              </div>
              <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink-2)' }}>5 {labels.demoSellersCompeting}</span>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 14px', borderRadius: 999, background: 'var(--green)', color: '#fff' }}>
              <span style={{ fontSize: 13, fontWeight: 800 }}>↓ {pct}%</span>
              <span className="mono" style={{ fontSize: 13, fontWeight: 800 }}>{labels.demoSavingsLabel} {fmt(savings)}</span>
            </div>
          </div>
        </div>

        {/* 3 adım kartları */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: '#fff', border: '1.5px solid var(--line)', borderRadius: 20,
              padding: 'clamp(20px, 3vw, 28px)', position: 'relative',
            }}>
              <div style={{ fontSize: 32, marginBottom: 14 }}>{s.icon}</div>
              <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--green-ink)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>{s.eyebrow}</div>
              <h3 style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 8px' }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink-2)', lineHeight: 1.5, margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection({ labels }) {
  const [open, setOpen] = React.useState(0); // ilk soru açık başlasın
  return (
    <section style={{ background: '#fff', padding: 'clamp(60px, 10vh, 120px) 5vw', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, background: 'var(--green-soft)', marginBottom: 18 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--green)' }} />
          <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--green-ink)', letterSpacing: '0.06em' }}>{labels.faqEyebrow}</span>
        </div>
        <h2 style={{ fontSize: 'clamp(28px, 5vw, 48px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.06, margin: '0 0 36px', textWrap: 'balance' }}>
          {labels.faqTitle}
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {labels.faq.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                background: isOpen ? 'var(--green-soft)' : 'var(--surface-2)',
                border: '1.5px solid ' + (isOpen ? 'var(--green)' : 'var(--line)'),
                borderRadius: 16, overflow: 'hidden',
                transition: 'all .15s',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left', cursor: 'pointer',
                  background: 'none', border: 'none', padding: '16px 20px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
                  fontFamily: 'inherit',
                }}>
                  <span style={{ fontSize: 'clamp(15px, 1.8vw, 17px)', fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{item.q}</span>
                  <span style={{
                    width: 24, height: 24, borderRadius: 999, flexShrink: 0,
                    background: isOpen ? 'var(--green)' : 'transparent',
                    color: isOpen ? '#fff' : 'var(--muted)',
                    border: isOpen ? 'none' : '1.5px solid var(--line)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, fontWeight: 800, transition: 'all .15s',
                  }}>{isOpen ? '−' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 20px 18px', fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)', fontWeight: 500 }}>
                    {item.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function SellerCTASection({ labels }) {
  return (
    <section style={{ background: 'var(--dark)', color: '#fff', padding: 'clamp(60px, 10vh, 120px) 5vw' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.12)', marginBottom: 18 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--green)' }} />
            <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--green)', letterSpacing: '0.08em' }}>{labels.sellerCtaEyebrow}</span>
          </div>
          <h2 style={{ fontSize: 'clamp(28px, 5vw, 50px)', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.04, margin: '0 0 14px', textWrap: 'balance' }}>
            {labels.sellerCtaTitle}
          </h2>
          <p style={{ fontSize: 'clamp(15px, 1.9vw, 18px)', fontWeight: 500, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, margin: '0 0 28px', textWrap: 'pretty' }}>
            {labels.sellerCtaDesc}
          </p>
          <a href="/?seller" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            textDecoration: 'none', fontSize: 15, fontWeight: 800,
            padding: '14px 26px', borderRadius: 14,
            background: 'var(--green)', color: '#fff',
            transition: 'all .2s',
          }}
          onMouseEnter={(e) => e.target.style.opacity = 0.92}
          onMouseLeave={(e) => e.target.style.opacity = 1}
          >
            {labels.sellerCtaButton}
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
          </a>
        </div>
        <div style={{
          background: 'rgba(255,255,255,0.06)', border: '1.5px solid rgba(255,255,255,0.10)',
          borderRadius: 22, padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {[
            { icon: '🎯', text: labels.sellerCtaBullets?.[0] },
            { icon: '💰', text: labels.sellerCtaBullets?.[1] },
            { icon: '📦', text: labels.sellerCtaBullets?.[2] },
            { icon: '✅', text: labels.sellerCtaBullets?.[3] },
          ].map((item, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'rgba(255,255,255,0.05)', borderRadius: 14 }}>
              <span style={{ fontSize: 22 }}>{item.icon}</span>
              <span style={{ fontSize: 14.5, fontWeight: 700 }}>{item.text}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ setMode, lang, setLang, labels }) {
  return (
    <footer style={{ background: 'var(--dark)', color: '#fff', padding: 'clamp(60px, 12vh, 120px) 5vw' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <h2 style={{ fontSize: 'clamp(30px, 6vw, 60px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.02, margin: '0 0 14px', textWrap: 'balance' }}>
          {labels.footerTitle}
        </h2>
        <p style={{ fontSize: 'clamp(15px, 2vw, 18px)', fontWeight: 600, color: 'rgba(255,255,255,0.7)', margin: '0 0 32px', maxWidth: 460, marginInline: 'auto', textWrap: 'pretty' }}>
          {labels.footerSubtitle}
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 40 }}>
          <a href={`/app?mode=signup&lang=${lang}`} style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontFamily: 'inherit', fontSize: 15, fontWeight: 800, padding: '15px 30px', borderRadius: 14, background: 'var(--green)', color: '#fff' }}>{labels.startCTA}</a>
        </div>

        {/* Language Switcher */}
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', alignItems: 'center', marginBottom: 24 }}>
          {[['tr', 'Türkçe'], ['en', 'English'], ['de', 'Deutsch']].map(([code, name]) => (
            <button key={code} onClick={() => setLang(code)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontSize: 13, fontWeight: lang === code ? 800 : 500,
              color: lang === code ? '#fff' : 'rgba(255, 255, 255, 0.45)',
              padding: '6px 12px', borderRadius: 99,
              background: lang === code ? 'rgba(255,255,255,0.12)' : 'transparent',
              transition: 'all 0.2s',
            }}>{name}</button>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', opacity: 0.6 }}>
          <window.Lockup size={24} dark />
        </div>
      </div>
    </footer>
  );
}

function BenefitsSection({ mode, lang }) {
  const buyerBenefits = {
    tr: [
      {
        title: 'Düşen Fiyatlar',
        desc: 'Satıcılar teklif verdikçe fiyat düşer, aradığınız ürünü bütçenizin altında bir fiyata kolayca satın alırsınız.',
        img: 'https://images.unsplash.com/photo-1561069934-eee225952461?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      },
      {
        title: 'Güvenli Ödeme',
        desc: 'Ödemeniz havuzda güvenle bekler. Siz ürünü teslim alıp onaylayana kadar satıcıya aktarılmaz.',
        img: 'https://images.unsplash.com/photo-1698128255721-f9a9ad2da830?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      },
      {
        title: 'Avantajlı Rekabet',
        desc: 'Her online satılan ürünün pazarlaması için harcanan para rekabette herkes için avantaj yaratır. Zaman kazandırır, hızlı ticareti sağlar.',
        img: 'https://images.unsplash.com/photo-1695654686808-8e90bd2c6923?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      }
    ],
    en: [
      {
        title: 'Dropping Prices',
        desc: 'As sellers compete and make lower offers, watch the price drop and buy the product below your budget.',
        img: 'https://images.unsplash.com/photo-1561069934-eee225952461?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      },
      {
        title: 'Secure Payment',
        desc: 'Your payment is kept safely in escrow. It will not be released to the seller until you receive and approve the item.',
        img: 'https://images.unsplash.com/photo-1698128255721-f9a9ad2da830?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      },
      {
        title: 'Advantageous Competition',
        desc: 'The budget spent on marketing for each online-sold product creates an advantage for everyone in the competition, saving time and enabling fast trade.',
        img: 'https://images.unsplash.com/photo-1695654686808-8e90bd2c6923?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      }
    ],
    de: [
      {
        title: 'Sinkende Preise',
        desc: 'Da Verkäufer miteinander konkurrieren und niedrigere Angebote machen, sinkt der Preis unter Ihr Budget.',
        img: 'https://images.unsplash.com/photo-1561069934-eee225952461?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      },
      {
        title: 'Sichere Zahlung',
        desc: 'Ihre Zahlung wird sicher auf einem Treuhandkonto verwahrt und erst freigegeben, wenn Sie den Artikel erhalten und genehmigen.',
        img: 'https://images.unsplash.com/photo-1698128255721-f9a9ad2da830?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      },
      {
        title: 'Vorteilhafter Wettbewerb',
        desc: 'Das für das Marketing jedes online verkauften Produkts ausgegebene Budget schafft einen Vorteil für alle im Wettbewerb, spart Zeit und ermöglicht schnellen Handel.',
        img: 'https://images.unsplash.com/photo-1695654686808-8e90bd2c6923?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
      }
    ]
  };

  const sellerBenefits = {
    tr: [
      {
        title: 'Hazır Müşteri',
        desc: 'Müşteri aramakla zaman kaybetmeyin. Alıcısı ve bütçesi belli olan hazır taleplere anında teklif verin.',
        img: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&h=1000&q=80'
      },
      {
        title: 'Sıfır Reklam Gideri',
        desc: 'Görünmek için vitrin dopingi veya arama reklamı ücreti ödemezsiniz. Rekabetinizi sadece fiyatınızla yaparsınız.',
        img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&h=1000&q=80'
      },
      {
        title: 'Hızlı Satış',
        desc: 'En iyi teklifi siz verdiğinizde süre bitiminde satış doğrudan size kalır, pazarlık süreciyle uğraşmazsınız.',
        img: 'https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&w=1600&h=1000&q=80'
      }
    ],
    en: [
      {
        title: 'Ready Customers',
        desc: 'Do not waste time searching for clients. Bid directly on active demands with established buyer budgets.',
        img: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&h=1000&q=80'
      },
      {
        title: 'Zero Ad Spend',
        desc: 'No need to pay for search prominence or listing boosts. Compete pure and clean with your best price.',
        img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&h=1000&q=80'
      },
      {
        title: 'Fast Sales',
        desc: 'If yours is the lowest offer when time expires, the sale is awarded directly to you. No extra negotiation.',
        img: 'https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&w=1600&h=1000&q=80'
      }
    ],
    de: [
      {
        title: 'Bereite Kunden',
        desc: 'Suchen Sie nicht lange nach Kunden. Bieten Sie direkt auf aktive Nachfragen mit bereits festgelegten Budgets.',
        img: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&h=1000&q=80'
      },
      {
        title: 'Keine Werbekosten',
        desc: 'Zahlen Sie keine Gebühren für Hervorhebungen oder Banner. Konkurrieren Sie fair und direkt über Ihren Preis.',
        img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&h=1000&q=80'
      },
      {
        title: 'Schneller Verkauf',
        desc: 'Wenn Sie bei Ablauf der Zeit das beste Angebot haben, geht der Zuschlag direkt an Sie. Kein weiteres Verhandeln.',
        img: 'https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&w=1600&h=1000&q=80'
      }
    ]
  };

  const pool = mode === 'alici' ? buyerBenefits : sellerBenefits;
  const currentSlides = pool[lang] || pool.tr;

  return (
    <section style={{ width: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      {currentSlides.map((slide, index) => (
        <div
          key={index}
          style={{
            position: 'sticky',
            top: 0,
            zIndex: 10 + index,
            width: '100%',
            height: '75vh',
            minHeight: '420px',
            maxHeight: '680px',
            backgroundImage: `url(${slide.img})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            boxShadow: '0 -20px 40px -10px rgba(0,0,0,0.5)',
            paddingTop: '90px',
            boxSizing: 'border-box',
            overflow: 'hidden'
          }}
        >
          {/* Dark Overlay */}
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.2) 100%)',
            zIndex: 1
          }} />
          
          {/* Text Content */}
          <div style={{
            position: 'relative',
            zIndex: 2,
            color: '#fff',
            maxWidth: 800,
            margin: '0 auto',
            width: '100%',
            padding: '0 8vw',
            boxSizing: 'border-box',
            textAlign: 'left'
          }}>
            <h3 style={{
              fontSize: 'clamp(28px, 4.2vw, 46px)',
              fontWeight: 800,
              marginBottom: 16,
              letterSpacing: '-0.03em',
              textShadow: '0 2px 8px rgba(0,0,0,0.5)',
              lineHeight: 1.1
            }}>
              {slide.title}
            </h3>
            <p style={{
              fontSize: 'clamp(15px, 2vw, 19px)',
              fontWeight: 500,
              color: 'rgba(255,255,255,0.92)',
              lineHeight: 1.45,
              textShadow: '0 1px 4px rgba(0,0,0,0.4)',
              maxWidth: 680
            }}>
              {slide.desc}
            </p>
          </div>
        </div>
      ))}
    </section>
  );
}

function App() {
  const [lang, setLangState] = React.useState(detectLanguage());
  // URL ?seller veya #seller varsa satıcı sayfası aç
  const initialMode = (() => {
    if (typeof window === 'undefined') return 'alici';
    const u = new URL(window.location.href);
    if (u.searchParams.has('seller') || u.hash === '#seller') return 'satici';
    return 'alici';
  })();
  const [mode, setMode] = React.useState(initialMode);
  const [config, setConfig] = React.useState({});

  const setLang = (code) => {
    localStorage.setItem('listgetbuy_lang', code);
    // Webapp aynı dili kullansın (eksilt-web/webapp `lgb_lang` okur)
    try { localStorage.setItem('lgb_lang', code); } catch {}
    setLangState(code);
  };

  React.useEffect(() => { window.scrollTo({ top: 0 }); }, [mode]);

  React.useEffect(() => {
    const SUPABASE_URL = 'https://vucrkhsjjknggfdmvpjf.supabase.co';
    const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ1Y3JraHNqamtuZ2dmZG12cGpmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODA3NzM1MjIsImV4cCI6MjA5NjM0OTUyMn0.oqzRrMpDOsvvDc6toUUi4-EcSBFn2IifAyW526YswDI';
    
    fetch(`${SUPABASE_URL}/rest/v1/app_config?select=*`, {
      headers: {
        'apikey': SUPABASE_ANON_KEY,
        'Authorization': `Bearer ${SUPABASE_ANON_KEY}`
      }
    })
      .then(res => res.json())
      .then(data => {
        if (Array.isArray(data)) {
          const cfg = Object.fromEntries(data.map(r => [r.key, r.value]));
          setConfig(cfg);
        }
      })
      .catch(err => console.error('Failed to load SEO configs:', err));
  }, []);

  React.useEffect(() => {
    const defaultTitles = {
      tr: 'ListGetBuy — Fiyatı sen kovalama. Sana gelsin.',
      en: "ListGetBuy — Don't chase the price. Let it come to you.",
      de: 'ListGetBuy — Jag dem Preis nicht hinterher. Lass ihn zu dir kommen.'
    };
    const defaultDescriptions = {
      tr: 'Ne almak istediğini yaz, bütçeni belirle. Satıcılar teklifleriyle rekabet etsin, fiyat sen izlerken düşsün. Alan memnun, Satan memnun!',
      en: 'Write down what you want to buy, set your budget. Sellers underbid each other, watch the price drop. Happy Buyer, Happy Seller!',
      de: 'Schreibe auf, was du kaufen möchtest, setze dein Budget. Verkäufer unterbieten sich gegenseitig, sieh zu, wie der Preis sinkt. Zufriedener Käufer, Zufriedener Verkäufer!'
    };

    const titleKey = `seo_title_${lang}`;
    const descKey = `seo_desc_${lang}`;

    const title = config[titleKey] || defaultTitles[lang] || defaultTitles.tr;
    const description = config[descKey] || defaultDescriptions[lang] || defaultDescriptions.tr;
    const keywords = config['seo_keywords'] || '';
    const ogImage = config['seo_image'] || '';
    const gaId = config['seo_google_analytics'] || '';

    document.title = title;

    // Helper to update meta tags
    const updateMetaTag = (name, content, isProperty = false) => {
      if (!content) return;
      const attr = isProperty ? 'property' : 'name';
      let el = document.querySelector(`meta[${attr}="${name}"]`);
      if (!el) {
        el = document.createElement('meta');
        el.setAttribute(attr, name);
        document.head.appendChild(el);
      }
      el.content = content;
    };

    updateMetaTag('description', description);
    if (keywords) updateMetaTag('keywords', keywords);
    updateMetaTag('og:title', title, true);
    updateMetaTag('og:description', description, true);
    if (ogImage) updateMetaTag('og:image', ogImage, true);
    updateMetaTag('twitter:title', title);
    updateMetaTag('twitter:description', description);
    if (ogImage) updateMetaTag('twitter:image', ogImage);

    if (gaId) {
      if (!window.GA_INJECTED) {
        window.GA_INJECTED = true;
        const script = document.createElement('script');
        script.async = true;
        script.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
        document.head.appendChild(script);

        const initScript = document.createElement('script');
        initScript.innerHTML = `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${gaId}');
        `;
        document.head.appendChild(initScript);
      }
    }
  }, [lang, config]);

  const labels = MAIN_LABELS[lang] || MAIN_LABELS.tr;

  return (
    <div>
      <Header mode={mode} setMode={setMode} labels={labels} lang={lang} />
      {mode === 'alici' ? (
        <main style={{ background: window.BUYER_BG, minHeight: '100vh' }}>
          <BuyerHero labels={labels} lang={lang} />
          <HowItWorks labels={labels} />
          <window.BuyerStory lang={lang} />
        </main>
      ) : (
        <main>
          <window.SellerSection lang={lang} />
        </main>
      )}
      <BenefitsSection mode={mode} lang={lang} />
      {mode === 'alici' && <FAQSection labels={labels} />}
      {mode === 'alici' && <SellerCTASection labels={labels} />}
      <Footer setMode={setMode} lang={lang} setLang={setLang} labels={labels} />
    </div>
  );
}

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