// Dashboard | rendered inside iOS frame (mobile-first per user choice)

const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

function Dashboard({ onBack }) {
  const [page, setPage] = useStateD('home'); // home, image, post, story, history, identity, integrations, billing
  const [navOpen, setNavOpen] = useStateD(false);

  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <DashTopBar onMenu={() => setNavOpen(true)} onBack={onBack}/>
      <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', WebkitOverflowScrolling: 'touch' }}>
        {page === 'home' && <DashHome onNav={setPage}/>}
        {page === 'image' && <ImageGenerator/>}
        {page === 'post' && <ComingSoon title="Post Üret" desc="Caption ve hashtag üretimi" icon="post"/>}
        {page === 'story' && <ComingSoon title="Story Üret" desc="Dikey 9:16 kampanya story'leri" icon="story"/>}
        {page === 'history' && <HistoryPage/>}
        {page === 'identity' && <IdentityPage/>}
        {page === 'integrations' && <IntegrationsPage/>}
        {page === 'billing' && <BillingPage/>}
      </div>
      <BottomNav page={page} onNav={setPage}/>
      {navOpen && <SideDrawer page={page} onNav={(p) => { setPage(p); setNavOpen(false); }} onClose={() => setNavOpen(false)}/>}
    </div>
  );
}

function DashTopBar({ onMenu, onBack }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderBottom: '1px solid var(--line)', background: '#fff', flexShrink: 0 }}>
      <button onClick={onBack} aria-label="Landing sayfasına dön" title="Landing'e dön" style={{ width: 36, height: 36, border: 'none', background: 'var(--bg-2)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--dark)', cursor: 'pointer', flexShrink: 0 }}>
        <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}>{Icon.chev(16)}</span>
      </button>
      <button onClick={onMenu} aria-label="Menüyü aç" style={{ width: 36, height: 36, border: 'none', background: 'var(--bg-2)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--dark)', cursor: 'pointer', flexShrink: 0 }}>{Icon.menu(18)}</button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
        <div style={{ color: 'var(--primary)', flexShrink: 0 }}>{Icon.logo(22)}</div>
        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <span style={{ fontSize: 11, color: 'var(--ink-3)', lineHeight: 1, marginBottom: 2 }}>İşletme</span>
          <span style={{ fontWeight: 700, fontSize: 13, lineHeight: 1, letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Mehmet'in Lokantası</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, background: 'var(--accent-100)', border: '1px solid rgba(245,166,35,0.3)', flexShrink: 0 }}>
        <span style={{ color: 'var(--accent)' }}>{Icon.bolt(13)}</span>
        <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--dark)' }}>18</span>
      </div>
      <div aria-hidden style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--primary)', color: '#fff', fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>M</div>
    </div>
  );
}

