// Landing sections | social proof, how it works, modes, before/after, ROI, pricing, FAQ, footer

const { useState: useState2, useRef: useRef2 } = React;

function SocialProof() {
  // Jenerik referanslar — gerçek/ünlü marka kullanılmaz
  const logos = ['Köşedeki Lokanta', 'Mahalle Pidecisi', 'Tava Kebap', 'Ocakbaşı Sofrası', 'Bizim Mutfak', 'Sahil Restoran', 'Hanımeli Lezzetleri', 'Aile Köfte Evi'];
  return (
    <section style={{ padding: '40px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'rgba(245,166,35,0.04)', overflow: 'hidden' }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
        <div style={{ flex: '0 0 auto', fontSize: 13, color: 'var(--ink-3)', maxWidth: 200 }}>
          <div style={{ fontWeight: 600, color: 'var(--dark)', fontSize: 14, marginBottom: 2 }}>247 restoran</div>
          her gün üretim yapıyor
        </div>
        <div style={{ flex: 1, overflow: 'hidden', maskImage: 'linear-gradient(to right, transparent, #000 10%, #000 90%, transparent)' }}>
          <div style={{ display: 'flex', gap: 48, animation: 'marquee 28s linear infinite', width: 'max-content' }}>
            {[...logos, ...logos].map((l, i) => (
              <div key={i} className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: 'var(--ink-2)', whiteSpace: 'nowrap', fontWeight: 500 }}>{l}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Yemek fotoğrafını yükleyin', d: 'Telefon çekimi yeter | masa üstünde, mutfakta, her yerden. Bulanık olsa bile.', icon: 'phone' },
    { n: '02', t: 'Format seçin', d: 'Yemeksepeti görseli, Instagram postu, ya da story. Tek tıkla.', icon: 'image' },
    { n: '03', t: 'İndirin veya paylaşın', d: 'Hazır olan içeriği telefonunuza indirin, ya da direkt Instagram\'a yollayın.', icon: 'share' },
  ];
  return (
    <section id="nasil">
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 580 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Nasıl çalışır</div>
            <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05 }}>
              Üç adım, <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>yarım dakika.</span>
            </h2>
          </div>
          <p style={{ maxWidth: 380, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55 }}>
            Komplike ayarlar, gereksiz menüler yok. Restoran sahibi mantığıyla tasarlandı: hızlı, sade, anlaşılır.
          </p>
        </div>
        <div className="grid-3" style={{ position: 'relative' }}>
          {steps.map((s, i) => (
            <div key={i} style={{ position: 'relative', padding: 28, background: '#fff', borderRadius: 16, border: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
                <span className="mono" style={{ fontSize: 12, color: 'var(--ink-4)', letterSpacing: '0.06em' }}>{s.n}</span>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--bg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)' }}>{Icon[s.icon](22)}</div>
              </div>
              <h3 style={{ fontSize: 22, marginBottom: 10, lineHeight: 1.2 }}>{s.t}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModeCards() {
  const modes = [
    { title: 'Görsel', subtitle: 'Yazısız, yemeksepeti formatında', desc: 'Sadece yemek. Profesyonel fotoğraf stüdyosu kalitesinde, Yemeksepeti ve Getir\'in istediği format.', img: IMG.result4, icon: 'image', color: 'var(--primary)' },
    { title: 'Post', subtitle: 'Açıklamalı, kurumsal kimlik korumalı', desc: 'Caption, açıklama, hashtag | kurumsal kimliğinize sadık kalan, organik tarzda Instagram postu.', img: IMG.postThumb, icon: 'post', color: 'var(--accent)' },
    { title: 'Story', subtitle: 'Dikey 9:16, kampanya hazır', desc: 'Öne çıkan ürün, kampanya, sezonluk menü template\'leri. Tek tıkla story\'ye uygun dikey format.', img: IMG.storyThumb, icon: 'story', color: 'var(--success)' },
  ];
  return (
    <section id="modlar" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Üç mod</div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05, maxWidth: 700 }}>
            Hangi platform için olursa, <span className="serif" style={{ fontStyle: 'italic', fontWeight: 500 }}>sizin tarzınızda.</span>
          </h2>
        </div>
        <div className="grid-3" style={{ gap: 20 }}>
          {modes.map((m, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 18, overflow: 'hidden', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden', position: 'relative', background: 'var(--bg-3)' }}>
                <img src={m.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={`${m.title} formatı örneği`} loading="lazy"/>
                <div style={{ position: 'absolute', top: 14, left: 14, padding: '6px 10px', borderRadius: 8, background: 'rgba(0,0,0,0.7)', color: '#fff', display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600 }}>
                  {Icon[m.icon](14)} {m.title}
                </div>
              </div>
              <div style={{ padding: 24, flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                <h3 style={{ fontSize: 24 }}>{m.title}</h3>
                <div style={{ fontSize: 13, color: m.color, fontWeight: 600 }}>{m.subtitle}</div>
                <p style={{ color: 'var(--ink-2)', fontSize: 14.5, lineHeight: 1.55, marginTop: 4 }}>{m.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Before/After comparison slider | mouse + touch + keyboard erisilebilir
function BeforeAfter() {
  const [pos, setPos] = useState2(48);
  const containerRef = useRef2(null);
  const draggingRef = useRef2(false);

  const updateFromClientX = (clientX) => {
    const el = containerRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setPos(Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)));
  };

  const onPointerDown = (e) => {
    e.preventDefault();
    draggingRef.current = true;
    e.currentTarget.setPointerCapture?.(e.pointerId);
    updateFromClientX(e.clientX);
  };
  const onPointerMove = (e) => {
    if (!draggingRef.current) return;
    e.preventDefault();
    updateFromClientX(e.clientX);
  };
  const onPointerUp = (e) => {
    draggingRef.current = false;
    e.currentTarget.releasePointerCapture?.(e.pointerId);
  };
  const onKey = (e) => {
    if (e.key === 'ArrowLeft') setPos((p) => Math.max(0, p - 4));
    if (e.key === 'ArrowRight') setPos((p) => Math.min(100, p + 4));
    if (e.key === 'Home') setPos(0);
    if (e.key === 'End') setPos(100);
  };

  return (
    <section>
      <div className="container">
        <div className="grid-before">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Önce / Sonra</div>
            <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.08, marginBottom: 18 }}>Telefondan çekildi.<br/><span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>Stüdyodan çıktı.</span></h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55, marginBottom: 20 }}>
              Bulanık, kötü ışıklı bir lahmacun fotoğrafı. Yapay zekamız sahnenin ışığını, doku ve renklerini yeniden çiziyor | tabağınızın gerçek hali ortaya çıkıyor.
            </p>
            <div style={{ display: 'flex', gap: 8, fontSize: 13, color: 'var(--ink-3)', alignItems: 'center' }}>
              <span>Sürükleyerek karşılaştırın</span>
              <span>{Icon.arrowRight(16)}</span>
            </div>
          </div>
          <div
            ref={containerRef}
            role="slider"
            aria-label="Önce / Sonra karşılaştırma"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(pos)}
            tabIndex={0}
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={onPointerUp}
            onPointerCancel={onPointerUp}
            onKeyDown={onKey}
            style={{
              position: 'relative', borderRadius: 18, overflow: 'hidden',
              boxShadow: 'var(--shadow-lg)', aspectRatio: '4/3',
              cursor: 'ew-resize', userSelect: 'none',
              touchAction: 'none', WebkitTouchCallout: 'none',
              outline: 'none',
            }}
          >
            <img src={IMG.lahmacunRaw} draggable={false} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(2px) brightness(0.85) saturate(0.7)', pointerEvents: 'none' }} alt="öncesi"/>
            <div style={{ position: 'absolute', inset: 0, clipPath: `inset(0 0 0 ${pos}%)`, pointerEvents: 'none' }}>
              <img src={IMG.lahmacunPro} draggable={false} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="sonrası"/>
            </div>
            {/* Labels */}
            <div style={{ position: 'absolute', top: 16, left: 16, padding: '5px 10px', borderRadius: 999, background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 11, fontWeight: 600, pointerEvents: 'none' }}>ÖNCE · telefon</div>
            <div style={{ position: 'absolute', top: 16, right: 16, padding: '5px 10px', borderRadius: 999, background: 'var(--primary)', color: '#fff', fontSize: 11, fontWeight: 700, pointerEvents: 'none' }}>SONRA · MutfakAI</div>
            {/* Slider line */}
            <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${pos}%`, width: 2, background: '#fff', boxShadow: '0 0 12px rgba(0,0,0,0.3)', pointerEvents: 'none' }}>
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 44, height: 44, borderRadius: 999, background: '#fff', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--dark)' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l-6 6 6 6M15 6l6 6-6 6"/></svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ROI() {
  const cols = [
    { label: 'Profesyonel fotoğrafçı', items: [['Maliyet', '1.500-3.000 ₺ / seans'], ['Bekleme', '1 hafta'], ['Adet', '~10 görsel'], ['Düzenleme', 'Ek ücret'], ['Yemeksepeti formatı', 'Manuel kırp']], muted: true },
    { label: 'MutfakAI Standart', items: [['Maliyet', '999 ₺ / ay'], ['Bekleme', '30 saniye'], ['Adet', 'Sınırsız üretim'], ['Düzenleme', 'Tek tıkla yeniden'], ['Yemeksepeti formatı', 'Otomatik']], featured: true },
    { label: 'Kendi telefonunuz', items: [['Maliyet', '0 ₺'], ['Bekleme', 'Anında'], ['Adet', 'Sınırsız'], ['Düzenleme', '|'], ['Yemeksepeti formatı', 'Bulanık, kabul edilmez']], muted: true },
  ];
  return (
    <section style={{ background: 'var(--dark)', color: '#fff' }}>
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 12 }}>Hesabı yapalım</div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05 }}>
            Bir ajans seansı parasına, <span className="serif" style={{ fontStyle: 'italic', color: 'var(--accent)', fontWeight: 500 }}>iki yıllık abonelik.</span>
          </h2>
        </div>
        <div className="grid-3-tight">
          {cols.map((c, i) => (
            <div key={i} style={{
              background: c.featured ? 'var(--primary)' : 'rgba(255,255,255,0.04)',
              border: c.featured ? '1px solid var(--primary)' : '1px solid rgba(255,255,255,0.1)',
              borderRadius: 16, padding: 28,
              transform: c.featured ? 'scale(1.04)' : 'none',
              boxShadow: c.featured ? '0 20px 60px rgba(200,16,46,0.4)' : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                <h3 style={{ fontSize: 18, fontWeight: 700 }}>{c.label}</h3>
                {c.featured && <span style={{ padding: '4px 8px', background: 'var(--accent)', color: 'var(--dark)', fontSize: 11, fontWeight: 700, borderRadius: 4 }}>EN İYİ</span>}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {c.items.map(([k, v], j) => (
                  <div key={j} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13.5, paddingBottom: 12, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                    <span style={{ color: c.featured ? 'rgba(255,255,255,0.7)' : 'var(--ink-4)' }}>{k}</span>
                    <span style={{ fontWeight: 600, textAlign: 'right' }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ onOpenDashboard }) {
  const plans = [
    { name: 'Başlangıç', price: '499', desc: 'Yeni başlayan, küçük lokantalar için', features: ['10 görsel / ay', '4 Instagram post', '8 story', 'Temel kurumsal kimlik', 'WhatsApp destek'], cta: 'WhatsApp ile başla' },
    { name: 'Standart', price: '999', desc: '20+ kalemlik menüsü olan işletmeler için', features: ['30 görsel / ay', '12 post', 'Sınırsız story', 'Tam kurumsal kimlik', 'WhatsApp destek', 'Geçmiş üretimler'], cta: 'WhatsApp ile başla', featured: true },
    { name: 'Pro', price: '1.999', desc: 'Zincir restoranlar, çok şubeli işletmeler', features: ['Sınırsız üretim', 'Yemeksepeti API', 'Otomatik yayınlama', 'Sezonluk yenileme', 'Telefonla destek', 'Çok şube yönetimi'], cta: 'WhatsApp ile başla' },
  ];
  return (
    <section id="fiyat">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Fiyatlandırma</div>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05, marginBottom: 14 }}>
            Restoranınızın boyutuna göre <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>seçin.</span>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--ink-2)', maxWidth: 540, margin: '0 auto' }}>
            14 gün ücretsiz, kart bilgisi gerekmez. İptal etmek tek tıkla.
          </p>
        </div>
        <div className="grid-3-tight" style={{ alignItems: 'stretch' }}>
          {plans.map((p, i) => (
            <div key={i} style={{
              background: p.featured ? 'var(--dark)' : '#fff',
              color: p.featured ? '#fff' : 'var(--dark)',
              border: p.featured ? '1px solid var(--dark)' : '1px solid var(--line)',
              borderRadius: 18, padding: 32,
              display: 'flex', flexDirection: 'column', gap: 18,
              transform: p.featured ? 'translateY(-12px)' : 'none',
              boxShadow: p.featured ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
              position: 'relative',
            }}>
              {p.featured && (
                <span style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', padding: '5px 12px', background: 'var(--accent)', color: 'var(--dark)', fontSize: 11, fontWeight: 700, borderRadius: 999, letterSpacing: '0.04em' }}>EN POPÜLER</span>
              )}
              <div>
                <h3 style={{ fontSize: 22, marginBottom: 6 }}>{p.name}</h3>
                <p style={{ fontSize: 13.5, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)', lineHeight: 1.45 }}>{p.desc}</p>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontSize: 48, fontWeight: 800, letterSpacing: '-0.03em' }}>{p.price}</span>
                <span style={{ fontSize: 16, fontWeight: 600 }}>₺</span>
                <span style={{ fontSize: 14, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)' }}>/ ay</span>
              </div>
              <a className={p.featured ? 'btn btn-primary' : 'btn btn-dark'} style={{ width: '100%', textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.pricing(p.name))} target="_blank" rel="noopener">
                {Icon.whatsapp(16)} {p.cta}
              </a>
              <div style={{ height: 1, background: p.featured ? 'rgba(255,255,255,0.1)' : 'var(--line)' }}/>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {p.features.map((f, j) => (
                  <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, lineHeight: 1.45 }}>
                    <span style={{ color: p.featured ? 'var(--accent)' : 'var(--success)', marginTop: 1 }}>{Icon.check(16)}</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState2(0);
  return (
    <section id="sss" style={{ background: 'var(--bg-2)' }}>
      <div className="container grid-faq">
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>SSS</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.08, marginBottom: 18 }}>
            Sorunuz mu var?
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55, marginBottom: 24 }}>
            Aklınıza takılan başka bir şey varsa WhatsApp'tan yazın | bir saat içinde dönüyoruz.
          </p>
          <a className="btn btn-ghost" style={{ background: '#fff', textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.faq)} target="_blank" rel="noopener">
            {Icon.whatsapp(16)} WhatsApp'tan yaz {Icon.arrowRight(16)}
          </a>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQS.map((f, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 12, border: '1px solid var(--line)', overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', padding: '20px 24px', background: 'none', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }}>
                <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--dark)' }}>{f.q}</span>
                <span style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform 200ms', color: 'var(--ink-3)', flexShrink: 0 }}>{Icon.chevDown(20)}</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 22px', fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6 }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--dark)', color: 'rgba(255,255,255,0.6)', padding: '64px 0 32px' }}>
      <div className="container">
        {/* CTA bar */}
        <div style={{ background: 'linear-gradient(135deg, var(--primary), var(--primary-700))', borderRadius: 18, padding: '32px 32px', marginBottom: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', boxShadow: '0 24px 60px rgba(200,16,46,0.35)' }}>
          <div>
            <div style={{ color: '#fff', fontSize: 22, fontWeight: 700, lineHeight: 1.2, marginBottom: 6 }}>
              Hesabınızı manuel açıyoruz, <span className="serif" style={{ fontStyle: 'italic', fontWeight: 500 }}>WhatsApp'tan bir mesaj yeter.</span>
            </div>
            <div style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14 }}>
              {PHONE_DISPLAY} | bir saat içinde dönüyoruz, kartınız çekilmez.
            </div>
          </div>
          <a className="btn" style={{ background: '#fff', color: 'var(--primary)', padding: '14px 22px', fontSize: 15, fontWeight: 700, textDecoration: 'none', flexShrink: 0 }} href={whatsappLink(WA_MESSAGES.free_trial)} target="_blank" rel="noopener">
            {Icon.whatsapp(18)} WhatsApp ile başla
          </a>
        </div>

        <div className="grid-footer" style={{ marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, color: '#fff' }}>
              <div style={{ color: 'var(--primary)' }}>{Icon.logo(28)}</div>
              <span style={{ fontWeight: 800, fontSize: 19, letterSpacing: '-0.02em' }}>MutfakAI</span>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, maxWidth: 320, marginBottom: 16 }}>
              Türkiye'nin restoran sahipleri için kurulan yapay zeka destekli görsel ve sosyal medya içerik üretim platformu.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <a href={whatsappLink(WA_MESSAGES.general)} target="_blank" rel="noopener" style={{ color: '#fff', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
                {Icon.whatsapp(16)} WhatsApp: {PHONE_DISPLAY}
              </a>
              <a href={`tel:+90${WHATSAPP_NUMBER.slice(2)}`} style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                {Icon.phone(16)} Telefon: {PHONE_DISPLAY}
              </a>
            </div>
          </div>
          {[
            ['Ürün', ['Nasıl çalışır', 'Modlar', 'Fiyatlandırma', 'Önce / Sonra']],
            ['Destek', ['SSS', 'WhatsApp destek', 'İletişim']],
            ['Yasal', ['Kullanım koşulları', 'Gizlilik', 'KVKK aydınlatma metni', 'Çerez politikası']],
          ].map(([t, items], i) => (
            <div key={i}>
              <div style={{ color: '#fff', fontWeight: 600, fontSize: 14, marginBottom: 14 }}>{t}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {items.map(it => <li key={it} style={{ fontSize: 14 }}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>

        {/* Ağabeyoğlu imza */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: 13, gap: 20, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ color: 'rgba(255,255,255,0.85)', fontWeight: 600 }}>
              Bir <span style={{ color: 'var(--accent)' }}>Ağabeyoğlu Grup</span> markasıdır
            </span>
            <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11.5 }}>
              Ağabeyoğlu Medya İnşaat Yazılım San. ve Tic. A.Ş. | Manavgat / Antalya
            </span>
          </div>
          <span style={{ color: 'rgba(255,255,255,0.5)' }}>© 2026 MutfakAI</span>
        </div>
      </div>
    </footer>
  );
}

window.SocialProof = SocialProof;
window.HowItWorks = HowItWorks;
window.ModeCards = ModeCards;
window.BeforeAfter = BeforeAfter;
window.ROI = ROI;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.Footer = Footer;