/* 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'
  },
  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'
  },
  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'
  }
};

function detectLanguage() {
  const saved = localStorage.getItem('listgetbuy_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 }) {
  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?ref=header_mobile" 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 }}>
          <div style={{ display: 'flex', padding: 3, background: 'var(--surface-2)', borderRadius: 999, boxShadow: 'inset 0 0 0 1px var(--line)' }}>
            {[['alici', labels.buyerLabel], ['satici', labels.sellerLabel]].map(([m, label]) => (
              <button key={m} onClick={() => setMode(m)} style={{
                border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                fontSize: 13, fontWeight: 700, padding: '8px 16px', borderRadius: 999,
                background: mode === m ? 'var(--surface)' : 'transparent',
                color: mode === m ? 'var(--ink)' : 'var(--muted)',
                boxShadow: mode === m ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                transition: 'all .2s',
              }}>{label}</button>
            ))}
          </div>
          <a href="/app?ref=header_desktop" 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 }) {
  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?ref=hero_start" 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 style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, color: 'var(--muted)' }}>
        <span className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em' }}>{labels.scrollCTA}</span>
        <span style={{ fontSize: 20, animation: 'nudge 1.6s infinite' }}>↓</span>
      </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?ref=footer_buyer" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontFamily: 'inherit', fontSize: 15, fontWeight: 800, padding: '15px 28px', borderRadius: 14, background: 'var(--green)', color: '#fff' }}>{labels.footerStartBuyer}</a>
          <a href="/app?ref=footer_seller" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontFamily: 'inherit', fontSize: 15, fontWeight: 800, padding: '15px 28px', borderRadius: 14, background: 'rgba(255,255,255,0.12)', color: '#fff' }}>{labels.footerStartSeller}</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());
  const [mode, setMode] = React.useState('alici');
  const [config, setConfig] = React.useState({});

  const setLang = (code) => {
    localStorage.setItem('listgetbuy_lang', code);
    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} />
      {mode === 'alici' ? (
        <main style={{ background: window.BUYER_BG, minHeight: '100vh' }}>
          <BuyerHero labels={labels} />
          <window.BuyerStory lang={lang} />
        </main>
      ) : (
        <main>
          <window.SellerSection lang={lang} />
        </main>
      )}
      <BenefitsSection mode={mode} lang={lang} />
      <Footer setMode={setMode} lang={lang} setLang={setLang} labels={labels} />
    </div>
  );
}

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