function DashHome({ onNav }) {
  const quickActions = [
    { id: 'image', t: 'Görsel Üret', s: 'Yemeksepeti uyumlu', icon: 'image', c: 'var(--primary)' },
    { id: 'post', t: 'Post Üret', s: 'Caption + hashtag', icon: 'post', c: 'var(--accent)' },
    { id: 'story', t: 'Story Üret', s: '9:16 dikey', icon: 'story', c: 'var(--success)' },
  ];
  return (
    <div style={{ padding: '20px 16px 100px' }}>
      <h1 style={{ fontSize: 26, lineHeight: 1.15, marginBottom: 6 }}>
        Hoşgeldiniz, <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>Mehmet bey.</span>
      </h1>
      <p style={{ fontSize: 14, color: 'var(--ink-3)', marginBottom: 24 }}>Bugün ne hazırlayalım?</p>

      {/* Credit card */}
      <div style={{ background: 'var(--dark)', color: '#fff', borderRadius: 16, padding: 18, marginBottom: 20, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: 999, background: 'radial-gradient(circle, rgba(245,166,35,0.25) 0%, transparent 70%)' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 18, position: 'relative' }}>
          <div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Standart Plan</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>Ekim 2026</div>
          </div>
          <span style={{ padding: '4px 8px', background: 'var(--accent)', color: 'var(--dark)', borderRadius: 6, fontSize: 10, fontWeight: 700 }}>AKTİF</span>
        </div>
        <div style={{ display: 'flex', gap: 18 }}>
          <CreditPie label="Görsel" used={12} total={30} color="var(--primary)"/>
          <CreditPie label="Post" used={4} total={12} color="var(--accent)"/>
          <CreditPie label="Story" used={28} total={'∞'} color="var(--success)"/>
        </div>
      </div>

      {/* Quick actions */}
      <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 12 }}>Hızlı üretim</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
        {quickActions.map(a => (
          <button key={a.id} onClick={() => onNav(a.id)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14, background: '#fff', border: '1px solid var(--line)', borderRadius: 14, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }}>
            <div style={{ width: 44, height: 44, borderRadius: 11, background: a.c, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{Icon[a.icon](22)}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.2 }}>{a.t}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{a.s}</div>
            </div>
            <span style={{ color: 'var(--ink-4)' }}>{Icon.chev(18)}</span>
          </button>
        ))}
      </div>

      {/* Recent generations */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
        <span style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Son Üretimler</span>
        <button onClick={() => onNav('history')} style={{ fontSize: 12, color: 'var(--primary)', background: 'none', border: 'none', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Tümü →</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
        {[
          { src: IMG.hist1, alt: 'Künefe' },
          { src: IMG.hist2, alt: 'Baklava' },
          { src: IMG.hist3, alt: 'Mezeli tabak' },
          { src: IMG.hist4, alt: 'Kıymalı pide' },
          { src: IMG.hist5, alt: 'Mercimek çorbası' },
          { src: IMG.hist6, alt: 'Domates çorbası' },
        ].map((it, i) => (
          <div key={i} style={{ aspectRatio: '1', borderRadius: 8, overflow: 'hidden', background: 'var(--bg-3)' }}>
            <img src={it.src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={it.alt} loading="lazy"/>
          </div>
        ))}
      </div>
    </div>
  );
}

function CreditPie({ label, used, total, color }) {
  const isInf = total === '∞';
  const pct = isInf ? 0 : (used / total);
  const c = 2 * Math.PI * 18;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <div style={{ position: 'relative', width: 48, height: 48 }}>
        <svg width="48" height="48" viewBox="0 0 48 48">
          <circle cx="24" cy="24" r="18" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="4"/>
          {!isInf && <circle cx="24" cy="24" r="18" fill="none" stroke={color} strokeWidth="4" strokeDasharray={c} strokeDashoffset={c - pct * c} strokeLinecap="round" transform="rotate(-90 24 24)"/>}
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700 }}>
          {isInf ? '∞' : `${used}/${total}`}
        </div>
      </div>
      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>{label}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// IMAGE GENERATOR | full flow: upload → name → style → cook → 4 results
// ─────────────────────────────────────────────────────────────
function ImageGenerator() {
  const [phase, setPhase] = useStateD('upload'); // upload, dragging, uploaded, cooking, done
  const [name, setName] = useStateD('Lahmacun');
  const [style, setStyle] = useStateD('yemeksepeti');
  const [progress, setProgress] = useStateD(0);
  const [showConfetti, setShowConfetti] = useStateD(false);

  const cookSteps = ['Sahne hazırlanıyor', 'Işık ayarlanıyor', 'Tabak yerleştiriliyor', 'Son rötuşlar', 'Hazır!'];
  const [cookStep, setCookStep] = useStateD(0);

  const startCook = () => {
    setPhase('cooking');
    setProgress(0);
    setCookStep(0);
    let p = 0;
    const tick = setInterval(() => {
      p += 4;
      setProgress(Math.min(100, p));
      setCookStep(Math.min(4, Math.floor(p / 22)));
      if (p >= 100) {
        clearInterval(tick);
        setTimeout(() => {
          setPhase('done');
          setShowConfetti(true);
          setTimeout(() => setShowConfetti(false), 2400);
        }, 400);
      }
    }, 240);
  };

  const reset = () => { setPhase('upload'); setProgress(0); };

  return (
    <div style={{ padding: '16px 16px 100px', position: 'relative' }}>
      {/* Quota bar */}
      <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 12, padding: '10px 14px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 13, fontWeight: 600 }}>Bu ay 12/30 görsel</span>
        <div style={{ flex: 1, height: 6, background: 'var(--bg-2)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: '40%', background: 'linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%)', borderRadius: 999 }}/>
        </div>
      </div>

      <h2 style={{ fontSize: 24, marginBottom: 4, lineHeight: 1.15 }}>Görsel Üret</h2>
      <p style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 18 }}>Yemek fotoğrafından profesyonel görsel</p>

      {phase !== 'cooking' && phase !== 'done' && (
        <>
          <UploadZone phase={phase} setPhase={setPhase}/>
          {phase === 'uploaded' && (
            <>
              <Field label="Yemek adı">
                <div style={{ position: 'relative' }}>
                  <input value={name} onChange={e => setName(e.target.value)} style={{ width: '100%', padding: '12px 14px', borderRadius: 10, border: '1px solid var(--line-2)', fontSize: 15, fontFamily: 'inherit', background: '#fff' }}/>
                  <span style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 11, color: 'var(--ink-4)' }}>otomatik</span>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
                  {['Lahmacun', 'Adana Kebap', 'Pide', 'Künefe', 'İskender'].map(s => (
                    <button key={s} onClick={() => setName(s)} style={{ padding: '4px 10px', fontSize: 12, background: name === s ? 'var(--primary-100)' : 'var(--bg-2)', color: name === s ? 'var(--primary)' : 'var(--ink-2)', border: 'none', borderRadius: 999, cursor: 'pointer', fontFamily: 'inherit', fontWeight: 500 }}>{s}</button>
                  ))}
                </div>
              </Field>

              <Field label="Stil seçimi">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { id: 'yemeksepeti', t: 'Yemeksepeti / Getir', d: 'Beyaz arka plan, kuş bakışı' },
                    { id: 'instagram', t: 'Instagram Square', d: 'Sıcak ışık, atmosferik' },
                    { id: 'menu', t: 'Menü Kartı', d: 'Premium stüdyo çekimi' },
                    { id: 'open', t: 'Açık Menü', d: 'Tabağın yan açısı' },
                  ].map(s => (
                    <button key={s.id} onClick={() => setStyle(s.id)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: style === s.id ? 'var(--primary-100)' : '#fff', border: style === s.id ? '1.5px solid var(--primary)' : '1px solid var(--line)', borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }}>
                      <span style={{ width: 18, height: 18, borderRadius: 999, border: style === s.id ? '5px solid var(--primary)' : '1.5px solid var(--line-2)', flexShrink: 0, transition: 'all 150ms' }}/>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, fontWeight: 600 }}>{s.t}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 1 }}>{s.d}</div>
                      </div>
                    </button>
                  ))}
                </div>
              </Field>

              <button className="btn btn-primary" style={{ width: '100%', padding: '16px', fontSize: 16, marginTop: 8 }} onClick={startCook}>
                <span>{Icon.sparkle(18)}</span>
                30 saniyede üret
              </button>
              <div style={{ fontSize: 11.5, color: 'var(--ink-4)', textAlign: 'center', marginTop: 8 }}>
                1 görsel kredisi kullanılacak (kalan: 18)
              </div>
            </>
          )}
        </>
      )}

      {phase === 'cooking' && <CookingState progress={progress} step={cookSteps[cookStep]}/>}
      {phase === 'done' && <ResultsGrid name={name} onAgain={reset}/>}
      {showConfetti && <Confetti/>}
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</div>
      {children}
    </div>
  );
}

