// Landing page for MutfakAI

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────
function Nav({ onOpenDashboard }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250,248,245,0.85)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 32px' }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit' }}>
          <div style={{ color: 'var(--primary)' }}>{Icon.logo(28)}</div>
          <span style={{ fontWeight: 800, fontSize: 19, letterSpacing: '-0.02em' }}>MutfakAI</span>
        </a>
        <div style={{ display: 'flex', gap: 28, fontSize: 14, color: 'var(--ink-2)', fontWeight: 500 }} className="nav-links">
          <a href="#nasil" style={{ color: 'inherit', textDecoration: 'none' }}>Nasıl çalışır</a>
          <a href="#modlar" style={{ color: 'inherit', textDecoration: 'none' }}>Modlar</a>
          <a href="#fiyat" style={{ color: 'inherit', textDecoration: 'none' }}>Fiyatlandırma</a>
          <a href="#sss" style={{ color: 'inherit', textDecoration: 'none' }}>SSS</a>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button className="btn btn-ghost nav-demo" onClick={onOpenDashboard} aria-label="Demo izle">
            {Icon.monitor(16)}
            <span className="nav-demo-label"> Demo izle</span>
          </button>
          <a className="btn btn-ghost hide-mobile" style={{ padding: '10px 16px', fontSize: 14, textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.login)} target="_blank" rel="noopener">Giriş yap</a>
          <a className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14, textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.free_trial)} target="_blank" rel="noopener">
            {Icon.whatsapp(16)} Ücretsiz dene
          </a>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO with live demo
