// Shared data + visual primitives for Matesy landing

const STEPS = [
  { n: '01', title: 'Mağazayı analiz edin', body: 'Bir Etsy mağaza URL’si yapıştırın — Matesy en çok satanları, fiyatları ve büyüme oranını çıkarsın.' },
  { n: '02', title: 'Tasarım üretin', body: 'Trend tasarımların benzerlerini saniyeler içinde üretin. Renk, tipografi, kompozisyon — siz seçin, AI uygular.' },
  { n: '03', title: 'Mockup’a giydirin', body: '500+ profesyonel sahne kütüphanesinden seçin ya da kendi mockup’larınızı yükleyin.' },
  { n: '04', title: 'Etsy’de yayınlayın', body: 'SEO uyumlu başlık, etiket ve ürün hikâyesi otomatik. Sadece indirin ve mağazanıza yükleyin.' },
];

const PROBLEMS = [
  { p: 'Neyin sattığını bilmek zor', s: 'En fazla satan tasarımları tespit ediyoruz' },
  { p: 'Tasarım hazırlamak çok fazla zaman alıyor', s: 'Dakikalar içerisinde yüzlerce tasarım üretin' },
  { p: 'Tasarımları Mock-Up\'lamak çok zaman alıyor', s: 'Tasarımı tek tıkla 10+ Mock-Up\'a giydir' },
  { p: 'İyi mock-up bulmak zor', s: 'Yüzlerce hazır profesyonel mock-up' },
  { p: 'SEO çalışması yapmak kafa karıştırıyor', s: 'Tek tıkla SEO Uyumlu başlık, etiket, hikaye' },
];

const REVIEWS = [
  { name: 'Ayşe K.', role: '@bohemia.studio', text: 'İlk ay 47 listing açtım, 12’si satışa geçti. Manuel olsa belki 5 listing açabilirdim. Trend keşfi ile rakipleri analiz etmek oyunun kurallarını değiştirdi.' },
  { name: 'Mehmet T.', role: '@vintageprints.co', text: 'Print-on-demand’a yeniydim, danışmanlık desteği ile ilk 3 hafta içinde Etsy’de yayında 30+ ürünüm vardı. Eğitim videoları çok detaylı.' },
  { name: 'Zeynep A.', role: '@petalshop', text: 'Mockup kütüphanesi inanılmaz. Daha önce Photoshop’ta saatler harcıyordum, şimdi 5 dakikada 20 ürün görseli hazırlıyorum.' },
  { name: 'Can B.', role: '@northstarprints', text: 'SEO otomasyonu sadece zaman değil, gerçekten daha iyi listing’ler üretiyor. Etsy aramalarında çok daha üst sıralarda görünüyoruz.' },
  { name: 'Elif Y.', role: '@dreamlandtees', text: 'Aylık $0’dan $4,200’e çıktım. Matesy olmadan asla bu hızda olmazdı. Trend keşfi feature’ı altın değerinde.' },
  { name: 'Burak D.', role: '@oldsoulgoods', text: 'POD’a yatırım yapmaya değer mi diye sorduğumda — kesinlikle evet. Tek seferlik ödemenin çok ötesinde değer.' },
];

const FAQS = [
  { q: 'Hangi tür ürünler için listing oluşturabilirim?', a: 'Matesy ile şu anda T-shirt, Hoodie, Sweatshirt, Tank Top ve Duvar tabloları ürün grupları için listing çalışmaları yapabilirsiniz.' },
  { q: 'Üretim tedariği de sağlıyor musunuz?', a: 'Evet. Partner olduğumuz Print On Demand üreticilerine sipariş aldıkça üretim yaptırabilirsiniz.' },
  { q: 'Listing oluşturma ne kadar hızlı?', a: 'Birkaç dakikada onlarca ürün listing’i oluşturabilirsiniz.' },
  { q: 'Bu aracı kullanmak için herhangi bir beceriye ihtiyacım var mı?', a: 'Hayır, tek yapmanız gereken rakip mağaza adını girmek veya referans tasarımın linkini eklemek. Geriye kalan her şey oldukça kolay.' },
];

const PACKAGE_INCLUDES = [
  '6 Aylık Matesy Aboneliği (30,000 Kredi)',
  'Amerika Şirket Kurulum Desteği',
  'Banka Hesabı Açılış Desteği',
  'ETSY Mağazası Açılış Desteği',
  'Birebir Eğitim & Danışmanlık',
];

// ───────── Visual primitives ─────────

// T-shirt mock with text design
function ShirtMock({ color = '#0F0E0C', tee = '#0F0E0C', design = 'WILD', tone = '#FFEAD4' }) {
  return (
    <div style={{ width: '100%', height: '100%', background: color === '#E8DFCD' ? '#F2EBDA' : '#F2EBDA', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
      <svg viewBox="0 0 200 240" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <path d="M40 50 L70 35 Q85 28 100 28 Q115 28 130 35 L160 50 L175 90 L150 95 L150 210 Q150 215 145 215 L55 215 Q50 215 50 210 L50 95 L25 90 Z" fill={tee} stroke="rgba(0,0,0,0.06)" strokeWidth="1"/>
        <path d="M70 35 Q85 50 100 50 Q115 50 130 35" fill="none" stroke="rgba(0,0,0,0.08)" strokeWidth="1.5"/>
        {/* Print area */}
        <text x="100" y="135" fontFamily="Georgia, serif" fontWeight="700" fontSize="22" fill={tone} textAnchor="middle" letterSpacing="3">{design}</text>
        <line x1="78" y1="146" x2="122" y2="146" stroke={tone} strokeWidth="1"/>
        <text x="100" y="160" fontFamily="'JetBrains Mono', monospace" fontSize="6.5" fill={tone} textAnchor="middle" letterSpacing="2">EST · 2026</text>
      </svg>
    </div>
  );
}

// Diagonal striped placeholder block
function StripeBlock({ label, color, stripe }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: color, backgroundImage: `repeating-linear-gradient(45deg, transparent 0, transparent 16px, ${stripe} 16px, ${stripe} 17px)`, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end', padding: 14 }}>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--ink-mute)', background: 'rgba(255,255,255,0.85)', padding: '3px 7px', borderRadius: 3, letterSpacing: 0.4, fontWeight: 600 }}>{label}</span>
    </div>
  );
}