function UploadZone({ phase, setPhase }) {
  if (phase === 'uploaded') {
    return (
      <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', aspectRatio: '4/3', boxShadow: 'var(--shadow-sm)' }}>
        <img src={IMG.lahmacunRaw} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.92) saturate(0.85)' }} alt="Yüklenen ham lahmacun fotoğrafı"/>
        <div style={{ position: 'absolute', top: 10, left: 10, padding: '4px 9px', background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: 6, fontSize: 11, fontWeight: 600 }}>lahmacun-mutfak.jpg</div>
        <button onClick={() => setPhase('upload')} style={{ position: 'absolute', top: 10, right: 10, padding: '5px 10px', background: '#fff', border: 'none', borderRadius: 6, fontSize: 11, fontWeight: 600, color: 'var(--dark)', cursor: 'pointer', fontFamily: 'inherit' }}>Değiştir</button>
      </div>
    );
  }
  return (
    <button onClick={() => setPhase('uploaded')} style={{ width: '100%', aspectRatio: '4/3', background: '#fff', border: `2px dashed ${phase === 'dragging' ? 'var(--primary)' : 'var(--line-2)'}`, borderRadius: 14, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 200ms', padding: 16 }}
      onDragOver={(e) => { e.preventDefault(); setPhase('dragging'); }}
      onDragLeave={() => setPhase('upload')}
      onDrop={(e) => { e.preventDefault(); setPhase('uploaded'); }}>
      <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--primary-100)', color: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icon.upload(28)}</div>
      <div>
        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--dark)', textAlign: 'center' }}>Fotoğrafı yükleyin</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, textAlign: 'center', maxWidth: 200, lineHeight: 1.4 }}>
          JPG, PNG · Telefon çekimi de olur, en az 800x800px
        </div>
      </div>
    </button>
  );
}