// ─────────────────────────────────────────────────────────────
function HeroDemo() {
  const [tab, setTab] = useState(0); // 0=Görsel 1=Post 2=Story
  const [phase, setPhase] = useState('idle'); // idle | uploading | cooking | done
  const tabs = ['Görsel', 'Post', 'Story'];

  useEffect(() => {
    // auto-cycle: idle → uploading → cooking → done → cycle tabs
    let timers = [];
    timers.push(setTimeout(() => setPhase('uploading'), 800));
    timers.push(setTimeout(() => setPhase('cooking'), 1800));
    timers.push(setTimeout(() => setPhase('done'), 4000));
    return () => timers.forEach(clearTimeout);
  }, []);

  useEffect(() => {
    if (phase !== 'done') return;
    const t = setInterval(() => setTab(t => (t + 1) % 3), 2800);
    return () => clearInterval(t);
  }, [phase]);

  return (
    <div style={{
      width: '100%', maxWidth: 540, aspectRatio: '4/5',
      background: '#fff', borderRadius: 20,
      boxShadow: 'var(--shadow-lg)',
      border: '1px solid var(--line)', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}>
      {/* Window chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '14px 16px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FF5F57' }}/>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#FEBC2E' }}/>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28C840' }}/>
        </div>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 12, color: 'var(--ink-3)', fontWeight: 500 }}>
          mutfakai.com / üret
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, padding: '12px 14px 0', borderBottom: '1px solid var(--line)' }}>
        {tabs.map((t, i) => (
          <button key={t} onClick={() => setTab(i)} style={{
            border: 'none', background: 'transparent', padding: '10px 14px',
            fontWeight: 600, fontSize: 13, color: tab === i ? 'var(--primary)' : 'var(--ink-3)',
            borderBottom: tab === i ? '2px solid var(--primary)' : '2px solid transparent',
            marginBottom: -1, cursor: 'pointer', fontFamily: 'inherit',
            transition: 'all 200ms ease',
          }}>{t}</button>
        ))}
        <div style={{ flex: 1 }}/>
        <span className="pill" style={{ fontSize: 11, padding: '4px 10px', alignSelf: 'center' }}>
          <span className="pill-dot" style={{ background: phase === 'cooking' ? 'var(--accent)' : 'var(--success)' }}/>
          {phase === 'cooking' ? 'Şefimiz hazırlıyor…' : phase === 'done' ? 'Hazır' : phase === 'uploading' ? 'Yükleniyor' : 'Bekleniyor'}
        </span>
      </div>

      {/* Content area */}
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: 'var(--bg-2)' }}>
        {phase === 'idle' && <DemoIdle/>}
        {phase === 'uploading' && <DemoUpload/>}
        {phase === 'cooking' && <DemoCooking/>}
        {phase === 'done' && <DemoResult tab={tab}/>}
      </div>

      {/* Footer bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderTop: '1px solid var(--line)', background: '#fff' }}>
        <span style={{ fontSize: 12, color: 'var(--ink-3)', flex: 1 }}>
          {phase === 'idle' && 'Bekleniyor… fotoğrafı sürükleyin'}
          {phase === 'uploading' && 'lahmacun.jpg · 2.4 MB · yükleniyor'}
          {phase === 'cooking' && 'lahmacun.jpg · işleniyor…'}
          {phase === 'done' && tab === 0 && 'Yemeksepeti formatı · 4 versiyon hazır'}
          {phase === 'done' && tab === 1 && 'Instagram post · caption + hashtag'}
          {phase === 'done' && tab === 2 && 'Story 9:16 · indirimli kampanya'}
        </span>
        <button className="btn btn-ghost" style={{ padding: '8px 12px', fontSize: 12 }} disabled={phase !== 'done'}>Düzenle</button>
        <button className="btn btn-primary" style={{ padding: '8px 14px', fontSize: 12 }} disabled={phase !== 'done'}>İndir</button>
      </div>
    </div>
  );
}

function DemoIdle() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, color: 'var(--ink-3)' }}>
      <div style={{ width: 56, height: 56, borderRadius: 14, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-sm)', color: 'var(--primary)' }}>{Icon.upload(24)}</div>
      <div style={{ fontSize: 14, fontWeight: 500 }}>Fotoğrafı buraya bırakın</div>
    </div>
  );
}

function DemoUpload() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
      <div style={{ width: '70%', height: 6, borderRadius: 999, background: 'var(--line)', overflow: 'hidden' }}>
        <div style={{ height: '100%', width: '60%', background: 'var(--primary)', borderRadius: 999, animation: 'load 1s ease infinite' }}/>
      </div>
      <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>Fotoğraf işleniyor…</div>
      <style>{`@keyframes load { 0% { width: 10%; } 100% { width: 95%; } }`}</style>
    </div>
  );
}

function DemoCooking() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
      {/* Pot with steam */}
      <div style={{ position: 'relative', width: 120, height: 100 }}>
        {/* steam particles */}
        <div className="steam" style={{ left: 30, animationDelay: '0s' }}/>
        <div className="steam" style={{ left: 50, animationDelay: '0.6s' }}/>
        <div className="steam" style={{ left: 72, animationDelay: '1.2s' }}/>
        <div className="steam" style={{ left: 90, animationDelay: '0.3s' }}/>

        {/* pot */}
        <svg width="120" height="100" viewBox="0 0 120 100" style={{ position: 'absolute', bottom: 0 }}>
          <ellipse cx="60" cy="48" rx="42" ry="6" fill="#1A1A1A" opacity="0.15"/>
          <path d="M22 48 L26 90 a4 4 0 0 0 4 4 h60 a4 4 0 0 0 4 -4 L98 48 Z" fill="#1A1A1A"/>
          <ellipse cx="60" cy="48" rx="38" ry="5" fill="#C8102E"/>
          <rect x="14" y="44" width="14" height="6" rx="3" fill="#1A1A1A"/>
          <rect x="92" y="44" width="14" height="6" rx="3" fill="#1A1A1A"/>
        </svg>
      </div>
      <div style={{ textAlign: 'center' }}>
        <div className="serif" style={{ fontSize: 18, fontStyle: 'italic', color: 'var(--dark)' }}>Şefimiz hazırlıyor…</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>Yaklaşık 30 saniye</div>
      </div>
    </div>
  );
}