function CookingState({ progress, step }) {
  return (
    <div style={{ padding: '40px 20px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
      <div style={{ position: 'relative', width: 180, height: 160 }}>
        {/* Steam */}
        <div className="steam" style={{ left: 50, animationDelay: '0s' }}/>
        <div className="steam" style={{ left: 78, animationDelay: '0.5s' }}/>
        <div className="steam" style={{ left: 106, animationDelay: '1s' }}/>
        <div className="steam" style={{ left: 130, animationDelay: '0.3s' }}/>
        {/* Pot */}
        <svg width="180" height="160" viewBox="0 0 180 160" style={{ position: 'absolute', bottom: 0, left: 0 }}>
          <ellipse cx="90" cy="100" rx="62" ry="9" fill="#1A1A1A" opacity="0.12"/>
          <path d="M30 92 L36 148 a5 5 0 0 0 5 5 h98 a5 5 0 0 0 5 -5 L150 92 Z" fill="#1A1A1A"/>
          <ellipse cx="90" cy="92" rx="60" ry="8" fill="#C8102E"/>
          <ellipse cx="90" cy="89" rx="56" ry="6" fill="#E03050" opacity="0.6"/>
          <rect x="14" y="86" width="22" height="9" rx="4" fill="#1A1A1A"/>
          <rect x="144" y="86" width="22" height="9" rx="4" fill="#1A1A1A"/>
        </svg>
      </div>
      <div style={{ textAlign: 'center' }}>
        <div className="serif" style={{ fontSize: 22, fontStyle: 'italic', color: 'var(--dark)', marginBottom: 6 }}>Şefimiz hazırlıyor…</div>
        <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{step}</div>
      </div>
      <div style={{ width: '100%', maxWidth: 280 }}>
        <div style={{ height: 6, background: 'var(--bg-2)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${progress}%`, background: 'linear-gradient(90deg, var(--primary), var(--accent))', borderRadius: 999, transition: 'width 240ms ease' }}/>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: 'var(--ink-4)' }}>
          <span>%{progress}</span>
          <span>~{Math.max(0, Math.round((100 - progress) * 0.3))} sn</span>
        </div>
      </div>
    </div>
  );
}

function ResultsGrid({ name, onAgain }) {
  const [selected, setSelected] = useStateD(0);
  const imgs = [IMG.result1, IMG.result2, IMG.result3, IMG.result4];
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: 'var(--success-100)', border: '1px solid rgba(123,158,63,0.3)', borderRadius: 10, marginBottom: 16 }}>
        <span style={{ color: 'var(--success)' }}>{Icon.check(18)}</span>
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--dark)' }}>{name} hazır | 4 versiyon üretildi</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 16 }}>
        {imgs.map((src, i) => {
          const labels = ['Kuş bakışı', 'Yan açı', 'Yakın plan', '45°'];
          return (
            <button key={i} onClick={() => setSelected(i)} aria-pressed={selected === i} style={{ position: 'relative', aspectRatio: '1', borderRadius: 12, overflow: 'hidden', border: selected === i ? '2.5px solid var(--primary)' : '2.5px solid transparent', cursor: 'pointer', padding: 0, background: 'var(--bg-3)' }}>
              <img src={src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={`${name} - ${labels[i].toLowerCase()} versiyonu`} loading="lazy"/>
              <div style={{ position: 'absolute', top: 8, left: 8, padding: '3px 7px', background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: 4, fontSize: 10, fontWeight: 700 }}>{labels[i]}</div>
              {selected === i && (
                <div style={{ position: 'absolute', bottom: 8, right: 8, width: 22, height: 22, borderRadius: 999, background: 'var(--primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icon.check(14)}</div>
              )}
            </button>
          );
        })}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <button className="btn btn-primary" style={{ width: '100%', padding: '14px' }}>{Icon.download(18)} Seçilenleri indir</button>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <button className="btn btn-ghost" style={{ background: '#fff', padding: '12px' }}>{Icon.instagram(16)} Instagram'a yolla</button>
          <button className="btn btn-ghost" style={{ background: '#fff', padding: '12px' }} onClick={onAgain}>{Icon.refresh(16)} Yeniden üret</button>
        </div>
      </div>
    </div>
  );
}

function Confetti() {
  const pieces = Array.from({ length: 24 });
  const colors = ['#C8102E', '#F5A623', '#7B9E3F', '#FAF8F5'];
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 100 }}>
      {pieces.map((_, i) => (
        <span key={i} style={{
          position: 'absolute',
          left: `${Math.random() * 100}%`,
          top: -20,
          width: 8 + Math.random() * 6,
          height: 12 + Math.random() * 6,
          background: colors[i % colors.length],
          borderRadius: 2,
          animation: `confetti-fall ${1.4 + Math.random() * 1.2}s ease-out ${Math.random() * 0.4}s forwards`,
        }}/>
      ))}
    </div>
  );
}

function ComingSoon({ title, desc, icon }) {
  return (
    <div style={{ padding: '60px 24px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <div style={{ width: 80, height: 80, borderRadius: 20, background: 'var(--accent-100)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icon[icon](36)}</div>
      <div>
        <h2 style={{ fontSize: 22, marginBottom: 6 }}>{title}</h2>
        <p style={{ fontSize: 14, color: 'var(--ink-3)' }}>{desc}</p>
      </div>
      <div style={{ padding: '6px 12px', background: 'var(--bg-2)', borderRadius: 999, fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>Akış Görsel Üret ile aynı</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Other tabs
// ─────────────────────────────────────────────────────────────
function HistoryPage() {
  const items = [
    { img: IMG.hist1, name: 'Künefe', date: '2 saat önce', type: 'Görsel' },
    { img: IMG.hist2, name: 'Baklava (kare kesim)', date: 'Bugün, 11:24', type: 'Post' },
    { img: IMG.hist3, name: 'Mezeli tabak', date: 'Dün', type: 'Görsel' },
    { img: IMG.hist4, name: 'Kıymalı pide', date: '2 gün önce', type: 'Story' },
    { img: IMG.hist5, name: 'Mercimek çorbası', date: '3 gün önce', type: 'Görsel' },
    { img: IMG.hist6, name: 'Domates çorbası', date: '5 gün önce', type: 'Görsel' },
  ];
  return (
    <div style={{ padding: '16px 16px 100px' }}>
      <h2 style={{ fontSize: 24, marginBottom: 4 }}>Geçmiş Üretimler</h2>
      <p style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 18 }}>Bu ay 16 üretim · 84 görsel</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: 10, background: '#fff', border: '1px solid var(--line)', borderRadius: 12 }}>
            <div style={{ width: 64, height: 64, borderRadius: 10, overflow: 'hidden', background: 'var(--bg-3)', flexShrink: 0 }}>
              <img src={it.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={it.name} loading="lazy"/>
            </div>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 0 }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, lineHeight: 1.2 }}>{it.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{it.date}</div>
              <span style={{ fontSize: 10.5, padding: '2px 7px', background: 'var(--bg-2)', borderRadius: 4, fontWeight: 600, color: 'var(--ink-2)', alignSelf: 'flex-start', marginTop: 6 }}>{it.type}</span>
            </div>
            <button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--bg-2)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', alignSelf: 'center', color: 'var(--ink-2)', cursor: 'pointer' }}>{Icon.download(16)}</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function IdentityPage() {
  return (
    <div style={{ padding: '16px 16px 100px' }}>
      <h2 style={{ fontSize: 24, marginBottom: 4 }}>Kurumsal Kimlik</h2>
      <p style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 20 }}>Bu ayarlar her üretime uygulanır</p>

      <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 16, marginBottom: 14 }}>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 12 }}>Logo</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 64, height: 64, borderRadius: 12, background: 'var(--primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, fontWeight: 800 }}>M</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Mehmet'in Lokantası</div>
            <button style={{ background: 'none', border: 'none', padding: 0, color: 'var(--primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', marginTop: 4, fontFamily: 'inherit' }}>Logo değiştir →</button>
          </div>
        </div>
      </div>

      <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 16, marginBottom: 14 }}>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 12 }}>Marka Renkleri</div>
        <div style={{ display: 'flex', gap: 10 }}>
          {['#C8102E', '#F5A623', '#1A1A1A', '#FAF8F5', '#7B9E3F'].map(c => (
            <div key={c} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: '100%', aspectRatio: '1', borderRadius: 10, background: c, border: '1px solid var(--line)' }}/>
              <span className="mono" style={{ fontSize: 9, color: 'var(--ink-3)' }}>{c}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 16 }}>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 12 }}>Yazı Tipi</div>
        <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 10 }}>
          <div className="serif" style={{ fontSize: 24, fontStyle: 'italic', color: 'var(--primary)', fontWeight: 500 }}>Mehmet'in Lokantası</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>Newsreader Italic · Klasik & sıcak</div>
        </div>
      </div>
    </div>
  );
}