function DemoResult({ tab }) {
  if (tab === 0) {
    const variants = [
      { src: IMG.result1, label: 'YEMEKSEPETI' },
      { src: IMG.result2, label: 'YAN AÇI' },
      { src: IMG.result3, label: 'YAKIN PLAN' },
      { src: IMG.result4, label: '45°' },
    ];
    return (
      <div style={{ position: 'absolute', inset: 0, padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {variants.map((v, i) => (
          <div key={i} style={{ borderRadius: 10, overflow: 'hidden', background: '#fff', boxShadow: 'var(--shadow-sm)', position: 'relative' }}>
            <img src={v.src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={`Lahmacun varyasyon ${i + 1}: ${v.label.toLowerCase()}`}/>
            <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 10, padding: '3px 7px', borderRadius: 4, background: 'rgba(0,0,0,0.7)', color: '#fff', fontWeight: 600 }}>{v.label}</span>
          </div>
        ))}
      </div>
    );
  }
  if (tab === 1) {
    return (
      <div style={{ position: 'absolute', inset: 0, padding: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ borderRadius: 10, overflow: 'hidden', height: '52%', position: 'relative' }}>
          <img src={IMG.lahmacunPro} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="Profesyonel lahmacun çekimi" loading="lazy"/>
        </div>
        <div style={{ background: '#fff', padding: 12, borderRadius: 10, boxShadow: 'var(--shadow-sm)', flex: 1 }}>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            Bugün fırından çıkan lahmacunlarımız sizi bekliyor 🔥 İncecik hamur, bol kıymalı, mis kokulu…
          </div>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 8 }}>
            {['#lahmacun', '#mehmetinlokantasi', '#istanbul', '#elyapımı'].map(t => (
              <span key={t} style={{ fontSize: 11, color: 'var(--primary)', fontWeight: 500 }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    );
  }
  // story
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div style={{ width: 220, aspectRatio: '9/16', borderRadius: 18, overflow: 'hidden', position: 'relative', boxShadow: 'var(--shadow-md)' }}>
        <img src={IMG.lahmacunPro} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt=""/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%)' }}/>
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', gap: 4 }}>
          <div style={{ flex: 1, height: 2, background: '#fff', borderRadius: 1 }}/>
          <div style={{ flex: 1, height: 2, background: 'rgba(255,255,255,0.4)', borderRadius: 1 }}/>
        </div>
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 999, background: 'var(--primary)', border: '2px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11, fontWeight: 700 }}>M</div>
          <span style={{ color: '#fff', fontSize: 11, fontWeight: 600 }}>mehmetinlokantasi</span>
        </div>
        <div style={{ position: 'absolute', bottom: 22, left: 16, right: 16 }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontWeight: 500, marginBottom: 4 }}>BUGÜNÜN ÖZELİ</div>
          <div style={{ fontSize: 22, color: '#fff', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1 }}>Fırından<br/>Lahmacun</div>
          <div style={{ marginTop: 10, padding: '6px 10px', background: 'var(--accent)', color: '#1A1A1A', display: 'inline-block', borderRadius: 6, fontSize: 11, fontWeight: 700 }}>%20 İNDİRİM</div>
        </div>
      </div>
    </div>
  );
}

function Hero({ onOpenDashboard, layout }) {
  // layout: 'split' | 'centered'
  if (layout === 'centered') {
    return (
      <section style={{ paddingTop: 80, paddingBottom: 60 }}>
        <div className="container" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
          <span className="pill"><span className="pill-dot"/>Şu anda 247 restoran kullanıyor</span>
          <h1 style={{ fontSize: 'clamp(40px, 6vw, 76px)', lineHeight: 1.02, maxWidth: 980 }}>
            Restoranınız <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>30 saniyede</span><br/>sosyal medya hazır.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-2)', maxWidth: 620, lineHeight: 1.5 }}>
            Yemeksepeti, Instagram, Story… Tek yerden, kurumsal kimliğinize sadık. Telefonla çekin, dakikasında paylaşın.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <a className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16, textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.free_trial)} target="_blank" rel="noopener">
              {Icon.whatsapp(18)} 14 gün ücretsiz dene
            </a>
            <button className="btn btn-ghost" style={{ padding: '16px 22px', fontSize: 15 }} onClick={onOpenDashboard}>Demo izle <span style={{ marginLeft: 4 }}>{Icon.arrowRight(16)}</span></button>
          </div>
          <div style={{ width: '100%', maxWidth: 560, marginTop: 20 }}>
            <HeroDemo/>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section style={{ paddingTop: 72, paddingBottom: 60 }}>
      <div className="container grid-2">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <span className="pill"><span className="pill-dot"/>247 restoran şu anda kullanıyor</span>
          <h1 style={{ fontSize: 'clamp(40px, 5vw, 68px)', lineHeight: 1.04 }}>
            Restoranınız{' '}
            <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>30 saniyede</span>
            {' '}sosyal medya hazır.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-2)', maxWidth: 520, lineHeight: 1.5 }}>
            Yemeksepeti, Instagram, Story… Tek yerden, kurumsal kimliğinize sadık. Telefonla çekin, dakikasında paylaşın.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <a className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16, textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.free_trial)} target="_blank" rel="noopener">
              {Icon.whatsapp(18)} 14 gün ücretsiz dene
            </a>
            <button className="btn btn-ghost" style={{ padding: '16px 22px', fontSize: 15 }} onClick={onOpenDashboard}>Demo izle <span style={{ marginLeft: 4 }}>{Icon.arrowRight(16)}</span></button>
          </div>
          <div style={{ display: 'flex', gap: 24, marginTop: 8, fontSize: 13, color: 'var(--ink-3)', flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>{Icon.check(16)} Kart bilgisi gerekmez</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>{Icon.check(16)} WhatsApp ile manuel açılış</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>{Icon.check(16)} 1 dk kurulum</div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <HeroDemo/>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;