function IntegrationsPage() {
  const items = [
    { name: 'Yemeksepeti', desc: 'Üretilen görselleri direkt menüye yükle', status: 'connected', logo: '#FF1144' },
    { name: 'Getir Yemek', desc: 'Tek hesapla otomatik senkron', status: 'connected', logo: '#5D3EBC' },
    { name: 'Instagram Business', desc: 'Direkt post & story paylaşımı', status: 'connect', logo: '#E1306C' },
    { name: 'Trendyol Yemek', desc: 'Pro plan dahili', status: 'pro', logo: '#F27A1A' },
  ];
  return (
    <div style={{ padding: '16px 16px 100px' }}>
      <h2 style={{ fontSize: 24, marginBottom: 4 }}>Entegrasyonlar</h2>
      <p style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 20 }}>Üretimi tek hesapta toplayın</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, background: '#fff', border: '1px solid var(--line)', borderRadius: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: it.logo, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, flexShrink: 0 }}>{it.name[0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{it.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{it.desc}</div>
            </div>
            {it.status === 'connected' && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, padding: '4px 8px', background: 'var(--success-100)', color: 'var(--success)', borderRadius: 6, fontWeight: 700 }}>{Icon.check(12)} BAĞLI</span>}
            {it.status === 'connect' && <button className="btn btn-primary" style={{ padding: '6px 12px', fontSize: 12 }}>Bağla</button>}
            {it.status === 'pro' && <span style={{ fontSize: 11, padding: '4px 8px', background: 'var(--accent-100)', color: 'var(--accent)', borderRadius: 6, fontWeight: 700 }}>PRO</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function BillingPage() {
  return (
    <div style={{ padding: '16px 16px 100px' }}>
      <h2 style={{ fontSize: 24, marginBottom: 4 }}>Faturalama</h2>
      <p style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 20 }}>Standart plan · 1 Kasım'da yenilenecek</p>

      <div style={{ background: 'var(--dark)', color: '#fff', borderRadius: 14, padding: 18, marginBottom: 14 }}>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginBottom: 6 }}>Aylık ödeme</div>
        <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em' }}>999 ₺</div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>Sonraki ödeme: 1 Kas 2026</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <a className="btn" style={{ background: 'rgba(255,255,255,0.12)', color: '#fff', flex: 1, padding: '10px', textDecoration: 'none', fontSize: 12, fontWeight: 600 }} href={whatsappLink(WA_MESSAGES.upgrade)} target="_blank" rel="noopener">Plan değiştir</a>
          <a className="btn" style={{ background: 'rgba(255,255,255,0.12)', color: '#fff', flex: 1, padding: '10px', textDecoration: 'none', fontSize: 12, fontWeight: 600 }} href={whatsappLink('Merhaba, MutfakAI üyeliğimi iptal etmek istiyorum.')} target="_blank" rel="noopener">İptal et</a>
        </div>
      </div>

      <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 10 }}>Geçmiş Faturalar</div>
      {['Ekim 2026', 'Eylül 2026', 'Ağustos 2026'].map(m => (
        <div key={m} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', background: '#fff', border: '1px solid var(--line)', borderRadius: 10, marginBottom: 8 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>{m}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>999,00 ₺ · Ödendi</div>
          </div>
          <button style={{ background: 'none', border: 'none', color: 'var(--primary)', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>İndir</button>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Bottom nav + side drawer
// ─────────────────────────────────────────────────────────────
function BottomNav({ page, onNav }) {
  const tabs = [
    { id: 'home', t: 'Ana Sayfa', icon: 'home' },
    { id: 'image', t: 'Üret', icon: 'sparkle', primary: true },
    { id: 'history', t: 'Geçmiş', icon: 'history' },
    { id: 'identity', t: 'Marka', icon: 'identity' },
  ];
  return (
    <div style={{ display: 'flex', padding: '8px 8px 12px', background: '#fff', borderTop: '1px solid var(--line)', flexShrink: 0 }}>
      {tabs.map(t => (
        <button key={t.id} onClick={() => onNav(t.id)} style={{
          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
          padding: '8px 4px', background: 'none', border: 'none',
          color: page === t.id ? 'var(--primary)' : 'var(--ink-3)',
          cursor: 'pointer', fontFamily: 'inherit',
        }}>
          {t.primary ? (
            <div style={{ width: 38, height: 38, borderRadius: 12, background: page === t.id ? 'var(--primary)' : 'var(--dark)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 1 }}>{Icon[t.icon](20)}</div>
          ) : (
            Icon[t.icon](22)
          )}
          <span style={{ fontSize: 10.5, fontWeight: 600 }}>{t.t}</span>
        </button>
      ))}
    </div>
  );
}

function SideDrawer({ page, onNav, onClose }) {
  const items = [
    { id: 'home', t: 'Ana Sayfa', icon: 'home' },
    { id: 'image', t: 'Görsel Üret', icon: 'image' },
    { id: 'post', t: 'Post Üret', icon: 'post' },
    { id: 'story', t: 'Story Üret', icon: 'story' },
    { id: 'history', t: 'Geçmiş Üretimler', icon: 'history' },
    { id: 'identity', t: 'Kurumsal Kimlik', icon: 'identity' },
    { id: 'integrations', t: 'Entegrasyonlar', icon: 'link' },
    { id: 'billing', t: 'Faturalama', icon: 'invoice' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 200 }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(26,26,26,0.5)', backdropFilter: 'blur(4px)' }}/>
      <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: '78%', maxWidth: 320, background: '#fff', display: 'flex', flexDirection: 'column', animation: 'slideIn 220ms ease' }}>
        <style>{`@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }`}</style>
        <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ color: 'var(--primary)' }}>{Icon.logo(28)}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 17, letterSpacing: '-0.02em' }}>MutfakAI</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Mehmet'in Lokantası</div>
          </div>
          <button onClick={onClose} style={{ width: 30, height: 30, border: 'none', background: 'var(--bg-2)', borderRadius: 8, cursor: 'pointer', color: 'var(--ink-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icon.x(16)}</button>
        </div>
        <div style={{ padding: 12, flex: 1, overflowY: 'auto' }}>
          {items.map(it => (
            <button key={it.id} onClick={() => onNav(it.id)} style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', background: page === it.id ? 'var(--primary-100)' : 'transparent',
              border: 'none', borderRadius: 10, cursor: 'pointer',
              color: page === it.id ? 'var(--primary)' : 'var(--dark)',
              fontFamily: 'inherit', fontSize: 14.5, fontWeight: page === it.id ? 600 : 500,
              marginBottom: 2, textAlign: 'left',
            }}>
              {Icon[it.icon](20)} {it.t}
            </button>
          ))}
        </div>
        <div style={{ padding: 16, borderTop: '1px solid var(--line)' }}>
          <div style={{ padding: 14, background: 'var(--accent-100)', borderRadius: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--dark)', marginBottom: 4 }}>Pro'ya geçin</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.4, marginBottom: 8 }}>Sınırsız üretim + Yemeksepeti API.</div>
            <a className="btn btn-primary" style={{ width: '100%', padding: '8px', fontSize: 12, textDecoration: 'none' }} href={whatsappLink(WA_MESSAGES.upgrade)} target="_blank" rel="noopener">{Icon.whatsapp(14)} WhatsApp ile yükselt</a>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;