// Matesy Landing — V1 polished
// Inter font, matesy orange (#FF5A1F)
// Sections: Nav, Hero, LogosTicker, Demo, Process, Trends, Compare, Reviews, Pricing, FAQ, FinalCTA, Footer

const C = {
  brand: 'var(--brand)',
  brandSoft: 'var(--brand-soft)',
  brandDeep: 'var(--brand-deep)',
  ink: 'var(--ink)',
  ink2: 'var(--ink-2)',
  inkSoft: 'var(--ink-soft)',
  inkMute: 'var(--ink-mute)',
  line: 'var(--line)',
  line2: 'var(--line-2)',
  surface: 'var(--surface)',
  surface2: 'var(--surface-2)',
  bg: 'var(--bg)',
  pos: 'var(--pos)'
};

// ───────── Building blocks ─────────
function Tag({ children, color, dot = true, bg }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 7,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: color || C.inkSoft,
      letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 500,
      background: bg, padding: bg ? '5px 9px' : 0, borderRadius: bg ? 4 : 0
    }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: '50%', background: color || C.brand }} />}
      {children}
    </span>);

}

function Btn({ children, primary, ghost, size = 'md', onClick }) {
  const padMap = { sm: '8px 14px', md: '11px 18px', lg: '14px 22px' };
  const fsMap = { sm: 12, md: 13, lg: 14 };
  const base = {
    border: 'none', cursor: 'pointer', borderRadius: 8,
    padding: padMap[size], fontSize: fsMap[size], fontWeight: 600,
    letterSpacing: -0.1, transition: 'all .15s', fontFamily: 'inherit',
    display: 'inline-flex', alignItems: 'center', gap: 8
  };
  if (primary) Object.assign(base, { background: C.ink, color: '#fff', boxShadow: '0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08)' });else
  if (ghost) Object.assign(base, { background: 'transparent', color: C.ink });else
  Object.assign(base, { background: '#fff', color: C.ink, boxShadow: 'inset 0 0 0 1px var(--line-2)' });
  return <button style={base} onClick={onClick}>{children}</button>;
}

function BrandBtn({ children, size = 'md', href }) {
  const padMap = { sm: '8px 14px', md: '11px 18px', lg: '14px 22px' };
  const fsMap = { sm: 12, md: 13, lg: 14 };
  const style = {
    background: C.brand, color: '#fff', border: 'none', cursor: 'pointer', borderRadius: 8,
    padding: padMap[size], fontSize: fsMap[size], fontWeight: 600,
    letterSpacing: -0.1, fontFamily: 'inherit', whiteSpace: 'nowrap', textDecoration: 'none',
    display: 'inline-flex', alignItems: 'center', gap: 8,
    boxShadow: '0 1px 2px rgba(199,66,26,0.4), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0.5px rgba(199,66,26,0.6)'
  };
  if (href) return <a href={href} style={style}>{children}</a>;
  return <button style={style}>{children}</button>;
}

// Logo wordmark — text only
function Logo({ size = 28, dark = false }) {
  return (
    <span style={{
      fontWeight: 700,
      fontSize: Math.round(size * 0.72),
      color: dark ? '#fff' : C.ink,
      letterSpacing: -0.4,
      lineHeight: 1
    }}>matesy</span>);

}

// ───────── Lang toggle (shared by Nav + mobile menu) ─────────
function LangToggle({ compact }) {
  const isEn = typeof window !== 'undefined' && (window.location.pathname.indexOf('/en') === 0);
  const setLang = (lang) => {
    try { localStorage.setItem('matesyLang', lang); } catch (e) {}
    if (lang === 'en' && !isEn) { window.location.href = '/en/'; return; }
    if (lang === 'tr' && isEn)  { window.location.href = '/'; return; }
  };
  const itemStyle = (active) => ({
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: compact ? 11 : 11.5,
    fontWeight: 600, letterSpacing: 0.5,
    color: active ? C.ink : C.inkMute,
    cursor: 'pointer', userSelect: 'none',
    padding: '2px 4px', borderRadius: 4,
    background: active ? C.surface : 'transparent',
    transition: 'color .15s, background .15s'
  });
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
      <span style={itemStyle(!isEn)} onClick={() => setLang('tr')}>TR</span>
      <span style={{ color: C.line2, fontSize: 11, padding: '0 1px' }}>·</span>
      <span style={itemStyle(isEn)} onClick={() => setLang('en')}>EN</span>
    </div>);
}

// ───────── Nav (Floating Pill — H2) ─────────
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [featuresOpen, setFeaturesOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const mobileRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    if (!mobileOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMobileOpen(false); };
    const onClick = (e) => {
      if (mobileRef.current && !mobileRef.current.contains(e.target)) setMobileOpen(false);
    };
    window.addEventListener('keydown', onKey);
    window.addEventListener('mousedown', onClick);
    window.addEventListener('touchstart', onClick);
    return () => {
      window.removeEventListener('keydown', onKey);
      window.removeEventListener('mousedown', onClick);
      window.removeEventListener('touchstart', onClick);
    };
  }, [mobileOpen]);

  const features = [
  ['Trendler', '#trends'],
  ['Tasarım Üretimi', '#designs'],
  ['Seçimler & Mockup', '#selections'],
  ['Ürünler & SEO', '#products'],
  ['Sipariş Otomasyonu', '#orders']];

  const linkStyle = { fontSize: 13, color: C.inkSoft, textDecoration: 'none', fontWeight: 500, transition: 'color .15s', fontFamily: 'inherit' };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      padding: scrolled ? '12px 32px' : '20px 32px',
      display: 'flex', justifyContent: 'center',
      transition: 'padding .25s cubic-bezier(.2,.7,.3,1)',
      pointerEvents: 'none'
    }}>
      <div style={{
        pointerEvents: 'auto',
        display: 'inline-flex', alignItems: 'center', gap: 28,
        background: 'rgba(255,255,255,0.86)',
        backdropFilter: 'blur(18px)',
        WebkitBackdropFilter: 'blur(18px)',
        borderRadius: 999, padding: '10px 12px 10px 22px',
        boxShadow: scrolled ?
        '0 12px 40px rgba(10,9,8,0.12), 0 1px 0 rgba(10,9,8,0.04), inset 0 0 0 1px rgba(10,9,8,0.06)' :
        '0 8px 28px rgba(10,9,8,0.08), 0 1px 0 rgba(10,9,8,0.04), inset 0 0 0 1px rgba(10,9,8,0.06)',
        transition: 'box-shadow .25s, transform .25s'
      }}>
        <Logo size={26} />
        <span style={{ width: 1, height: 18, background: C.line2 }} />
        <nav style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <a href="#features" style={linkStyle}
            onMouseEnter={(e) => e.currentTarget.style.color = C.ink}
            onMouseLeave={(e) => e.currentTarget.style.color = C.inkSoft}>
            Nasıl Çalışır
          </a>

          {/* Özellikler dropdown */}
          <div
            style={{ position: 'relative' }}
            onMouseEnter={() => setFeaturesOpen(true)}
            onMouseLeave={() => setFeaturesOpen(false)}>
            <button style={{
              ...linkStyle,
              background: 'none', border: 'none', padding: 0, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 4,
              color: featuresOpen ? C.ink : C.inkSoft
            }}>
              Özellikler
              <span style={{
                fontSize: 9, opacity: 0.6, marginTop: 1,
                transform: featuresOpen ? 'rotate(180deg)' : 'none',
                transition: 'transform .15s'
              }}>▾</span>
            </button>
            {featuresOpen &&
              <div style={{
                position: 'absolute',
                top: '100%', left: '50%',
                transform: 'translateX(-50%)',
                paddingTop: 12,
                zIndex: 60
              }}>
                <div style={{
                  background: 'rgba(255,255,255,0.96)',
                  backdropFilter: 'blur(18px)',
                  WebkitBackdropFilter: 'blur(18px)',
                  borderRadius: 12, padding: 6, minWidth: 220,
                  boxShadow: '0 16px 48px rgba(10,9,8,0.14), 0 1px 0 rgba(10,9,8,0.04), inset 0 0 0 1px rgba(10,9,8,0.06)'
                }}>
                  {features.map(([l, h]) =>
                    <a key={l} href={h} onClick={() => setFeaturesOpen(false)} style={{
                      display: 'block', padding: '9px 12px',
                      fontSize: 13, fontWeight: 500, color: C.ink2,
                      textDecoration: 'none', borderRadius: 7,
                      transition: 'background .12s, color .12s'
                    }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = C.brandSoft;
                        e.currentTarget.style.color = C.brandDeep;
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = 'transparent';
                        e.currentTarget.style.color = C.ink2;
                      }}>
                      {l}
                    </a>
                  )}
                </div>
              </div>
            }
          </div>

          {[['Katalog', 'Matesy Katalog.html'], ['Fiyatlandırma', '#pricing'], ['SSS', '#faq']].map(([l, h]) =>
            <a key={l} href={h} style={linkStyle}
              onMouseEnter={(e) => e.currentTarget.style.color = C.ink}
              onMouseLeave={(e) => e.currentTarget.style.color = C.inkSoft}>
              {l}
            </a>
          )}
        </nav>
        <span className="lang-toggle-desktop"><LangToggle /></span>
        <div ref={mobileRef} className="mobile-menu-btn" style={{ position: 'relative' }}>
          <button
            type="button"
            onClick={() => setMobileOpen(o => !o)}
            aria-label="Menüyü aç"
            aria-expanded={mobileOpen}
            style={{
              border: 'none', background: mobileOpen ? C.surface : 'transparent',
              cursor: 'pointer', padding: 0, width: 36, height: 36, borderRadius: 8,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: C.ink, transition: 'background .15s'
            }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <circle cx="5" cy="12" r="2" />
              <circle cx="12" cy="12" r="2" />
              <circle cx="19" cy="12" r="2" />
            </svg>
          </button>
          {mobileOpen && (
            <div style={{
              position: 'absolute', top: '100%', right: -4,
              paddingTop: 12, zIndex: 60
            }}>
              <div style={{
                background: 'rgba(255,255,255,0.97)',
                backdropFilter: 'blur(18px)',
                WebkitBackdropFilter: 'blur(18px)',
                borderRadius: 14, padding: 8, minWidth: 240,
                boxShadow: '0 16px 48px rgba(10,9,8,0.16), 0 1px 0 rgba(10,9,8,0.04), inset 0 0 0 1px rgba(10,9,8,0.06)'
              }}>
                {[
                  ['Nasıl Çalışır', '#features'],
                  ['Katalog', 'Matesy Katalog.html'],
                  ['Fiyatlandırma', '#pricing'],
                  ['SSS', '#faq']
                ].map(([l, h]) => (
                  <a key={l} href={h} onClick={() => setMobileOpen(false)} style={{
                    display: 'block', padding: '11px 14px',
                    fontSize: 14, fontWeight: 500, color: C.ink,
                    textDecoration: 'none', borderRadius: 8, letterSpacing: -0.1
                  }}
                    onMouseEnter={(e) => { e.currentTarget.style.background = C.brandSoft; e.currentTarget.style.color = C.brandDeep; }}
                    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C.ink; }}
                  >{l}</a>
                ))}
                <div style={{ height: 1, background: C.line, margin: '6px 8px' }} />
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                  color: C.inkMute, textTransform: 'uppercase', letterSpacing: 0.5,
                  fontWeight: 600, padding: '8px 14px 4px'
                }}>Özellikler</div>
                {features.map(([l, h]) => (
                  <a key={l} href={h} onClick={() => setMobileOpen(false)} style={{
                    display: 'block', padding: '10px 14px',
                    fontSize: 13.5, fontWeight: 500, color: C.ink2,
                    textDecoration: 'none', borderRadius: 8
                  }}
                    onMouseEnter={(e) => { e.currentTarget.style.background = C.brandSoft; e.currentTarget.style.color = C.brandDeep; }}
                    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C.ink2; }}
                  >{l}</a>
                ))}
                <div style={{ height: 1, background: C.line, margin: '6px 8px' }} />
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 14px' }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: C.inkMute, textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Dil / Language</span>
                  <LangToggle compact />
                </div>
              </div>
            </div>
          )}
        </div>
        <BrandBtn size="sm" href="https://tally.so/r/obRzrN">Hemen Başla <span aria-hidden>→</span></BrandBtn>
      </div>
    </header>);

}

// ───────── Hero (görsel referansa göre) ─────────
function Hero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: '#fff', borderBottom: `1px solid ${C.line}` }}>
      {/* Soft grid + spotlight */}
      <div className="dot-grid" style={{ position: 'absolute', inset: 0, opacity: 0.45, pointerEvents: 'none' }} />
      <div className="spotlight" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '40px 56px 0', position: 'relative', minHeight: 640 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start', paddingTop: 60 }}>
          {/* LEFT — copy block */}
          <div>
            <h1 className="display" style={{
              fontSize: 60, color: C.ink, lineHeight: 1.04, margin: 0, letterSpacing: '-0.04em', fontWeight: 700
            }}>
              <span style={{ display: 'block', fontWeight: "600" }}>ETSY’de</span>
              <span style={{ display: 'block', color: C.brand, fontWeight: "600" }}>Satış Yapmanın</span>
              <span style={{ display: 'block', fontWeight: "600" }}>En Kolay Yolunu</span>
              <span style={{ display: 'block', fontWeight: "600" }}>Tasarladık.</span>
            </h1>

            <div style={{
              marginTop: 36,
              display: 'inline-flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap',
              fontSize: 28, color: C.ink, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.15
            }}>
              <span style={{ color: C.inkSoft }}>Tek tıkla</span>
              <span className="word-cycle" style={{
                display: 'inline-block', height: '1.15em', overflow: 'hidden', verticalAlign: 'bottom'
              }}>
                <span className="word-cycle-track" style={{ display: 'flex', flexDirection: 'column', color: C.brand }}>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Trend Bul.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Mockup.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>SEO.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Üretim & Kargo.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Trend Bul.</span>
                </span>
              </span>
            </div>

            {/* CTA pill */}
            <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 18 }}>
              <a href="https://tally.so/r/obRzrN" style={{
                background: C.brand, color: '#fff', border: 'none', cursor: 'pointer',
                borderRadius: 999, padding: '14px 14px 14px 26px', fontSize: 18, fontWeight: 700,
                fontFamily: 'inherit', letterSpacing: -0.3, lineHeight: 1.05, textAlign: 'left',
                textDecoration: 'none',
                boxShadow: '0 6px 18px rgba(255,90,31,0.35), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0.5px rgba(199,66,26,0.6)',
                display: 'inline-flex', alignItems: 'center', gap: 18
              }}>
                <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                  <span style={{ fontWeight: "600" }}>Hemen</span>
                  <span style={{ fontWeight: "600" }}>Başla</span>
                </span>
                <span style={{
                  width: 44, height: 44, borderRadius: '50%', background: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12h13M13 6l6 6-6 6" stroke={C.brand} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </a>

              {/* Avatar group + caption */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ display: 'flex' }}>
                  {['#FFB591', '#E8DFCD', '#3A4F2C', '#3A2520'].map((bg, i) =>
                  <div key={i} style={{
                    width: 30, height: 30, borderRadius: '50%', background: bg,
                    border: '2px solid #fff', marginLeft: i === 0 ? 0 : -10,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 700, color: i > 1 ? '#fff' : C.ink,
                    position: 'relative', zIndex: 4 - i,
                    backgroundImage: `linear-gradient(135deg, ${bg}, ${bg}cc)`
                  }}>{['A', 'M', 'Z', 'C'][i]}</div>
                  )}
                </div>
                <div style={{ fontSize: 12.5, color: C.inkSoft, lineHeight: 1.35 }}>
                  Mayıs Ayı Kontenjanları<br />Açıldı! <span style={{ color: C.ink, fontWeight: 600 }}>3/5</span>
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT — testimonial cards stack */}
          <div style={{ position: 'relative', minHeight: 460 }}>
            <div className="float-card float-a" style={{ position: 'absolute', top: 0, right: 0, zIndex: 2 }}>
              <Testimonial
                bg="#FFE8D9"
                name="Hande M."
                role="T-Shirt Mağaza Sahibi"
                text={<>Matesy'den çıkmadan tüm T-Shirt operasyonumu yürütebiliyorum.</>}
                tone="warm" />
              
            </div>
            <div className="float-card float-b" style={{ position: 'absolute', top: 220, right: 30, zIndex: 1 }}>
              <Testimonial
                bg="#fff"
                name="Kaya B."
                role="POD Mağaza Sahibi"
                text={<>Matesy Trend’ler sayesinde Amerika'daki güncel olayları kolayca takip edip, listing paylaşabiliyorum.</>}
                tone="cool" />
              
            </div>
          </div>
        </div>

        {/* Bottom feature ticker */}
        <FeatureTicker />
      </div>
    </section>);

}

function Testimonial({ bg, name, role, text, tone }) {
  return (
    <div style={{
      width: 320, background: bg, borderRadius: 14,
      padding: 18, boxShadow: '0 18px 50px rgba(10,9,8,0.10), 0 2px 6px rgba(10,9,8,0.04), inset 0 0 0 1px rgba(10,9,8,0.04)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div style={{
          width: 38, height: 38, borderRadius: '50%', flexShrink: 0,
          background: tone === 'warm' ? 'linear-gradient(135deg, #C7421A, #FF8754)' : 'linear-gradient(135deg, #2C3E2D, #5A5048)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13
        }}>{name[0]}</div>
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, letterSpacing: -0.1 }}>{name}</div>
          <div style={{ fontSize: 11, color: C.inkSoft }}>({role})</div>
        </div>
      </div>
      <div style={{ fontSize: 14, color: C.ink, lineHeight: 1.45, fontWeight: 500 }}>{text}</div>
      <div style={{ display: 'flex', gap: 10, marginTop: 14, paddingTop: 12, borderTop: `1px dashed rgba(10,9,8,0.12)`, alignItems: 'center' }}>
        <RxIcon p="M2 8c1.5-3 4.5-3 6 0 1.5-3 4.5-3 6 0M3 11l5 3 5-3" />
        <RxIcon p="M3 4h10v8l-5-2-5 2z" />
        <span style={{ flex: 1 }} />
        <span style={{ width: 22, height: 22, borderRadius: '50%', background: C.brand, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11 }}>↗</span>
      </div>
    </div>);

}

function RxIcon({ p }) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ color: 'var(--ink-soft)' }}>
      <path d={p} stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>);

}

function FeatureTicker() {
  const items = [
  'Trend Tasarımları Bul',
  'Bu Tasarımın Benzerlerini Yap',
  'Tek Tıkla Mock-Up’la',
  'Tek Tıkla Ürün Başlığı, Ürün Hikayesi ve Ürün Etiketi Hazırla',
  'Dakikalar İçerisinde ETSY’de Yayında',
  'Trend Tasarımları Bul',
  'Bu Tasarımın Benzerlerini Yap',
  'Tek Tıkla Mock-Up’la'];

  return (
    <div style={{
      marginTop: 56, marginInline: -56, paddingBottom: 28,
      maskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
      WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
      overflow: 'hidden'
    }}>
      <div className="ticker-track" style={{ display: 'flex', gap: 12, width: 'max-content', animationDuration: '50s' }}>
        {[...items, ...items].map((t, i) =>
        <span key={i} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          border: `1px solid ${C.line2}`, borderRadius: 999,
          padding: '10px 18px', fontSize: 13, color: C.inkSoft, fontWeight: 500,
          background: '#fff', whiteSpace: 'nowrap'
        }}>
            <span style={{ color: C.brand, fontWeight: 700 }}>+</span>
            {t}
          </span>
        )}
      </div>
    </div>);

}

// HeroProduct artık altta ayrı section olarak çağrılmıyor — Hero kendi içinde tamamlandı.
function _UnusedHeroProduct() {
  return (
    <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto' }}>
      {/* Floating orbit cards — pulled outside main canvas, anchored to corners */}
      <div style={{ position: 'absolute', left: -64, top: -28, zIndex: 3, transform: 'rotate(-4deg)' }} className="lift">
        <FloatCard
          kind="alert"
          title="Trend Yakalandı"
          body="‘boho butterfly’ konsepti son 48 saatte +312% büyüdü"
          time="şimdi" />
        
      </div>
      <div style={{ position: 'absolute', right: -68, bottom: 60, zIndex: 3, transform: 'rotate(3deg)' }} className="lift">
        <FloatCard
          kind="seo"
          title="SEO Hazır"
          body="3 başlık · 13 etiket · ürün hikâyesi"
          time="2 sn önce" />
        
      </div>

      {/* App window */}
      <div style={{
        background: '#fff', borderRadius: 14, border: `1px solid ${C.line2}`,
        boxShadow: '0 30px 80px rgba(10,9,8,0.10), 0 4px 12px rgba(10,9,8,0.04), 0 0 0 1px rgba(10,9,8,0.02)',
        overflow: 'hidden'
      }}>
        {/* Window chrome */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 16px', borderBottom: `1px solid ${C.line}`, background: C.surface }}>
          <span style={{ width: 11, height: 11, borderRadius: 6, background: '#E8AFA1' }} />
          <span style={{ width: 11, height: 11, borderRadius: 6, background: '#E8D5A1' }} />
          <span style={{ width: 11, height: 11, borderRadius: 6, background: '#A1D4B5' }} />
          <span className="mono" style={{ marginLeft: 14, fontSize: 11, color: C.inkSoft }}>matesy.co<span style={{ color: C.brand }}>/trends</span></span>
          <span style={{ flex: 1 }} />
          <span className="mono" style={{ fontSize: 10, color: C.inkMute }}>⌘K</span>
        </div>
        {/* App body */}
        <div style={{ display: 'grid', gridTemplateColumns: '188px 1fr' }}>
          <SideNav />
          <TrendsPanel />
        </div>
      </div>
    </div>);

}

function FloatCard({ kind, title, body, time }) {
  const icon = kind === 'alert' ?
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 11l4-6 3 4 3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg> :
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>;
  return (
    <div style={{
      width: 248, background: '#fff', borderRadius: 12, border: `1px solid ${C.line2}`,
      padding: 14, boxShadow: '0 16px 40px rgba(10,9,8,0.10), 0 1px 2px rgba(10,9,8,0.04)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 8 }}>
        <div style={{ width: 26, height: 26, borderRadius: 7, background: C.brandSoft, color: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {icon}
        </div>
        <span style={{ fontSize: 13, fontWeight: 600, color: C.ink }}>{title}</span>
        <span style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 10, color: C.inkMute }}>{time}</span>
      </div>
      <div style={{ fontSize: 12.5, color: C.inkSoft, lineHeight: 1.45 }}>{body}</div>
    </div>);

}

function SideNav() {
  const items = [
  { i: 'trends', l: 'Trends', active: true, badge: 12 },
  { i: 'studio', l: 'Studio' },
  { i: 'mockups', l: 'Mockups' },
  { i: 'listings', l: 'Listings' },
  { i: 'orders', l: 'Orders', badge: 3 },
  { i: 'settings', l: 'Settings' }];

  const Ico = ({ k }) => {
    const path = {
      trends: 'M3 11l3-4 3 3 4-6',
      studio: 'M3 3h10v10H3z',
      mockups: 'M2 4h12v3H2zM2 9h12v3H2z',
      listings: 'M3 4h10M3 8h10M3 12h6',
      orders: 'M3 4l1 8h8l1-8',
      settings: 'M8 5v6M5 8h6'
    }[k];
    return (
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
        <path d={path} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>);

  };
  return (
    <aside style={{ borderRight: `1px solid ${C.line}`, padding: 12, background: '#fff' }}>
      <div className="mono" style={{ fontSize: 10, color: C.inkMute, padding: '0 10px', marginBottom: 8, letterSpacing: 0.6 }}>WORKSPACE</div>
      {items.map((it) =>
      <div key={it.l} style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '8px 10px', borderRadius: 7,
        background: it.active ? C.brandSoft : 'transparent',
        color: it.active ? C.brandDeep : C.ink2,
        fontSize: 13, fontWeight: it.active ? 600 : 500, marginBottom: 1, cursor: 'pointer'
      }}>
          <Ico k={it.i} />
          <span>{it.l}</span>
          {it.badge &&
        <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 600,
          background: it.active ? C.brand : C.surface2, color: it.active ? '#fff' : C.inkSoft,
          padding: '1px 6px', borderRadius: 999 }}>{it.badge}</span>
        }
        </div>
      )}
      <div style={{ marginTop: 18, padding: 12, borderRadius: 8, border: `1px dashed ${C.line2}`, background: C.surface }}>
        <div className="mono" style={{ fontSize: 10, color: C.inkMute, marginBottom: 6 }}>KREDİ</div>
        <div style={{ fontSize: 18, fontWeight: 700, color: C.ink, letterSpacing: -0.5 }}>4,820 <span style={{ fontSize: 10, color: C.inkMute, fontWeight: 500 }} className="mono">/ 30,000</span></div>
        <div style={{ height: 4, background: C.line, borderRadius: 2, marginTop: 8, overflow: 'hidden' }}>
          <div style={{ width: '16%', height: '100%', background: C.brand }} />
        </div>
      </div>
    </aside>);

}

function TrendsPanel() {
  const items = [
  { c: '#0F0E0C', d: 'WILD FLORA', t: '#FFEAD4', g: 312, sales: 412, cat: 'T-Shirt', store: 'WildPrintCo' },
  { c: '#E8DFCD', d: 'BLOOM', t: '#1a1a1a', g: 208, sales: 289, cat: 'Canvas', store: 'BloomLane' },
  { c: '#2C3E2D', d: 'ROAM', t: '#E8DFCD', g: 184, sales: 201, cat: 'Hoodie', store: 'RoamGoods' },
  { c: '#3A2520', d: 'DUSK', t: '#E8DFCD', g: 147, sales: 158, cat: 'Sweatshirt', store: 'DuskLabel' }];

  return (
    <div style={{ padding: 18 }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: C.ink, letterSpacing: -0.3 }}>Trend Keşfi</div>
          <div className="mono" style={{ fontSize: 11, color: C.inkMute, marginTop: 2 }}>1,284 listings · son 7 gün · ABD pazarı</div>
        </div>
        <span style={{ flex: 1 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 9px', background: '#FFF1EA', color: C.brandDeep, borderRadius: 6, fontSize: 11, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace" }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: C.brand, boxShadow: '0 0 0 3px rgba(255,90,31,0.2)' }} />
          LIVE
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {['7G', '30G', '90G'].map((l, i) =>
          <button key={l} style={{
            border: 'none', cursor: 'pointer', fontSize: 11, padding: '5px 10px', borderRadius: 5, fontWeight: 600,
            background: i === 0 ? C.ink : 'transparent', color: i === 0 ? '#fff' : C.inkSoft, fontFamily: "'JetBrains Mono', monospace"
          }}>{l}</button>
          )}
        </div>
      </div>
      {/* Search */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', border: `1px solid ${C.line}`, borderRadius: 8, background: C.surface, marginBottom: 14 }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke={C.inkSoft} strokeWidth="1.5" /><path d="M9 9l3 3" stroke={C.inkSoft} strokeWidth="1.5" strokeLinecap="round" /></svg>
        <span className="mono" style={{ fontSize: 12, color: C.inkSoft }}>etsy.com/shop/</span>
        <span className="mono" style={{ fontSize: 12, color: C.ink, fontWeight: 600 }}>WildPrintCo</span>
        <span style={{ width: 1, height: 12, background: C.brand, animation: 'blink 1s steps(1) infinite' }} />
        <span style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 10, color: C.inkMute }}>↵ analyze</span>
      </div>
      {/* Table */}
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 8, overflow: 'hidden' }}>
        <div className="mono" style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr 0.8fr 0.7fr 0.8fr 1fr', padding: '10px 14px', fontSize: 10, color: C.inkMute, background: C.surface, borderBottom: `1px solid ${C.line}`, fontWeight: 600, letterSpacing: 0.4 }}>
          <span>TASARIM</span><span>MAĞAZA</span><span>KATEGORİ</span><span>HAFTALIK</span><span>BÜYÜME</span><span></span>
        </div>
        {items.map((it, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1.7fr 1fr 0.8fr 0.7fr 0.8fr 1fr',
          padding: '10px 14px', borderBottom: i < items.length - 1 ? `1px solid ${C.line}` : 'none', alignItems: 'center', fontSize: 12.5
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: 5, overflow: 'hidden', flexShrink: 0 }}>
                <ShirtMock color={it.c} design={it.d.split(' ')[0]} tone={it.t} tee={it.c === '#E8DFCD' ? '#fff' : it.c} />
              </div>
              <div>
                <div style={{ fontWeight: 600, color: C.ink, fontSize: 13 }}>{it.d}</div>
                <div className="mono" style={{ fontSize: 10, color: C.inkMute }}>#listing_{1284 - i}</div>
              </div>
            </div>
            <span style={{ color: C.ink2 }}>@{it.store}</span>
            <span style={{ color: C.inkSoft }}>{it.cat}</span>
            <span className="mono" style={{ color: C.ink, fontWeight: 600 }}>{it.sales}</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Spark v={it.g} />
              <span className="mono" style={{ color: C.pos, fontWeight: 600, fontSize: 12 }}>+{it.g}%</span>
            </span>
            <button style={{ justifySelf: 'end', background: C.ink, color: '#fff', border: 'none', padding: '6px 10px', borderRadius: 5, fontSize: 11, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}>Benzeri Yap</button>
          </div>
        )}
      </div>
      <style>{`@keyframes blink{50%{opacity:0}}`}</style>
    </div>);

}

function Spark({ v = 100 }) {
  // Pseudo-random sparkline based on v
  const seed = v;
  const pts = Array.from({ length: 12 }, (_, i) => 20 + (Math.sin(seed + i * 0.6) + 1) * 0.5 * 30 + i * 1.4);
  const w = 50,h = 18;
  const max = Math.max(...pts),min = Math.min(...pts);
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${i / (pts.length - 1) * w},${h - (p - min) / (max - min || 1) * h}`).join(' ');
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <path d={path} stroke="var(--pos)" strokeWidth="1.4" fill="none" />
    </svg>);

}

// ───────── Logo Ticker ─────────
function LogoTicker() {
  const partners = ['Printful', 'Printify', 'Gelato', 'Gooten', 'CustomCat', 'SPOD', 'Teelaunch', 'Apliiq'];
  const list = [...partners, ...partners];
  return (
    <section style={{ padding: '40px 0', borderBottom: `1px solid ${C.line}`, background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', display: 'flex', alignItems: 'center', gap: 36 }}>
        <span className="mono" style={{ fontSize: 11, color: C.inkMute, textTransform: 'uppercase', letterSpacing: 1, whiteSpace: 'nowrap', flexShrink: 0 }}>
          POD üretim partnerleri ile<br />tek tıkla sipariş
        </span>
        <div className="fade-edges" style={{ flex: 1, overflow: 'hidden' }}>
          <div className="ticker-track" style={{ display: 'flex', gap: 64, width: 'max-content' }}>
            {list.map((p, i) =>
            <span key={i} style={{ fontSize: 22, fontWeight: 700, color: C.inkSoft, letterSpacing: -0.6, whiteSpace: 'nowrap' }}>{p}</span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Demo / Video ─────────
function Demo() {
  return (
    <section id="features" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: C.surface }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'end', marginBottom: 36 }}>
          <div>
            <Tag>Demo</Tag>
            <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1, margin: '14px 0 0' }}>
              Matesy tam olarak<br />ne yapıyor?
            </h2>
          </div>
          <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 560 }}>Aşağıdaki videoyu izleyerek Matesy'inin tam olarak hangi temel problemleri çözdüğünü görebilirsiniz.

          </p>
        </div>
        <div style={{
          aspectRatio: '16/9', borderRadius: 14, position: 'relative', overflow: 'hidden',
          border: `1px solid ${C.line2}`, boxShadow: '0 30px 80px rgba(10,9,8,0.10)',
          background: '#000'
        }}>
          <iframe
            src="https://www.youtube-nocookie.com/embed/MLkXC-lSzco?rel=0&modestbranding=1&playsinline=1"
            title="Matesy demo"
            referrerPolicy="strict-origin-when-cross-origin"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"
            allowFullScreen
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} />
          
        </div>

        {/* Feature grid — 5 core capabilities */}
        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20, gap: 24 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: C.inkMute, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>
                Temel Özellikler
              </div>
              <h3 className="display" style={{ fontSize: 28, color: C.ink, lineHeight: 1.1, margin: 0, letterSpacing: '-0.025em', fontWeight: 700 }}>
                Bir Etsy mağazasını yürütmek için<br />
                <span style={{ color: C.brand }}>ihtiyacın olan her şey</span>, tek panelde.
              </h3>
            </div>
            <div className="mono" style={{ fontSize: 11, color: C.inkMute, whiteSpace: 'nowrap', borderLeft: `1px solid ${C.line2}`, paddingLeft: 16 }}>
              5 modül<br />1 abonelik
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12
          }}>
            {[
            {
              t: 'Trend Takibi',
              b: 'Sports, pop culture, news, music — dünya genelinde POD potansiyeli olan her şey 24 saat içinde panelinde.',
              meta: ['Reddit · Google News · Twitter', 'Düzenli aralıklarla otomatik güncellenir'],
              cols: 2,
              icon:
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M2 12l3.5-4 3 2.5L13 4M9.5 4H13v3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>

            },
            {
              t: 'Rakip Mağaza Analizi',
              b: 'Bir Etsy mağaza URL\'i yapıştır — en çok satan tasarımlar, satış hızı, fiyat ve kategori dağılımı çıksın.',
              meta: ['Gerçek yorum verisi', 'Ürün & tarih haritası'],
              cols: 2,
              icon:
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.6" />
                    <path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                  </svg>

            },
            {
              t: 'Kolay Sipariş',
              b: 'Etsy mağazanı bağla, siparişler panelinde belirsin. Tek tıkla Amerika\'da üretilsin, kargolansın.',
              meta: ['Etsy entegrasyonu', 'US fulfillment & tracking'],
              cols: 2,
              icon:
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M2 4l6-2 6 2v6l-6 2-6-2z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
                    <path d="M2 4l6 2 6-2M8 6v8" stroke="currentColor" strokeWidth="1.6" />
                  </svg>

            },
            {
              t: 'Kolay Mockup',
              b: 'İster kütüphanemizdeki yüzlerce kullanıma hazır mock-up\'ımızı kullan, istersen de kendi Mock-up\'larını kolayca yükle; tek tıkla kullan.',
              meta: ['T-shirt · Hoodie · Canvas · Mug', 'Çoklu konumlandırma'],
              cols: 3,
              icon:
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <rect x="2" y="2.5" width="12" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.6" />
                    <path d="M2 10l3-3 3 2.5 2.5-2 3.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    <circle cx="10.5" cy="6" r="1" fill="currentColor" />
                  </svg>

            },
            {
              t: 'Kolay SEO',
              b: 'Etsy algoritmasına uygun başlık, 13 etiket ve ürün hikayesi — her listing için tek tıkla.',
              meta: ['Etsy LLM SEO algoritması', 'Başlık · Tag · Açıklama'],
              cols: 3,
              icon:
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M3 4h10M3 8h10M3 12h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                    <path d="M11.5 11l1.2 1.2L15 10" stroke={C.brand} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>

            }].
            map((f, i) =>
            <div key={i} className="lift" style={{
              gridColumn: `span ${f.cols}`,
              background: '#fff', border: `1px solid ${C.line}`, borderRadius: 14,
              padding: '20px 22px 18px', display: 'flex', flexDirection: 'column', gap: 14,
              position: 'relative', minHeight: 200,
              overflow: 'hidden'
            }}>
                {/* corner index */}
                <span className="mono" style={{
                position: 'absolute', top: 12, right: 14,
                fontSize: 9.5, color: C.inkMute, letterSpacing: 0.5
              }}>0{i + 1} / 05</span>

                {/* icon tile */}
                <div style={{
                width: 36, height: 36, borderRadius: 9, background: C.brandSoft, color: C.brandDeep,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
              }}>{f.icon}</div>

                <div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: C.ink, letterSpacing: -0.3, marginBottom: 6 }}>
                    {f.t}
                  </div>
                  <div style={{ fontSize: 13.5, color: C.inkSoft, lineHeight: 1.55 }}>
                    {f.b}
                  </div>
                </div>

                <div style={{ flex: 1 }} />

                <div style={{
                display: 'flex', flexDirection: 'column', gap: 4,
                paddingTop: 12, borderTop: `1px dashed ${C.line2}`
              }}>
                  {f.meta.map((m) =>
                <div key={m} className="mono" style={{
                  fontSize: 10.5, color: C.inkSoft, letterSpacing: 0.1,
                  display: 'inline-flex', alignItems: 'center', gap: 6
                }}>
                      <span style={{
                    width: 4, height: 4, borderRadius: '50%', background: C.brand, flexShrink: 0
                  }} />
                      {m}
                    </div>
                )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Process / 4 steps ─────────
function Process() {
  const data = [
  { ...STEPS[0], time: '~60sn', visual: 'storeurl' },
  { ...STEPS[1], time: '~30sn', visual: 'designs' },
  { ...STEPS[2], time: '~20sn', visual: 'mockups' },
  { ...STEPS[3], time: '~30sn', visual: 'seo' }];

  return (
    <section id="process" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginBottom: 56 }}>
          <div>
            <Tag>Adım Adım Süreç</Tag>
            <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1, margin: '14px 0 0', maxWidth: 720 }}>
              Etsy verisinden yayında listing’e<br />
              <span style={{ color: C.brand }}>4 adımda</span> ulaşın.
            </h2>
          </div>
          <div className="mono" style={{ fontSize: 12, color: C.inkSoft, textAlign: 'right' }}>
            Ortalama 1 listing tamamlanma süresi<br />
            <span style={{ fontSize: 28, color: C.ink, fontWeight: 700, letterSpacing: -1 }}>3–6 dk</span>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          {/* connecting line */}
          <div style={{ position: 'absolute', top: 38, left: '12.5%', right: '12.5%', height: 1, borderTop: `1px dashed ${C.line2}` }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, position: 'relative' }}>
            {data.map((s, i) =>
            <div key={i} style={{ position: 'relative' }}>
                <div style={{
                width: 76, height: 76, borderRadius: 16, background: '#fff',
                border: `1px solid ${C.line2}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 20px', boxShadow: '0 4px 14px rgba(10,9,8,0.04)'
              }}>
                  <span className="mono" style={{ fontSize: 10, color: C.inkMute }}>Adım</span>
                  <span style={{ fontSize: 24, color: C.brand, fontWeight: 700, letterSpacing: -1, lineHeight: 1 }}>{s.n}</span>
                </div>
                <div style={{ background: C.surface, border: `1px solid ${C.line}`, borderRadius: 12, padding: 16 }}>
                  <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 8, height: 130, marginBottom: 16, padding: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
                    <ProcessVisual kind={s.visual} />
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                    <div style={{ fontSize: 15, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>{s.title}</div>
                    <span className="mono" style={{ fontSize: 10, color: C.brand, background: C.brandSoft, padding: '2px 7px', borderRadius: 4, fontWeight: 600 }}>{s.time}</span>
                  </div>
                  <div style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.5 }}>{s.body}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function ProcessVisual({ kind }) {
  if (kind === 'storeurl') return (
    <div style={{ width: '100%' }}>
      <div className="mono" style={{ fontSize: 9, color: C.inkMute, marginBottom: 6 }}>STORE URL</div>
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 6, padding: '8px 10px', fontSize: 11, background: C.surface, fontFamily: "'JetBrains Mono', monospace" }}>
        etsy.com/shop/<span style={{ color: C.brand, fontWeight: 600 }}>WildPrintCo</span>
      </div>
      <div style={{ marginTop: 8, height: 4, background: C.brandSoft, borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ width: '70%', height: '100%', background: C.brand, animation: 'pulse 1.4s ease-in-out infinite' }} />
      </div>
      <div className="mono" style={{ fontSize: 9, color: C.inkMute, marginTop: 6, textAlign: 'right' }}>analyzing 1,284…</div>
      <style>{`@keyframes pulse{50%{opacity:.6}}`}</style>
    </div>);

  if (kind === 'designs') return (
    <div style={{ display: 'flex', gap: 5 }}>
      {[
      { c: '#0F0E0C', d: 'WILD', t: '#FFEAD4' },
      { c: '#E8DFCD', d: 'BLOOM', t: '#1a1a1a' },
      { c: '#2C3E2D', d: 'ROAM', t: '#E8DFCD' },
      { c: '#FF5A1F', d: 'NEW', t: '#fff' }].
      map((s, i) =>
      <div key={i} style={{ width: 38, height: 48, background: s.c, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
          <span style={{ fontSize: 8, color: s.t, fontFamily: 'Georgia, serif', fontWeight: 700, letterSpacing: 1 }}>{s.d}</span>
          {i === 3 && <span style={{ position: 'absolute', bottom: -1, right: -1, fontSize: 8, color: '#fff', background: 'rgba(0,0,0,0.4)', padding: '0 3px', borderRadius: 2 }} className="mono">NEW</span>}
        </div>
      )}
    </div>);

  if (kind === 'mockups') return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, width: '100%' }}>
      {['#F2EBDA', '#0F0E0C', '#E8DFCD', '#3A4F2C', '#FBF8F2', '#3A2520', '#FF5A1F', '#1a1a1a', '#E8DFCD'].map((c, k) =>
      <div key={k} style={{ aspectRatio: '1', background: c, borderRadius: 3, position: 'relative' }}>
          {k === 4 && <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, color: C.inkSoft, fontFamily: "'JetBrains Mono', monospace" }}>+10</span>}
        </div>
      )}
    </div>);

  if (kind === 'seo') return (
    <div style={{ width: '100%' }}>
      <div className="mono" style={{ fontSize: 9, color: C.inkMute, marginBottom: 6 }}>BAŞLIK · ETİKET</div>
      <div style={{ height: 5, background: C.line, borderRadius: 3, marginBottom: 4 }}><div style={{ width: '92%', height: '100%', background: C.brand, borderRadius: 3 }} /></div>
      <div style={{ height: 5, background: C.line, borderRadius: 3, marginBottom: 4 }}><div style={{ width: '78%', height: '100%', background: C.brand, borderRadius: 3 }} /></div>
      <div style={{ height: 5, background: C.line, borderRadius: 3, marginBottom: 8 }}><div style={{ width: '85%', height: '100%', background: C.brand, borderRadius: 3 }} /></div>
      <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
        {['boho', 'tee', 'floral', 'wild', 'retro', 'vintage'].map((t) =>
        <span key={t} className="mono" style={{ fontSize: 9, color: C.brandDeep, background: C.brandSoft, padding: '1px 5px', borderRadius: 3 }}>#{t}</span>
        )}
      </div>
    </div>);

  return null;
}

// ───────── Trends section ─────────
function Trends() {
  return (
    <section id="trends" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: C.surface }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* Heading row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, marginBottom: 44, alignItems: 'end' }}>
          <div>
            <Tag>Trendler</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              Dünyada neyin trend olduğunu<br /><span style={{ color: C.brand }}>herkesten önce gör.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Matesy Trendler, dünya genelinde POD potansiyeli olan her şeyi düzenli aralıklarla çekiyor —
              spor, popüler kültür, siyaset, müzik. Hangi tasarımın hızla yükseldiğini gör, üzerinden
              hızlıca tasarım üret ve mağazanda paylaş.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Sports', 'Entertainment', 'Politics', 'Müzik', 'Pop Culture', 'News'].map((t) =>
              <span key={t} style={{
                fontSize: 12, fontWeight: 500, color: C.ink2, background: '#fff',
                border: `1px solid ${C.line2}`, borderRadius: 999, padding: '5px 11px'
              }}>{t}</span>
              )}
            </div>
          </div>
        </div>

        {/* Product UI shot */}
        <TrendlerProductUI />

        {/* Three callouts under the UI */}
        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
          { k: '10K+', l: 'Düzenli aralıklarla çekilen trend kaydı' },
          { k: '24H', l: 'Bir trendin ortaya çıkmasıyla aksiyon arasındaki süre' },
          { k: 'Tek tıkla', l: 'Trendi gör, "Tasarımı Oluştur"a bas, mağazanda yayınla' }].
          map((s, i) =>
          <div key={i} style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 12, padding: '20px 22px' }}>
              <div style={{ fontSize: 26, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1, marginBottom: 8 }}>{s.k}</div>
              <div style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.5 }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───── Inner: Trendler product UI mockup ─────
function TrendlerProductUI() {
  const sidebar = [
  { k: 'Anasayfa', icon: 'home', active: false },
  { k: 'Trendler', icon: 'trend', active: true },
  { k: 'Referanslar', icon: 'ref', active: false }];

  const sidebar2 = [
  { k: 'Tasarımlar', icon: 'design' },
  { k: 'Listeler', icon: 'list' },
  { k: 'Ürünler', icon: 'box' }];

  const sidebar3 = [
  { k: 'Siparişlerim', icon: 'cart' },
  { k: 'Mockup Galerisi', icon: 'gallery' }];


  const trends = [
  { title: 'Funny Derby Day and Mint Juleps, Kentucky Horse Racing T-Shirt Small', cat: 'sports', src: 'Reddit r/...', score: 92, rec: 'POD 9', tags: [['Yüksek', 'pos'], ['Düşük', 'mute'], ['6 Gün', 'mute']], time: '24 sa' },
  { title: 'NBA playoffs: Thunder sweep Suns as Magic leave No 1 seed Pistons on brink of exit — The...', cat: 'sports', src: 'Google N... News, US', score: 82, rec: 'POD 8', tags: [['Yüksek', 'pos'], ['Orta', 'mid'], ['Bugün', 'mute']], time: '2 saat' },
  { title: 'Phillies fire Rob Thomson, name Dan MacIngly interim manager after 8-19 start to season — T...', cat: 'sports', src: 'Google N... News, US', score: 70, rec: 'POD 7', tags: [['Orta', 'mid'], ['Düşük', 'mute'], ['8 Gün', 'mute']], time: '5 saat' },
  { title: 'US will issue commemorative passports with Trump\'s picture for America\'s 250th birthday...', cat: 'political', src: 'Google N... News, US', score: 68, rec: 'POD 7', tags: [['Yüksek', 'pos'], ['Orta', 'mid'], ['Haftalar', 'mute']], time: '14 sa' },
  { title: 'Just Like Heaven 2026 Festival, Pasadena CA', cat: 'entert. music', src: 'Pitchfork, US', score: 78, rec: 'POD 7', tags: [['Yüksek', 'pos'], ['Orta', 'mid'], ['Haftalar', 'mute']], time: '34 sa' },
  { title: '\'The Devil Wears Prada 2\' First Reactions Say the Sequel Is "Charming," "Genuinely...', cat: 'entertainment', src: 'Google News E..., US', score: 80, rec: 'POD 7', tags: [['Yüksek', 'pos'], ['Yüksek', 'pos'], ['Haftalar', 'mute']], time: '20 sa' },
  { title: 'Jaylen Brown', cat: 'sports', src: 'Reddit, US', score: 70, rec: 'POD 7', tags: [['Yüksek', 'pos'], ['Orta', 'mid'], ['Günler', 'mute']], time: '24 sa' },
  { title: 'Derrick White', cat: 'sports', src: 'Twitter, US', score: 72, rec: 'POD 7', tags: [['Yüksek', 'pos'], ['Düşük', 'mute'], ['Günler', 'mute']], time: '20 sa' },
  { title: 'The Celtics', cat: 'sports', src: 'Reddit, US', score: 65, rec: 'POD 7', tags: [['Yüksek', 'pos'], ['Yüksek', 'pos'], ['Haftalar', 'mute']], time: '21 sa' }];


  const tagBg = { pos: '#E5F4DD', mid: '#FFF1E0', mute: '#F1ECE2' };
  const tagFg = { pos: '#3F8B23', mid: '#B07515', mute: '#7A6F5E' };
  const tagDot = { pos: '#5BAE2E', mid: '#E89A2D', mute: '#9B9080' };
  const catColors = {
    sports: { bg: '#E5F4DD', fg: '#3F8B23' },
    political: { bg: '#FFEFE3', fg: '#A04E15' },
    'entert. music': { bg: '#F8DFD0', fg: '#A04030' },
    entertainment: { bg: '#F8DFD0', fg: '#A04030' }
  };

  const Icon = ({ k }) => {
    const stroke = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
    const map = {
      home: <path d="M3 9l5-4 5 4v5H3z" {...stroke} />,
      trend: <><path d="M3 11l3-3 3 2 4-5" {...stroke} /><path d="M10 5h3v3" {...stroke} /></>,
      ref: <path d="M3 4h8M3 8h8M3 12h6" {...stroke} />,
      design: <><circle cx="8" cy="8" r="5" {...stroke} /><circle cx="8" cy="8" r="2" {...stroke} /></>,
      list: <path d="M3 4h10M3 8h10M3 12h10" {...stroke} />,
      box: <><path d="M3 5l5-2 5 2v6l-5 2-5-2z" {...stroke} /><path d="M3 5l5 2 5-2M8 7v6" {...stroke} /></>,
      cart: <><circle cx="6" cy="13" r="1.2" {...stroke} /><circle cx="11" cy="13" r="1.2" {...stroke} /><path d="M2 3h2l1.5 7h7l1-5H4" {...stroke} /></>,
      gallery: <><rect x="3" y="3" width="10" height="10" rx="1" {...stroke} /><path d="M3 10l3-2 3 2 4-3" {...stroke} /></>
    };
    return <svg width="14" height="14" viewBox="0 0 16 16">{map[k]}</svg>;
  };

  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 14,
      boxShadow: '0 30px 60px rgba(10,9,8,0.08), 0 4px 12px rgba(10,9,8,0.04)',
      overflow: 'hidden', display: 'grid', gridTemplateColumns: '180px 1fr'
    }}>
      {/* ─── Sidebar ─── */}
      <aside style={{ background: '#fff', borderRight: `1px solid ${C.line}`, padding: '18px 12px', minHeight: 580 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 6px 16px', marginBottom: 8, borderBottom: `1px solid ${C.line}` }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
              <path d="M3 20V5l5 8 4-6 4 6 5-8v15" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2, lineHeight: 1 }}>Matesy</div>
            <div className="mono" style={{ fontSize: 8.5, color: C.inkMute, letterSpacing: 0.5, marginTop: 2 }}>BETA</div>
          </div>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 13, color: C.inkMute }}>‹</span>
        </div>

        {[sidebar, sidebar2, sidebar3].map((group, gi) =>
        <div key={gi} style={{ paddingTop: gi ? 10 : 0, marginTop: gi ? 10 : 0, borderTop: gi ? `1px solid ${C.line}` : 'none' }}>
            {group.map((it) =>
          <div key={it.k} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 8, marginBottom: 2,
            background: it.active ? C.brandSoft : 'transparent',
            color: it.active ? C.brandDeep : C.ink2,
            fontSize: 12, fontWeight: it.active ? 600 : 500
          }}>
                <Icon k={it.icon} />
                <span>{it.k}</span>
                {it.active && <span style={{ flex: 1, textAlign: 'right', fontSize: 9, color: C.brandDeep, opacity: 0.6 }} className="mono">●</span>}
              </div>
          )}
          </div>
        )}
      </aside>

      {/* ─── Main panel ─── */}
      <main style={{ background: C.surface, padding: 18 }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 14 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 11l3-3 3 2 4-5M10 5h3v3" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: C.ink, letterSpacing: -0.3, lineHeight: 1.1 }}>Trendler</div>
            <div style={{ fontSize: 12, color: C.inkSoft, marginTop: 4, lineHeight: 1.4 }}>
              Dünya genelinde POD potansiyeli olan trend konuları keşfet
            </div>
            <div className="mono" style={{ fontSize: 10, color: C.inkMute, marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#5BAE2E' }} />
              53.1m+ kayıt · son güncelleme: bugün 09:30 GMT+3
            </div>
          </div>

          <div style={{ display: 'flex', gap: 4, background: '#fff', padding: 3, border: `1px solid ${C.line}`, borderRadius: 8 }}>
            {[['24 saat', true], ['3 gün', false], ['7 gün', false], ['Tüm zamanlar', false]].map(([l, a]) =>
            <button key={l} style={{
              fontSize: 11, padding: '5px 10px', borderRadius: 5, border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontWeight: 600,
              background: a ? C.ink : 'transparent', color: a ? '#fff' : C.inkSoft
            }}>{l}</button>
            )}
          </div>
        </div>

        {/* Filter row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 12px', background: '#fff', border: `1px solid ${C.line}`, borderRadius: 8
          }}>
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
              <circle cx="6" cy="6" r="4" stroke={C.inkMute} strokeWidth="1.5" />
              <path d="M9 9l3 3" stroke={C.inkMute} strokeWidth="1.5" strokeLinecap="round" />
            </svg>
            <span style={{ fontSize: 12, color: C.inkMute }}>Global trendlerde ara…</span>
          </div>
          {['Kategoriler', 'Tüm Pazarlar', 'Kaynaklar', 'Aktiyet', 'POD Plan'].map((f) =>
          <button key={f} style={{
            fontSize: 11, fontFamily: 'inherit', fontWeight: 500, padding: '8px 10px',
            background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 8, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5
          }}>{f} <span style={{ fontSize: 8, opacity: 0.5 }}>▾</span></button>
          )}
        </div>

        {/* Cards grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {trends.map((tr, i) => {
            const cat = catColors[tr.cat] || { bg: '#F1ECE2', fg: '#7A6F5E' };
            return (
              <div key={i} style={{
                background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 12,
                display: 'flex', flexDirection: 'column', gap: 9, minHeight: 180
              }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                  <div style={{ flex: 1, fontSize: 12, fontWeight: 600, color: C.ink, lineHeight: 1.35, letterSpacing: -0.1 }}>
                    {tr.title}
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: C.inkMute, whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                    <svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M2 7L7 2M7 2H3M7 2v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    {tr.score}
                  </span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                  <span style={{
                    fontSize: 9, fontWeight: 600, padding: '2px 6px', borderRadius: 3,
                    background: cat.bg, color: cat.fg, textTransform: 'uppercase', letterSpacing: 0.3
                  }}>{tr.cat}</span>
                  <span style={{ fontSize: 10, color: C.inkMute }}>{tr.src}</span>
                  <span style={{ flex: 1 }} />
                  <span className="mono" style={{ fontSize: 9.5, color: C.inkMute }}>{tr.rec}</span>
                </div>
                <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                  {tr.tags.map(([t, k], j) =>
                  <span key={j} style={{
                    fontSize: 9.5, fontWeight: 500, padding: '3px 7px', borderRadius: 3,
                    background: tagBg[k], color: tagFg[k],
                    display: 'inline-flex', alignItems: 'center', gap: 4
                  }}>
                      <span style={{ width: 4, height: 4, borderRadius: '50%', background: tagDot[k] }} />
                      {t}
                    </span>
                  )}
                </div>
                <div style={{ flex: 1 }} />
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <button style={{
                    flex: 1, background: C.brand, color: '#fff', border: 'none', borderRadius: 6,
                    padding: '7px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5
                  }}>
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                      <path d="M6 2v8M2 6h8" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" />
                    </svg>
                    Tasarımı Oluştur
                  </button>
                  <span className="mono" style={{ fontSize: 10, color: C.inkMute, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                    <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.2" /><path d="M6 3v3l2 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>
                    {tr.time}
                  </span>
                </div>
              </div>);

          })}
        </div>
      </main>
    </div>);

}

// ───────── AI Designs / Tasarım üretimi ─────────
function AIDesigns() {
  return (
    <section id="designs" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, marginBottom: 44, alignItems: 'end' }}>
          <div>
            <Tag>Tasarım Üretimi</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              Bir referans seç,<br /><span style={{ color: C.brand }}>10+ benzer tasarım</span> tek tıkla.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Seçtiğin referans için son nesil yapay zekâ modelleri 10'dan fazla benzer tasarım üretir.
              Beğendiklerini koleksiyonuna ekle, beğenmediklerini güncelle, hepsi tek panelde.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['10+ varyant / referans', 'Düzenle & güncelle', 'Toplu seç', 'Mockup\'a gönder'].map((t) =>
              <span key={t} style={{
                fontSize: 12, fontWeight: 500, color: C.ink2, background: C.surface,
                border: `1px solid ${C.line2}`, borderRadius: 999, padding: '5px 11px'
              }}>{t}</span>
              )}
            </div>
          </div>
        </div>

        <DesignsProductUI />

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
          { k: '10+ varyant', l: 'Tek referanstan, son nesil AI modelleriyle çoklu çıktı' },
          { k: 'Düzenlenebilir', l: 'Beğenmediklerini metin promptu ile yeniden üret' },
          { k: 'Tek tıkla seç', l: 'Beğendiklerini Mockup\'a gönder ya da listing oluştur' }].
          map((s, i) =>
          <div key={i} style={{ background: C.surface, border: `1px solid ${C.line}`, borderRadius: 12, padding: '20px 22px' }}>
              <div style={{ fontSize: 24, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 8 }}>{s.k}</div>
              <div style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.5 }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function DesignsProductUI() {
  const sidebar = [
  [
  { k: 'Anasayfa', icon: 'home', active: false },
  { k: 'Trendler', icon: 'trend', active: false },
  { k: 'Referanslar', icon: 'ref', active: false }],

  [
  { k: 'Tasarımlar', icon: 'design', active: true },
  { k: 'Seçimler', icon: 'pick' },
  { k: 'Ürünler', icon: 'box' }],

  [
  { k: 'Siparişlerim', icon: 'cart' },
  { k: 'Mockup Galerisi', icon: 'gallery' }]];



  const Icon = ({ k }) => {
    const stroke = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
    const map = {
      home: <path d="M3 9l5-4 5 4v5H3z" {...stroke} />,
      trend: <><path d="M3 11l3-3 3 2 4-5" {...stroke} /><path d="M10 5h3v3" {...stroke} /></>,
      ref: <path d="M3 4h8M3 8h8M3 12h6" {...stroke} />,
      design: <><circle cx="8" cy="8" r="5" {...stroke} /><circle cx="8" cy="8" r="2" {...stroke} /></>,
      pick: <path d="M4 8l3 3 6-7" {...stroke} />,
      box: <><path d="M3 5l5-2 5 2v6l-5 2-5-2z" {...stroke} /><path d="M3 5l5 2 5-2M8 7v6" {...stroke} /></>,
      cart: <><circle cx="6" cy="13" r="1.2" {...stroke} /><circle cx="11" cy="13" r="1.2" {...stroke} /><path d="M2 3h2l1.5 7h7l1-5H4" {...stroke} /></>,
      gallery: <><rect x="3" y="3" width="10" height="10" rx="1" {...stroke} /><path d="M3 10l3-2 3 2 4-3" {...stroke} /></>
    };
    return <svg width="14" height="14" viewBox="0 0 16 16">{map[k]}</svg>;
  };

  // ─── Visual: AI bass-fishing variants for poster row (bottom)
  const fishVariants = [
  { sky: '#2D6A8C', sun: '#E8893E', water: '#1E4D6B', accent: '#5BAE2E' }, // deep blue + green forest
  { sky: '#E89A2D', sun: '#F2C76A', water: '#2A1F1A', accent: '#A04030' }, // sunset orange
  { sky: '#3F8B23', sun: '#FFD876', water: '#1F2D1A', accent: '#5BAE2E' }, // emerald/forest
  { sky: '#E4554F', sun: '#F8DFD0', water: '#2A1F1A', accent: '#FF8754' } // sunrise red
  ];

  // ─── Visual: Vintage "Miracle Cure" poster variants (top row)
  const tropicalVariants = [
  { bg: '#F5E8C7', sun: '#E8A93E', sunDark: '#C97A20', bottle: '#D89248', accent: '#2A4A48', dark: '#3A4A32' },
  { bg: '#E8DDC4', sun: '#D85A3E', sunDark: '#A03520', bottle: '#5A8C7A', accent: '#2A3A48', dark: '#1F2A2C' },
  { bg: '#F0E4D0', sun: '#E89A2D', sunDark: '#B86A1A', bottle: '#7C5A8C', accent: '#3D2A48', dark: '#2A1A2C' }];


  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 14,
      boxShadow: '0 30px 60px rgba(10,9,8,0.08), 0 4px 12px rgba(10,9,8,0.04)',
      overflow: 'hidden', display: 'grid', gridTemplateColumns: '180px 1fr'
    }}>
      <aside style={{ background: '#fff', borderRight: `1px solid ${C.line}`, padding: '18px 12px', minHeight: 600 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 6px 16px', marginBottom: 8, borderBottom: `1px solid ${C.line}` }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
              <path d="M3 20V5l5 8 4-6 4 6 5-8v15" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2, lineHeight: 1 }}>Matesy</div>
            <div className="mono" style={{ fontSize: 8.5, color: C.inkMute, letterSpacing: 0.5, marginTop: 2 }}>BETA</div>
          </div>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 13, color: C.inkMute }}>‹</span>
        </div>

        {sidebar.map((group, gi) =>
        <div key={gi} style={{ paddingTop: gi ? 10 : 0, marginTop: gi ? 10 : 0, borderTop: gi ? `1px solid ${C.line}` : 'none' }}>
            {group.map((it) =>
          <div key={it.k} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 8, marginBottom: 2,
            background: it.active ? C.brandSoft : 'transparent',
            color: it.active ? C.brandDeep : C.ink2,
            fontSize: 12, fontWeight: it.active ? 600 : 500
          }}>
                <Icon k={it.icon} />
                <span>{it.k}</span>
                {it.active && <span style={{ flex: 1, textAlign: 'right', fontSize: 9, color: C.brandDeep, opacity: 0.6 }} className="mono">●</span>}
              </div>
          )}
          </div>
        )}
      </aside>

      <main style={{ background: C.surface, padding: 18 }}>
        {/* ─── Reference row 1 ─── */}
        <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 16, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ color: C.inkMute, fontSize: 11 }}>▾</span>
            <span style={{ fontSize: 13, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>Etsy Reference</span>
            <span className="mono" style={{ fontSize: 10.5, color: C.inkMute }}>https://etsy.com/listing/4310365.../tropical-fish-tee</span>
            <span style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 11, color: C.inkSoft }}>4 designs</span>
            <span style={{
              fontSize: 10.5, fontWeight: 600, padding: '4px 8px', borderRadius: 5,
              background: '#E5F4DD', color: '#3F8B23'
            }}>● Active</span>
            <button style={{
              fontSize: 10.5, fontFamily: 'inherit', fontWeight: 500, padding: '4px 8px',
              background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 5, cursor: 'pointer'
            }}>↗ View</button>
          </div>

          {/* Variant strip — Tropical fish theme */}
          <div style={{ display: 'grid', gridTemplateColumns: '0.9fr repeat(4, 1fr)', gap: 10 }}>
            {/* Reference card */}
            <DesignCard
              type="reference"
              tone="warm"
              imageVariant={{ sky: '#5C7C8C', sun: '#E8DFCD', water: '#3D5666', accent: '#A04030' }}
              persona
              dateLabel="Full Image" />
            
            {/* AI tropical variants */}
            {tropicalVariants.map((tv, i) =>
            <DesignCard key={i} type="variant" imageVariant={tv} variantStyle="tropical" dateLabel="AI Tasarım" date="9/12/25" />
            )}
          </div>

          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: 14 }}>
            <span style={{ width: 18, height: 3, borderRadius: 2, background: C.brand }} />
            <span style={{ width: 6, height: 3, borderRadius: 2, background: C.line2 }} />
            <span style={{ width: 6, height: 3, borderRadius: 2, background: C.line2 }} />
            <span className="mono" style={{ fontSize: 10, color: C.inkMute, marginLeft: 8 }}>10 designs</span>
          </div>
        </div>

        {/* ─── Reference row 2 ─── */}
        <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ color: C.inkMute, fontSize: 11 }}>▾</span>
            <span style={{ fontSize: 13, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>Etsy Reference</span>
            <span className="mono" style={{ fontSize: 10.5, color: C.inkMute }}>https://etsy.com/listing/4310365.../bass-poster-print</span>
            <span style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 11, color: C.inkSoft }}>4 designs</span>
            <span style={{
              fontSize: 10.5, fontWeight: 600, padding: '4px 8px', borderRadius: 5,
              background: '#E5F4DD', color: '#3F8B23'
            }}>● Active</span>
            <button style={{
              fontSize: 10.5, fontFamily: 'inherit', fontWeight: 500, padding: '4px 8px',
              background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 5, cursor: 'pointer'
            }}>↗ View</button>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: C.ink }}>Full Image</span>
            <span className="mono" style={{ fontSize: 10, color: C.inkMute, padding: '2px 6px', background: C.surface, borderRadius: 4 }}>4 designs</span>
            <span style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 10, color: C.inkMute }}>5/3/2026 · 3:55:30 PM</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '0.9fr repeat(3, 1fr)', gap: 10 }}>
            <DesignCard
              type="reference"
              imageVariant={{ sky: '#FAEBC8', sun: '#fff', water: '#A6A29A', accent: '#5C7C5A' }}
              persona={false}
              dateLabel="Full Image"
              poster />
            
            {fishVariants.slice(0, 3).map((v, i) =>
            <DesignCard key={i} type="variant" imageVariant={v} dateLabel="AI Tasarım" date="9/12/25" hasBadge={i === 0 && 'Iterasyon 42'} />
            )}
          </div>
        </div>
      </main>
    </div>);

}

// Stylized illustrated card showing a "fish print" design
function DesignCard({ type, imageVariant, persona, dateLabel, date, poster, hasBadge, variantStyle }) {
  const isRef = type === 'reference';
  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.line}`, borderRadius: 8,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      boxShadow: isRef ? '0 1px 3px rgba(10,9,8,0.04)' : 'none',
      position: 'relative'
    }}>
      <div style={{
        aspectRatio: persona ? '4/4.4' : poster ? '4/4.4' : '4/5',
        position: 'relative', overflow: 'hidden'
      }}>
        {persona ? <PersonaShot v={imageVariant} /> : poster ? <PosterShot v={imageVariant} /> : variantStyle === 'tropical' ? <TropicalFishArt v={imageVariant} /> : <FishPrintArt v={imageVariant} />}

        {hasBadge &&
        <span style={{
          position: 'absolute', top: 8, left: 8, zIndex: 2,
          fontSize: 9, fontWeight: 600, padding: '3px 7px', borderRadius: 4,
          background: '#FFE89A', color: '#7A5A0A'
        }}>{hasBadge}</span>
        }

        {!isRef &&
        <>
            <div style={{ position: 'absolute', top: 6, left: 6, display: 'flex', gap: 4 }}>
              <span style={{
              width: 20, height: 20, borderRadius: '50%', background: C.brand,
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                  <path d="M2 8.5L8 2.5l1.5 1.5L3.5 10z" stroke="#fff" strokeWidth="1.3" strokeLinejoin="round" />
                </svg>
              </span>
              <span style={{
              width: 20, height: 20, borderRadius: '50%', background: '#3F8B23',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                  <path d="M3 5l5-2 1 6-5 2z" stroke="#fff" strokeWidth="1.3" strokeLinejoin="round" />
                </svg>
              </span>
            </div>
            <span style={{
            position: 'absolute', top: 6, right: 6,
            width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.85)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, color: C.ink2, fontWeight: 600
          }}>›</span>
          </>
        }

        {isRef &&
        <span style={{
          position: 'absolute', bottom: 8, right: 8,
          fontSize: 9.5, fontWeight: 600, color: C.ink2,
          padding: '3px 8px', background: 'rgba(255,255,255,0.9)', borderRadius: 4,
          border: `1px solid ${C.line2}`
        }}>Reference</span>
        }
      </div>

      <div style={{ padding: '8px 10px', borderTop: `1px solid ${C.line}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: C.ink, letterSpacing: -0.1 }}>{dateLabel}</span>
          {date && <span className="mono" style={{ fontSize: 9.5, color: C.inkMute, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
            <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><rect x="2" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="1.2" /><path d="M2 5h8M5 2v2M9 2v2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>
            {date}
          </span>}
        </div>
        {isRef &&
        <span className="mono" style={{ fontSize: 9.5, color: C.inkMute, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: C.brand }} />
            Compare AI variations →
          </span>
        }
        {!isRef &&
        <button style={{
          background: '#E4554F', color: '#fff', border: 'none', borderRadius: 6,
          padding: '7px 8px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6
        }}>
            Seç
            <span style={{ display: 'inline-flex', width: 14, height: 14, borderRadius: '50%', background: 'rgba(255,255,255,0.25)', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M4 1.5l1 1.5h2l-1.5 1L6 6 4 5 2 6l.5-2L1 3h2z" fill="#fff" /></svg>
            </span>
          </button>
        }
      </div>
    </div>);

}

// ─── Inline SVG art ─────────────────────────────────────────────
function TropicalFishArt({ v }) {
  // Vintage Americana "Miracle Cure" poster — distressed paper, sun-burst, bottle, curved type
  const id = `tex-${v.bottle.replace('#', '')}`;
  return (
    <svg viewBox="0 0 100 120" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <pattern id={id} x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse">
          <rect width="3" height="3" fill={v.bg} />
          <circle cx="0.5" cy="0.5" r="0.25" fill={v.dark} opacity="0.18" />
          <circle cx="2" cy="2" r="0.18" fill={v.dark} opacity="0.12" />
        </pattern>
        <path id={`arc-${id}`} d="M14 26 Q50 6 86 26" fill="none" />
      </defs>

      {/* Aged paper background */}
      <rect width="100" height="120" fill={`url(#${id})`} />

      {/* Distressed border */}
      <rect x="4" y="4" width="92" height="112" fill="none" stroke={v.dark} strokeWidth="1" opacity="0.85" />
      <rect x="6" y="6" width="88" height="108" fill="none" stroke={v.dark} strokeWidth="0.4" opacity="0.5" />
      <g fill={v.dark} opacity="0.35">
        <rect x="3" y="3" width="6" height="1.2" /><rect x="91" y="3" width="6" height="1.2" />
        <rect x="3" y="115.8" width="6" height="1.2" /><rect x="91" y="115.8" width="6" height="1.2" />
        <rect x="3" y="3" width="1.2" height="6" /><rect x="95.8" y="3" width="1.2" height="6" />
        <rect x="3" y="110" width="1.2" height="7" /><rect x="95.8" y="110" width="1.2" height="7" />
        <rect x="38" y="3.6" width="3" height="0.8" />
        <rect x="60" y="4" width="4" height="0.6" />
      </g>

      {/* Curved top text */}
      <text fill={v.accent} fontSize="6.4" fontWeight="800" letterSpacing="0.3" fontFamily="Georgia, serif">
        <textPath href={`#arc-${id}`} startOffset="50%" textAnchor="middle">AMERICA'S MIRACLE CURE</textPath>
      </text>

      {/* Sun-burst rays */}
      <g transform="translate(50,62)">
        {Array.from({ length: 14 }).map((_, i) => {
          const a = -90 + i * (180 / 13);
          const rad = a * Math.PI / 180;
          const x = Math.cos(rad) * 44;
          const y = Math.sin(rad) * 44;
          return <path key={i} d={`M0 0 L${x - 3} ${y} L${x + 3} ${y} Z`} fill={i % 2 === 0 ? v.sun : v.sunDark} opacity="0.85" />;
        })}
        <circle r="22" fill={v.sun} opacity="0.95" />
      </g>

      {/* Horizontal bands */}
      <rect x="6" y="58" width="88" height="3" fill={v.sunDark} opacity="0.7" />
      <rect x="6" y="68" width="88" height="6" fill={v.sunDark} opacity="0.55" />
      <rect x="6" y="82" width="88" height="1" fill={v.accent} opacity="0.85" />

      {/* Bottle */}
      <g transform="translate(50,75)">
        <rect x="-4" y="-30" width="8" height="3" fill={v.accent} stroke={v.dark} strokeWidth="0.4" />
        <rect x="-3" y="-27" width="6" height="5" fill={v.bottle} stroke={v.dark} strokeWidth="0.5" />
        <path d="M-3 -22 Q-9 -20 -9 -14 L-9 8 Q-9 11 -6 11 L6 11 Q9 11 9 8 L9 -14 Q9 -20 3 -22 Z"
        fill={v.bottle} stroke={v.dark} strokeWidth="0.6" />
        <path d="M-7 -12 L-7 6" stroke="#fff" strokeWidth="0.8" opacity="0.4" strokeLinecap="round" />
        <rect x="-9" y="-8" width="18" height="12" fill={v.bg} stroke={v.dark} strokeWidth="0.4" />
        <g stroke={v.accent} strokeWidth="0.6" fill="none" strokeLinecap="round">
          <line x1="0" y1="-7" x2="0" y2="3" />
          <path d="M0 -6 Q-2 -4 0 -2 Q2 0 0 2" />
          <path d="M0 -6 Q2 -4 0 -2 Q-2 0 0 2" />
          <path d="M0 -6 Q-3 -7 -4 -5 M0 -6 Q3 -7 4 -5" />
        </g>
        <circle cx="0" cy="-7" r="0.5" fill={v.accent} />
        <rect x="-8.5" y="4" width="17" height="6.5" fill={v.sun} opacity="0.55" />
      </g>

      {/* Bottom rule + footer */}
      <line x1="10" y1="96" x2="90" y2="96" stroke={v.accent} strokeWidth="0.4" />
      <text x="50" y="104" textAnchor="middle" fill={v.accent} fontSize="4.2" fontWeight="800" fontFamily="Georgia, serif" letterSpacing="0.2">
        GOVERNMENT RECOMMENDED
      </text>
      <text x="50" y="110" textAnchor="middle" fill={v.accent} fontSize="3.8" fontWeight="600" fontFamily="Georgia, serif" letterSpacing="0.15" opacity="0.85">
        RESULTS NOT BASED ON EVIDENCE
      </text>

      {/* Distress speckles */}
      <g fill={v.dark} opacity="0.18">
        <circle cx="22" cy="42" r="0.6" /><circle cx="78" cy="50" r="0.5" />
        <circle cx="15" cy="90" r="0.7" /><circle cx="85" cy="95" r="0.5" />
        <circle cx="68" cy="22" r="0.4" /><circle cx="30" cy="100" r="0.4" />
      </g>
    </svg>);

}

function FishPrintArt({ v }) {
  return (
    <svg viewBox="0 0 100 120" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <linearGradient id={`sky-${v.sky}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={v.sun} />
          <stop offset="0.5" stopColor={v.sky} />
          <stop offset="1" stopColor={v.water} />
        </linearGradient>
      </defs>
      {/* Sky */}
      <rect width="100" height="60" fill={`url(#sky-${v.sky})`} />
      {/* Sun */}
      <circle cx="35" cy="28" r="11" fill={v.sun} opacity="0.85" />
      {/* Mountains/trees silhouette */}
      <path d="M0 50L12 35L24 48L38 32L52 45L66 30L78 44L100 35V60H0Z" fill={v.water} opacity="0.6" />
      <path d="M0 56L20 42L42 54L66 40L86 52L100 45V60H0Z" fill="#0F2A1A" opacity="0.7" />
      {/* Water */}
      <rect y="60" width="100" height="60" fill={v.water} />
      <path d="M0 60Q25 55 50 60T100 60V72H0Z" fill={v.water === '#1E4D6B' ? '#2D6A8C' : '#3D2620'} opacity="0.4" />
      {/* Big fish jumping */}
      <g transform="translate(50,72)">
        <path d="M-22 -2 Q-10 -10 0 -8 Q14 -6 22 4 Q14 8 0 8 Q-10 8 -22 6 Q-26 2 -22 -2Z" fill={v.accent} stroke="#0F0E0C" strokeWidth="0.6" />
        <path d="M-22 -2 L-30 -10 L-26 0 L-30 8 Z" fill={v.accent} stroke="#0F0E0C" strokeWidth="0.6" />
        <circle cx="16" cy="-2" r="1.4" fill="#0F0E0C" />
        <path d="M0 -8 Q4 -3 0 2 M-4 -7 Q-2 -3 -4 1" stroke="#0F0E0C" strokeWidth="0.4" fill="none" opacity="0.6" />
      </g>
      {/* Splashes */}
      <circle cx="78" cy="68" r="2" fill="#fff" opacity="0.7" />
      <circle cx="74" cy="72" r="1" fill="#fff" opacity="0.6" />
      <circle cx="84" cy="74" r="1.4" fill="#fff" opacity="0.6" />
      {/* Reflection ripples */}
      <path d="M20 90Q35 88 50 90T80 90" stroke={v.sun} strokeWidth="0.6" fill="none" opacity="0.5" />
      <path d="M10 100Q35 98 60 100T95 100" stroke={v.sun} strokeWidth="0.4" fill="none" opacity="0.4" />
    </svg>);

}

function PersonaShot({ v }) {
  return (
    <svg viewBox="0 0 100 120" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="100" height="120" fill={v.sky} />
      {/* Hair */}
      <path d="M30 18Q34 8 50 6Q66 8 70 18Q74 30 72 42L70 50Q66 38 60 36Q50 34 40 36Q34 38 30 50L28 42Q26 30 30 18Z" fill="#3A2520" />
      {/* Face */}
      <ellipse cx="50" cy="34" rx="14" ry="16" fill="#E8C29D" />
      <circle cx="46" cy="34" r="0.8" fill="#1a1a1a" />
      <circle cx="54" cy="34" r="0.8" fill="#1a1a1a" />
      <path d="M47 40Q50 42 53 40" stroke="#1a1a1a" strokeWidth="0.6" fill="none" strokeLinecap="round" />
      {/* Neck */}
      <rect x="46" y="48" width="8" height="6" fill="#E8C29D" />
      {/* T-shirt body */}
      <path d="M22 60L36 54L46 56L54 56L64 54L78 60L74 110L26 110Z" fill="#3A4252" />
      {/* T-shirt design panel — fish art */}
      <g transform="translate(36,68) scale(0.32)">
        <rect width="80" height="100" fill={v.sky} rx="2" />
        <circle cx="28" cy="22" r="9" fill={v.sun} />
        <rect y="50" width="80" height="50" fill={v.water} />
        <g transform="translate(40,60)">
          <path d="M-16 -1 Q-8 -7 0 -6 Q10 -4 16 3 Q10 6 0 6 Q-8 6 -16 4 Q-19 1 -16 -1Z" fill={v.accent} />
          <path d="M-16 -1 L-22 -7 L-19 0 L-22 6 Z" fill={v.accent} />
        </g>
      </g>
      {/* Arm */}
      <ellipse cx="20" cy="80" rx="6" ry="14" fill="#E8C29D" transform="rotate(-10 20 80)" />
    </svg>);

}

function PosterShot({ v }) {
  return (
    <svg viewBox="0 0 100 120" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="100" height="120" fill="#F4EFE5" />
      {/* Wall shadow */}
      <rect x="0" y="0" width="100" height="120" fill="#E8DFCD" opacity="0.4" />
      {/* Plant */}
      <g transform="translate(15,80)">
        <rect x="-6" y="20" width="12" height="14" fill="#7A6F5E" rx="1" />
        <path d="M0 20Q-12 0 -8 -16M0 20Q-2 0 4 -18M0 20Q10 4 14 -10" stroke={v.accent || '#3F8B23'} strokeWidth="2" fill="none" strokeLinecap="round" />
      </g>
      {/* Frame */}
      <rect x="38" y="20" width="48" height="60" fill="#fff" stroke="#0F0E0C" strokeWidth="1.4" />
      <rect x="42" y="24" width="40" height="52" fill={v.water || '#5C7C5A'} />
      {/* Frame artwork — landscape */}
      <rect x="42" y="24" width="40" height="30" fill={v.sky} />
      <circle cx="56" cy="36" r="4" fill={v.sun} />
      <path d="M42 50L52 40L62 48L74 38L82 46V54H42Z" fill="#0F2A1A" />
      <rect x="42" y="54" width="40" height="22" fill={v.water || '#3F5550'} />
      <path d="M42 60Q52 58 62 60T82 60" stroke={v.sun} strokeWidth="0.4" fill="none" />
    </svg>);

}

// ───────── Selections / Mockup grouping ─────────
function Selections() {
  return (
    <section id="selections" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: C.surface }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, marginBottom: 44, alignItems: 'end' }}>
          <div>
            <Tag>Seçimler & Mockup</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              Bir tıkla,<br /><span style={{ color: C.brand }}>onlarca mockup</span> hazır.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              AI ile ürettiğin tasarımları ya da kendi yüklediklerini Seçimler'de topla. Arka planı kaldır,
              renkleri düzenle, prompt ile yeniden iterasyona sok. Bir veya birden fazla tasarımı seç,
              tek tıkla onlarca mockup üret.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Arka plan kaldır', 'Renk düzenle', 'Prompt ile iterasyon', 'Toplu mockup'].map((t) =>
              <span key={t} style={{
                fontSize: 12, fontWeight: 500, color: C.ink2, background: '#fff',
                border: `1px solid ${C.line2}`, borderRadius: 999, padding: '5px 11px'
              }}>{t}</span>
              )}
            </div>
          </div>
        </div>

        <SelectionsProductUI />

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
          { k: '500+', l: 'Önceden hazırlanmış mockup şablonu — T-shirt, hoodie, canvas, mug' },
          { k: 'Toplu Üretim', l: 'Birden fazla tasarımı grupla, tek tıkla onlarca mockup üret' },
          { k: 'AI Edit', l: 'Arka plan kaldır, renk değiştir, prompt ile yeniden üret' }].
          map((s, i) =>
          <div key={i} style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 12, padding: '20px 22px' }}>
              <div style={{ fontSize: 24, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 8 }}>{s.k}</div>
              <div style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.5 }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function SelectionsProductUI() {
  const sidebar = [
  [
  { k: 'Anasayfa', icon: 'home' },
  { k: 'Trendler', icon: 'trend' },
  { k: 'Referanslar', icon: 'ref' }],

  [
  { k: 'Tasarımlar', icon: 'design' },
  { k: 'Seçimler', icon: 'pick', active: true },
  { k: 'Ürünler', icon: 'box' }],

  [
  { k: 'Siparişlerim', icon: 'cart' },
  { k: 'Mockup Galerisi', icon: 'gallery' }]];



  const Icon = ({ k }) => {
    const stroke = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
    const map = {
      home: <path d="M3 9l5-4 5 4v5H3z" {...stroke} />,
      trend: <><path d="M3 11l3-3 3 2 4-5" {...stroke} /><path d="M10 5h3v3" {...stroke} /></>,
      ref: <path d="M3 4h8M3 8h8M3 12h6" {...stroke} />,
      design: <><circle cx="8" cy="8" r="5" {...stroke} /><circle cx="8" cy="8" r="2" {...stroke} /></>,
      pick: <path d="M4 8l3 3 6-7" {...stroke} />,
      box: <><path d="M3 5l5-2 5 2v6l-5 2-5-2z" {...stroke} /><path d="M3 5l5 2 5-2M8 7v6" {...stroke} /></>,
      cart: <><circle cx="6" cy="13" r="1.2" {...stroke} /><circle cx="11" cy="13" r="1.2" {...stroke} /><path d="M2 3h2l1.5 7h7l1-5H4" {...stroke} /></>,
      gallery: <><rect x="3" y="3" width="10" height="10" rx="1" {...stroke} /><path d="M3 10l3-2 3 2 4-3" {...stroke} /></>
    };
    return <svg width="14" height="14" viewBox="0 0 16 16">{map[k]}</svg>;
  };

  // Selection cards — mix of references, uploads, AI iterations
  const cards = [
  { kind: 'AI Tasarım', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'Donald Trump Mugshot...', cta: 'Yeniden Oluştur', art: 'fearless' },
  { kind: 'Yüklediğim', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'My Upload', cta: 'Mockup', art: 'miracle', selected: true },
  { kind: 'Yüklediğim', tag: 'Orijinal', tagBg: '#3A4A48', tagFg: '#fff', name: 'My Upload', cta: 'Mockup', art: 'positive' },
  { kind: 'Yüklediğim', tag: 'Orijinal', tagBg: '#3A4A48', tagFg: '#fff', name: 'My Upload', cta: 'Mockup', art: 'positive2' },
  { kind: 'Renk Düzenleme', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'Etsy Reference', cta: 'Yeniden Oluştur', art: 'murph' },

  { kind: 'Pro AI', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'shirtcompany...', cta: 'Mockup', art: 'fishtee' },
  { kind: '', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'Etsy Reference', cta: 'Mockup', art: 'flag' },
  { kind: '', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'Etsy Reference', cta: 'Yeniden Oluştur', art: 'murph2' },
  { kind: 'Orijinal', tag: 'Canvas Wall Art', tagBg: '#E8DDC4', tagFg: '#3A4A32', name: 'Etsy Reference', cta: 'Mockup', art: 'lake' },
  { kind: 'Orijinal', tag: 'Canvas Wall Art', tagBg: '#E8DDC4', tagFg: '#3A4A32', name: 'Etsy Reference', cta: 'Mockup', art: 'bass' }];


  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 14,
      boxShadow: '0 30px 60px rgba(10,9,8,0.08), 0 4px 12px rgba(10,9,8,0.04)',
      overflow: 'hidden', display: 'grid', gridTemplateColumns: '180px 1fr',
      position: 'relative'
    }}>
      <aside style={{ background: '#fff', borderRight: `1px solid ${C.line}`, padding: '18px 12px', minHeight: 720 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 6px 16px', marginBottom: 8, borderBottom: `1px solid ${C.line}` }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
              <path d="M3 20V5l5 8 4-6 4 6 5-8v15" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2, lineHeight: 1 }}>Matesy</div>
            <div className="mono" style={{ fontSize: 8.5, color: C.inkMute, letterSpacing: 0.5, marginTop: 2 }}>BETA</div>
          </div>
        </div>
        {sidebar.map((group, gi) =>
        <div key={gi} style={{ paddingTop: gi ? 10 : 0, marginTop: gi ? 10 : 0, borderTop: gi ? `1px solid ${C.line}` : 'none' }}>
            {group.map((it) =>
          <div key={it.k} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 8, marginBottom: 2,
            background: it.active ? C.brandSoft : 'transparent',
            color: it.active ? C.brandDeep : C.ink2,
            fontSize: 12, fontWeight: it.active ? 600 : 500
          }}>
                <Icon k={it.icon} />
                <span>{it.k}</span>
                {it.active && <span style={{ flex: 1, textAlign: 'right', fontSize: 9, color: C.brandDeep }} className="mono">›</span>}
              </div>
          )}
          </div>
        )}
      </aside>

      <main style={{ background: C.surface, padding: 18 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
          {cards.map((c, i) => <SelectionCard key={i} {...c} />)}
        </div>
      </main>

      {/* Mockup picker modal overlay */}
      <MockupModal />
    </div>);

}

function SelectionCard({ kind, tag, tagBg, tagFg, name, cta, art, selected }) {
  const isOrange = cta === 'Mockup';
  return (
    <div style={{
      background: '#fff', border: `1px solid ${selected ? C.brand : C.line}`, borderRadius: 8,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      boxShadow: selected ? `0 0 0 2px ${C.brandSoft}` : 'none',
      position: 'relative'
    }}>
      <div style={{ aspectRatio: '4/4.4', position: 'relative', overflow: 'hidden', background: '#F7F4ED' }}>
        {/* Checker BG */}
        <CheckerBg />
        {/* Top-left checkbox */}
        <div style={{
          position: 'absolute', top: 6, left: 6, width: 14, height: 14, borderRadius: 3,
          background: '#fff', border: `1px solid ${C.line2}`, zIndex: 2
        }} />
        {/* Top-right tags */}
        <div style={{ position: 'absolute', top: 6, right: 6, display: 'flex', gap: 4, zIndex: 2 }}>
          {kind &&
          <span style={{
            fontSize: 8.5, fontWeight: 600, padding: '2px 6px', borderRadius: 3,
            background: kind === 'AI Tasarım' || kind === 'Pro AI' ? C.brand : '#2A4A88',
            color: '#fff'
          }}>{kind}</span>
          }
          <span style={{
            fontSize: 8.5, fontWeight: 600, padding: '2px 6px', borderRadius: 3,
            background: tagBg, color: tagFg
          }}>{tag}</span>
        </div>
        {/* Artwork */}
        <SelArt kind={art} />
        {/* External link icon */}
        <span style={{
          position: 'absolute', bottom: 6, right: 6, width: 18, height: 18, borderRadius: 3,
          background: 'rgba(255,255,255,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 10, color: C.ink2, fontWeight: 600
        }}>↗</span>
      </div>
      <div style={{ padding: '8px 10px 10px', borderTop: `1px solid ${C.line}`, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: C.ink, letterSpacing: -0.1 }}>{name}</span>
          <span className="mono" style={{ fontSize: 9, color: C.inkMute, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
            <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><rect x="2" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="1.2" /><path d="M2 5h8M5 2v2M9 2v2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>
            May 1
          </span>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button style={{
            flex: 1,
            background: isOrange ? C.brand : '#0F0E0C',
            color: '#fff', border: 'none', borderRadius: 5,
            padding: '6px 8px', fontSize: 10, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4
          }}>
            {isOrange ? '◇' : '⟳'} {cta}
          </button>
          <button style={{
            background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 5,
            padding: '6px 8px', fontSize: 10, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit'
          }}>⋮</button>
        </div>
      </div>
    </div>);

}

function CheckerBg() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 40 44" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
      <defs>
        <pattern id="checker" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
          <rect width="4" height="4" fill="#fff" />
          <rect x="4" y="4" width="4" height="4" fill="#fff" />
          <rect x="4" y="0" width="4" height="4" fill="#E8E5DD" />
          <rect x="0" y="4" width="4" height="4" fill="#E8E5DD" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#checker)" />
    </svg>);

}

// Inline art for each card
function SelArt({ kind }) {
  const wrap = { position: 'absolute', inset: '14% 12%' };
  if (kind === 'fearless') return (
    <div style={wrap}>
      <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%' }}>
        <circle cx="50" cy="50" r="46" fill="none" stroke="#1F2C3D" strokeWidth="2.5" />
        <circle cx="50" cy="50" r="42" fill="#0F1A2A" />
        <text x="50" y="22" textAnchor="middle" fill="#E8DFC4" fontSize="8" fontWeight="800" fontFamily="Georgia">FEARLESS BY FASHION</text>
        <ellipse cx="50" cy="56" rx="20" ry="22" fill="#8B7355" />
        <rect x="36" y="44" width="28" height="8" fill="#3A2520" />
        <rect x="34" y="50" width="32" height="20" fill="#5A4030" />
        <text x="50" y="86" textAnchor="middle" fill="#E8DFC4" fontSize="6" fontWeight="700">EST. 2024 · BUTLER, PA · 45</text>
      </svg>
    </div>);

  if (kind === 'miracle') return (
    <div style={wrap}>
      <TropicalFishArt v={{ bg: '#F5E8C7', sun: '#E8A93E', sunDark: '#C97A20', bottle: '#D89248', accent: '#2A4A48', dark: '#3A4A32' }} />
    </div>);

  if (kind === 'positive' || kind === 'positive2') return (
    <div style={wrap}>
      <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%' }}>
        <rect x="10" y="10" width="80" height="80" rx="40" fill={kind === 'positive' ? '#5C8C7A' : '#3A6B8C'} />
        <circle cx="50" cy="42" r="14" fill="#FFD8B5" />
        <path d="M30 70 Q50 55 70 70 L70 90 L30 90 Z" fill="#E89A4D" />
        <text x="50" y="92" textAnchor="middle" fill="#fff" fontSize="6" fontWeight="800">STAY POSITIVE</text>
      </svg>
    </div>);

  if (kind === 'murph' || kind === 'murph2') return (
    <div style={{ position: 'absolute', inset: '20% 8%' }}>
      <svg viewBox="0 0 100 60" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
        <text x="50" y="22" textAnchor="middle" fill="#1F4A2A" fontSize="18" fontWeight="900" fontFamily="Georgia, serif" letterSpacing="0.5">MURPH</text>
        <text x="50" y="36" textAnchor="middle" fill="#A03520" fontSize="4" fontWeight="700">1 MILE RUN · 100 PULL UPS · 200 PUSH UPS · 300 SQUATS</text>
        <g fill="#1F4A2A">
          {[15, 30, 45, 60, 75].map((x) => <path key={x} d={`M${x} 44 L${x + 2} 49 L${x + 7} 49 L${x + 3} 52 L${x + 5} 57 L${x} 54 L${x - 5} 57 L${x - 3} 52 L${x - 7} 49 L${x - 2} 49 Z`} />)}
        </g>
      </svg>
    </div>);

  if (kind === 'fishtee') return (
    <div style={wrap}>
      <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%' }}>
        <rect width="100" height="100" fill="#F0E8D4" />
        {[20, 50, 80].map((y, i) =>
        <g key={i} transform={`translate(20,${y})`}>
            <ellipse cx="0" cy="0" rx="28" ry="6" fill={i === 0 ? '#E45550' : i === 1 ? '#7A8C3F' : '#6B5B95'} stroke="#0F0E0C" strokeWidth="0.4" />
            <path d="M-28 0 L-36 -5 L-34 0 L-36 5 Z" fill={i === 0 ? '#E45550' : i === 1 ? '#7A8C3F' : '#6B5B95'} stroke="#0F0E0C" strokeWidth="0.4" />
            <circle cx="20" cy="-1" r="1.4" fill="#fff" />
            <circle cx="20.4" cy="-1" r="0.7" fill="#0F0E0C" />
          </g>
        )}
      </svg>
    </div>);

  if (kind === 'flag') return (
    <div style={wrap}>
      <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%' }}>
        <rect width="100" height="100" fill="#1F2A3D" />
        <rect width="40" height="40" fill="#1F2A3D" />
        {[6, 12, 18, 24, 30, 36].map((y) => <rect key={y} x="40" y={y} width="60" height="4" fill="#A03520" />)}
        {[48, 54, 60, 66, 72, 78].map((y) => <rect key={y} x="0" y={y} width="100" height="4" fill="#A03520" />)}
        <text x="60" y="92" textAnchor="middle" fill="#E8DFC4" fontSize="8" fontWeight="900" fontFamily="Georgia">THE BRAVE SHALL LIVE ON</text>
      </svg>
    </div>);

  if (kind === 'lake' || kind === 'bass') return (
    <div style={wrap}>
      <FishPrintArt v={kind === 'lake' ?
      { sky: '#7A8C9D', sun: '#E8DFCD', water: '#5A6B7C', accent: '#3A4A48' } :
      { sky: '#E89A2D', sun: '#FFD876', water: '#1F2D1A', accent: '#A04030' }
      } />
    </div>);

  return null;
}

// Mockup picker modal — overlays the lower-right of the card grid
function MockupModal() {
  const tees = [
  { name: 'Black', base: '#0F0E0C', label: '24 Renk', tags: ['Bella Canvas', 'Front & Back'] },
  { name: 'front_large.png', base: '#D85A3E', label: '3 Renk', tags: ['Comfort Colors'] },
  { name: 'Bay', base: '#9BA8A0', label: '24 Renk', tags: ['Comfort Colors', '+2'] },
  { name: 'Bay', base: '#A8B5A8', label: '32 Renk', tags: ['Multiple Print'] },
  { name: 'Bay', base: '#A8B5A8', label: '24 Renk', tags: ['Bella Canvas'], badge: '24 Renk' },
  { name: 'Blossom', base: '#F5C4D0', label: '44 Renk', tags: ['1 Mil Hizalı'] },
  { name: 'Gray', base: '#7A7A7A', label: '42 Renk', tags: [] },
  { name: 'Autumn', base: '#C97540', label: '24 Renk', tags: [] }];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: 'rgba(15,14,12,0.45)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      pointerEvents: 'none', zIndex: 5
    }}>
      <div style={{
        width: 'min(95%, 880px)', maxWidth: 880, height: 'min(85%, calc(100% - 24px))', maxHeight: 600,
        background: '#fff', borderRadius: 12, border: `1px solid ${C.line2}`,
        boxShadow: '0 30px 80px rgba(10,9,8,0.35)',
        display: 'grid', gridTemplateColumns: '170px 1fr', overflow: 'hidden'
      }}>
        {/* Modal header bar */}
        <div style={{ gridColumn: '1 / -1', padding: '12px 16px', borderBottom: `1px solid ${C.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: C.ink }}>Mockup Seç</div>
          <span style={{ fontSize: 16, color: C.inkMute, cursor: 'pointer' }}>×</span>
        </div>

        {/* Modal sidebar — design preview */}
        <div style={{ padding: 12, borderRight: `1px solid ${C.line}`, background: C.surface, fontSize: 11 }}>
          <div className="mono" style={{ fontSize: 9.5, color: C.inkMute, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 6 }}>Tasarımınız</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: C.ink, marginBottom: 10 }}>shirtcompanyusa</div>
          <div style={{ aspectRatio: '1/1', background: '#fff', border: `1px solid ${C.line}`, borderRadius: 6, position: 'relative', overflow: 'hidden', marginBottom: 10 }}>
            <CheckerBg />
            <div style={{ position: 'absolute', inset: '12%' }}>
              <SelArt kind="fishtee" />
            </div>
          </div>
          <div className="mono" style={{ fontSize: 9.5, color: C.inkMute, marginBottom: 6 }}>Referans</div>
          <div style={{ aspectRatio: '4/5', background: '#fff', border: `1px solid ${C.line}`, borderRadius: 6, position: 'relative', overflow: 'hidden' }}>
            <PersonaShot v={{ sky: '#5C7C8C', sun: '#E8DFCD', water: '#3D5666', accent: '#A04030' }} />
          </div>
        </div>

        {/* Modal main */}
        <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
          {/* Search/filter row */}
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, background: '#fff', fontSize: 11, color: C.inkMute }}>
              <span>⌕</span> Mockup ara...
            </div>
            <div style={{ padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, fontSize: 11, color: C.ink2, background: '#fff' }}>Tişört ▾</div>
            <div style={{ padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, fontSize: 11, color: C.ink2, background: '#fff' }}>Etiketler</div>
            <div style={{ padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, fontSize: 11, color: C.ink2, background: '#fff' }}>Varyantlar</div>
          </div>
          <div style={{ background: '#E5F0FF', border: `1px solid #C7DDF5`, borderRadius: 6, padding: '6px 10px', fontSize: 10.5, color: '#2A4A88' }}>
            ⓘ Tişört mockuplar gösteriliyor (10 mevcut)
          </div>

          {/* Mockup grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, overflow: 'hidden' }}>
            {tees.map((t, i) =>
            <div key={i} style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 6, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                <div style={{ aspectRatio: '1/1', background: '#F7F4ED', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <TeeShot color={t.base} />
                  <span style={{ position: 'absolute', top: 4, right: 4, fontSize: 8, fontWeight: 600, padding: '2px 5px', borderRadius: 3, background: '#0F0E0C', color: '#fff' }}>● {t.label}</span>
                </div>
                <div style={{ padding: '6px 8px 8px', display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ fontSize: 10, fontWeight: 600, color: C.ink }}>{t.name}</div>
                  <div style={{ display: 'flex', gap: 2 }}>
                    {[t.base, '#fff', '#1F2A3D', '#A03520', '#7A8C3F'].map((c, j) =>
                  <span key={j} style={{ width: 8, height: 8, borderRadius: '50%', background: c, border: `0.5px solid ${C.line2}` }} />
                  )}
                    <span style={{ fontSize: 8.5, color: C.inkMute, marginLeft: 2 }}>+30</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 8.5 }}>
                    <span style={{ width: 7, height: 7, borderRadius: 1.5, border: `1px solid ${C.line2}` }} />
                    <span style={{ color: C.ink2 }}>Tüm {t.label} renkleri seç</span>
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
                    {t.tags.map((tag) =>
                  <span key={tag} style={{ fontSize: 8, fontWeight: 600, padding: '1.5px 4px', borderRadius: 2, background: tag.includes('Bella') ? '#2A4A88' : tag.includes('Comfort') ? '#7A2A88' : tag.includes('Multiple') ? '#5C2A2A' : '#3A6B23', color: '#fff' }}>{tag}</span>
                  )}
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Footer */}
          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${C.line}`, paddingTop: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 10.5, color: C.ink2 }}>
              <span><strong style={{ color: C.ink }}>10</strong> mockup</span>
              <span style={{ color: C.brand, fontWeight: 600 }}>Tümünü Seç</span>
              <span style={{ color: C.inkMute }}>Temizle</span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button style={{ padding: '6px 14px', fontSize: 11, background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 5, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 500 }}>İptal</button>
              <button style={{ padding: '6px 14px', fontSize: 11, background: C.brand, color: '#fff', border: 'none', borderRadius: 5, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 600 }}>0 Oluştur</button>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function TeeShot({ color }) {
  return (
    <svg viewBox="0 0 80 80" style={{ width: '70%', height: '70%' }}>
      <path d="M14 22 L26 14 L32 18 L40 18 L48 18 L54 14 L66 22 L62 30 L56 28 L56 70 L24 70 L24 28 L18 30 Z" fill={color} stroke="#0F0E0C" strokeWidth="0.5" />
      <ellipse cx="40" cy="20" rx="6" ry="2.5" fill="none" stroke="#0F0E0C" strokeWidth="0.5" />
    </svg>);

}

// ───────── Products / SEO listing ─────────
function Products() {
  return (
    <section id="products" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, marginBottom: 44, alignItems: 'end' }}>
          <div>
            <Tag>Ürünler & SEO</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              SEO çalışmaları,<br /><span style={{ color: C.brand }}>tek tık.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Her ürünün başlığı, açıklaması ve etiketleri — Etsy algoritmasına göre optimize edilmiş halde,
              otomatik üretiliyor. Kalitesini artır, yeniden oluştur, mockuplara ekle, arşivle. Listing açma süren
              <strong style={{ color: C.ink }}> 30 dakikadan 30 saniyeye</strong> düşüyor.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Başlık', 'Açıklama', 'Etiketler', 'Mockup zinciri', 'Arşiv'].map((t) =>
              <span key={t} style={{
                fontSize: 12, fontWeight: 500, color: C.ink2, background: C.surface,
                border: `1px solid ${C.line2}`, borderRadius: 999, padding: '5px 11px'
              }}>{t}</span>
              )}
            </div>
          </div>
        </div>

        <ProductsProductUI />

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
          { k: '30sn', l: 'Başlık + açıklama + 13 etiket. Etsy SEO standardına göre.' },
          { k: 'Tek Tık', l: 'Tüm mockuplar otomatik bağlanır. Listing yayına hazır.' },
          { k: 'Algoritma Uyumlu', l: 'Etsy SEO algoritması uyumlu içerik.' }].
          map((s, i) =>
          <div key={i} style={{ background: C.surface, border: `1px solid ${C.line}`, borderRadius: 12, padding: '20px 22px' }}>
              <div style={{ fontSize: 24, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 8 }}>{s.k}</div>
              <div style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.5 }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ProductsProductUI() {
  const sidebar = [
  [
  { k: 'Anasayfa', icon: 'home' },
  { k: 'Trendler', icon: 'trend' },
  { k: 'Referanslar', icon: 'ref' }],

  [
  { k: 'Tasarımlar', icon: 'design' },
  { k: 'Seçimler', icon: 'pick' },
  { k: 'Ürünler', icon: 'box', active: true }],

  [
  { k: 'Siparişlerim', icon: 'cart' },
  { k: 'Mockup Galerisi', icon: 'gallery' }]];



  const Icon = ({ k }) => {
    const stroke = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
    const map = {
      home: <path d="M3 9l5-4 5 4v5H3z" {...stroke} />,
      trend: <><path d="M3 11l3-3 3 2 4-5" {...stroke} /><path d="M10 5h3v3" {...stroke} /></>,
      ref: <path d="M3 4h8M3 8h8M3 12h6" {...stroke} />,
      design: <><circle cx="8" cy="8" r="5" {...stroke} /><circle cx="8" cy="8" r="2" {...stroke} /></>,
      pick: <path d="M4 8l3 3 6-7" {...stroke} />,
      box: <><path d="M3 5l5-2 5 2v6l-5 2-5-2z" {...stroke} /><path d="M3 5l5 2 5-2M8 7v6" {...stroke} /></>,
      cart: <><circle cx="6" cy="13" r="1.2" {...stroke} /><circle cx="11" cy="13" r="1.2" {...stroke} /><path d="M2 3h2l1.5 7h7l1-5H4" {...stroke} /></>,
      gallery: <><rect x="3" y="3" width="10" height="10" rx="1" {...stroke} /><path d="M3 10l3-2 3 2 4-3" {...stroke} /></>
    };
    return <svg width="14" height="14" viewBox="0 0 16 16">{map[k]}</svg>;
  };

  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 14,
      boxShadow: '0 30px 60px rgba(10,9,8,0.08), 0 4px 12px rgba(10,9,8,0.04)',
      overflow: 'hidden', display: 'grid', gridTemplateColumns: '180px 1fr',
      minHeight: 760
    }}>
      {/* Sidebar */}
      <aside style={{ background: '#fff', borderRight: `1px solid ${C.line}`, padding: '18px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 6px 16px', marginBottom: 8, borderBottom: `1px solid ${C.line}` }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
              <path d="M3 20V5l5 8 4-6 4 6 5-8v15" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2, lineHeight: 1 }}>Matesy</div>
            <div className="mono" style={{ fontSize: 8.5, color: C.inkMute, letterSpacing: 0.5, marginTop: 2 }}>BETA</div>
          </div>
        </div>
        {sidebar.map((group, gi) =>
        <div key={gi} style={{ paddingTop: gi ? 10 : 0, marginTop: gi ? 10 : 0, borderTop: gi ? `1px solid ${C.line}` : 'none' }}>
            {group.map((it) =>
          <div key={it.k} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 8, marginBottom: 2,
            background: it.active ? C.brandSoft : 'transparent',
            color: it.active ? C.brandDeep : C.ink2,
            fontSize: 12, fontWeight: it.active ? 600 : 500
          }}>
                <Icon k={it.icon} />
                <span>{it.k}</span>
                {it.active && <span style={{ flex: 1, textAlign: 'right', fontSize: 9, color: C.brandDeep }} className="mono">›</span>}
              </div>
          )}
          </div>
        )}
      </aside>

      {/* Main: product detail */}
      <main style={{ background: C.surface, padding: 0, display: 'flex', flexDirection: 'column' }}>
        {/* Top product bar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14, padding: '14px 22px',
          background: '#fff', borderBottom: `3px solid ${C.brand}`
        }}>
          <span style={{ width: 14, height: 14, borderRadius: 3, border: `1px solid ${C.line2}`, background: '#fff' }} />
          <div style={{ width: 38, height: 38, borderRadius: 6, background: '#F0E4D0', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
            <BasketballMini />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>Amazon Reference</div>
            <div style={{ fontSize: 11, color: C.inkSoft }}>Amazon Reference · MATESY-0009</div>
          </div>
          <span style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 9px', borderRadius: 4, background: '#0F0E0C', color: '#fff' }}>T-Shirt</span>
          <span style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 9px', borderRadius: 4, background: '#FFE89A', color: '#7A5A0A' }}>10</span>
          <span style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 9px', borderRadius: 4, background: '#E5F0FF', color: '#2A4A88' }}>İçerik</span>
          <button style={{ width: 30, height: 30, borderRadius: 6, border: `1px solid #F5C4C4`, background: '#FFE5E5', color: '#A03520', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>🗑</button>
          <span style={{ color: C.inkMute, fontSize: 14, cursor: 'pointer' }}>▾</span>
        </div>

        {/* Body */}
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' }}>
          {/* Title row + actions */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3, background: C.brandSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.brand, fontSize: 9 }}>◷</span>
              <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: C.ink, letterSpacing: 0.5 }}>MATESY-0009</span>
              <span style={{ color: C.inkMute, fontSize: 11 }}>✎</span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <ProdBtn icon="↑">Kalitesini Artır</ProdBtn>
              <ProdBtn icon="⟳">Yeniden Oluştur</ProdBtn>
              <ProdBtn icon="✂">Tekrar Mockupla</ProdBtn>
              <ProdBtn icon="↓">İndir</ProdBtn>
              <ProdBtn primary green icon="📦">Arşivle</ProdBtn>
            </div>
          </div>

          {/* Tasarım strip */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: C.inkSoft, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 8 }}>Tasarım</div>
            <div style={{ display: 'flex', gap: 10 }}>
              <DesignChip label="Yeni Tasarım" art="basket" />
              <DesignChip label="Arkaplan Kaldırıldı" labelColor={C.brand} art="basket" stripped />
            </div>
          </div>

          {/* Generated content panel */}
          <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 8, padding: '12px 14px' }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: C.inkSoft, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
              <span>≡</span> Oluşturulan İçerik
            </div>

            <SEOField icon="T" label="Başlık">
              2001 Retro Basketball Tee, Vintage Sports Graphic, Nostalgia Streetwear
            </SEOField>
            <SEOField icon="¶" label="Açıklama" small>
              Step back to early 2000s basketball culture with this retro-inspired graphic tee that captures the
              golden era of the game. The vintage logo features bold, classic lettering and a basketball design
              that'll make any sports fan feel like they're reliving iconic moments from that unforgettable
              season. Perfect for collectors, casual fans, or anyone who loves that nostalgic early-2000s
              aesthetic — this soft, comfortable shirt pairs perfectly with your everyday wardrobe.
            </SEOField>
            <SEOField icon="#" label="Etiketler" tags>
              retro basketball tee, vintage sports shirt, 2001 graphic tee, nostalgia clothing, 90s style shirt,
              streetwear tshirt, basketball fan gift, retro sports apparel, vintage logo tee, game day shirt,
              classic basketball, throwback athletic, unisex sports tee
            </SEOField>

            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8, fontSize: 11, color: C.inkMute }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span style={{ color: C.brand }}>🇺🇸</span> 5 ver. bayrağı sallanıldı
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span>◷</span> 1 May 2026 16:35
              </span>
              <span style={{ color: C.brand, marginLeft: 'auto' }}>▾</span>
            </div>
          </div>

          {/* Mockup gallery */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: C.inkSoft, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
              <span>◇</span> Mockuplar (10)
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 10 }}>
              {[
              { c: '#A8B5A8' }, { c: '#9F8B6E' }, { c: '#D88AA8' }, { c: '#9F4A4F' }, { c: '#3A4A6B' }, { c: '#8C4A6B' }].
              map((m, i) =>
              <div key={i} style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 6, padding: 6, position: 'relative' }}>
                  <span style={{ position: 'absolute', top: 5, left: 5, width: 10, height: 10, borderRadius: 2, background: '#fff', border: `1px solid ${C.line2}` }} />
                  <TeeMockup color={m.c} />
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>);

}

function ProdBtn({ icon, children, primary, green }) {
  const bg = green ? '#1F8B3D' : primary ? C.brand : '#fff';
  const fg = green || primary ? '#fff' : C.ink2;
  const border = green || primary ? 'transparent' : C.line;
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '6px 11px', fontSize: 11, fontWeight: 600,
      background: bg, color: fg, border: `1px solid ${border}`,
      borderRadius: 5, cursor: 'pointer', fontFamily: 'inherit'
    }}>
      <span>{icon}</span>{children}
    </button>);

}

function DesignChip({ label, labelColor, stripped, art }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
      <div style={{ width: 56, height: 56, borderRadius: 6, background: stripped ? 'transparent' : '#F0E4D0', border: `1px solid ${C.line2}`, position: 'relative', overflow: 'hidden' }}>
        {stripped && <CheckerBg />}
        <div style={{ position: 'absolute', inset: 6 }}><BasketballMini /></div>
      </div>
      <span style={{ fontSize: 9.5, fontWeight: 600, color: labelColor || C.ink2 }}>{label}</span>
    </div>);

}

function SEOField({ icon, label, children, small, tags }) {
  return (
    <div style={{ background: C.surface, border: `1px solid ${C.line}`, borderRadius: 6, padding: '9px 12px', marginBottom: 6, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, fontWeight: 600, color: C.inkSoft, marginBottom: 4 }}>
        <span style={{ fontFamily: 'Georgia, serif' }}>{icon}</span> {label}
      </div>
      <div style={{
        fontSize: small ? 10.5 : 11.5, lineHeight: 1.5,
        color: tags ? C.brand : C.ink, fontWeight: tags ? 500 : 400
      }}>
        {children}
      </div>
      <span style={{ position: 'absolute', top: 8, right: 8, fontSize: 11, color: C.inkMute, cursor: 'pointer' }}>⎘</span>
    </div>);

}

function BasketballMini() {
  return (
    <svg viewBox="0 0 40 40" style={{ width: '100%', height: '100%' }}>
      <circle cx="20" cy="20" r="16" fill="#E89A4D" stroke="#3A2520" strokeWidth="0.8" />
      <path d="M4 20 L36 20 M20 4 L20 36" stroke="#3A2520" strokeWidth="0.8" fill="none" />
      <path d="M8 8 Q20 20 32 32 M32 8 Q20 20 8 32" stroke="#3A2520" strokeWidth="0.6" fill="none" />
      <text x="20" y="14" textAnchor="middle" fill="#3A2520" fontSize="4.5" fontWeight="900" fontFamily="Georgia">RETRO</text>
      <text x="20" y="25" textAnchor="middle" fill="#A03520" fontSize="9" fontWeight="900" fontFamily="Georgia">3</text>
      <text x="20" y="32" textAnchor="middle" fill="#3A2520" fontSize="3.5" fontWeight="700">2001</text>
    </svg>);

}

function TeeMockup({ color }) {
  return (
    <div style={{ aspectRatio: '1/1', background: '#F0EBE0', borderRadius: 4, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      <svg viewBox="0 0 100 100" style={{ width: '92%', height: '92%' }}>
        <path d="M14 22 L26 14 L32 18 L40 18 L48 18 L54 14 L66 22 L62 32 L56 30 L56 86 L24 86 L24 30 L18 32 Z" fill={color} stroke="#0F0E0C" strokeWidth="0.3" />
        <ellipse cx="40" cy="20" rx="6" ry="2.5" fill="none" stroke="#0F0E0C" strokeWidth="0.3" />
        <g transform="translate(40 50)">
          <circle r="6" fill="#E89A4D" stroke="#3A2520" strokeWidth="0.3" />
          <path d="M-6 0 L6 0 M0 -6 L0 6" stroke="#3A2520" strokeWidth="0.3" />
          <text x="0" y="2" textAnchor="middle" fill="#3A2520" fontSize="4" fontWeight="900" fontFamily="Georgia">3</text>
        </g>
      </svg>
    </div>);

}

// ───────── Orders / Sipariş otomasyonu ─────────
function Orders() {
  return (
    <section id="orders" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, marginBottom: 44, alignItems: 'end' }}>
          <div>
            <Tag>Sipariş Otomasyonu</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              Etsy mağazanı bağla,<br /><span style={{ color: C.brand }}>siparişler otomatik düşsün.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Etsy mağazanı tek tıkla bağla — gelen siparişler panele otomatik düşer.
              Birkaç tıkla üretime gönder; Amerika merkezli baskı facilitylerinde basılır
              ve doğrudan müşterine kargolanır. Tek satır kod yok, tek paket etiketi yok.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Etsy bağlantısı', 'Otomatik senkron', 'US fulfillment', 'Tracking & label', 'Tek panel'].map((t) =>
              <span key={t} style={{
                fontSize: 12, fontWeight: 500, color: C.ink2, background: C.surface,
                border: `1px solid ${C.line2}`, borderRadius: 999, padding: '5px 11px'
              }}>{t}</span>
              )}
            </div>
          </div>
        </div>

        <OrdersProductUI />

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
          { k: '0 manuel adım', l: 'Sipariş geldiği an panelinde — kopyala-yapıştır yok' },
          { k: 'US merkezli', l: 'Amerika içi baskı tesislerinde üretim ve hızlı kargo' },
          { k: 'Tek tık üretim', l: 'Listeden sipariş seç, üretime gönder, tracking otomatik gelsin' }].
          map((s, i) =>
          <div key={i} style={{ background: C.surface, border: `1px solid ${C.line}`, borderRadius: 12, padding: '20px 22px' }}>
              <div style={{ fontSize: 24, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 8 }}>{s.k}</div>
              <div style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.5 }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function OrdersProductUI() {
  const orders = [
  { id: 'MTSY-20260428-711A05', date: '27 Nis 2026', store: 'StoreName', cust: 'L. S***e', qty: '1 ürün', total: '$76.21', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-770005', date: '27 Nis 2026', store: 'StoreName', cust: 'R. D****n', qty: '1 ürün', total: '$23.38', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-37C5BB', date: '27 Nis 2026', store: 'StoreName', cust: 'L. S***e', qty: '1 ürün', total: '$76.21', status: 'Üretimde', sFg: '#A04E15', sBg: '#FFEFE3' },
  { id: 'MTSY-20260427-8D7A7B', date: '27 Nis 2026', store: 'StoreName', cust: 'D. F***s', qty: '1 ürün', total: '$22.05', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-474EE5', date: '25 Nis 2026', store: 'StoreName', cust: 'A****', qty: '1 ürün', total: '$24.75', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-A33D18', date: '22 Nis 2026', store: 'StoreName', cust: 'K. C**t', qty: '1 ürün', total: '$25.27', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-58F752', date: '21 Nis 2026', store: 'StoreName', cust: 'N. E*****s', qty: '1 ürün', total: '$23.04', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-D0A0D1', date: '16 Nis 2026', store: 'StoreName', cust: 'J. F*****k', qty: '1 ürün', total: '$23.59', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-2A8FE8', date: '12 Nis 2026', store: 'StoreName', cust: 'M. B****n', qty: '1 ürün', total: '$23.37', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-3036DF', date: '9 Nis 2026', store: 'StoreName', cust: 'J. C***n', qty: '1 ürün', total: '$23.37', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-8AB647', date: '9 Nis 2026', store: 'StoreName', cust: 'C. S*****n', qty: '1 ürün', total: '$24.31', status: 'Kargoda', sFg: '#3F8B23', sBg: '#E5F4DD' }];


  const sidebar = [
  [
  { k: 'Anasayfa', icon: 'home', active: false },
  { k: 'Trendler', icon: 'trend', active: false },
  { k: 'Referanslar', icon: 'ref', active: false }],

  [
  { k: 'Tasarımlar', icon: 'design' },
  { k: 'Seçimler', icon: 'pick' },
  { k: 'Ürünler', icon: 'box' }],

  [
  { k: 'Siparişlerim', icon: 'cart', active: true },
  { k: 'Mockup Galerisi', icon: 'gallery' }]];



  const Icon = ({ k }) => {
    const stroke = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
    const map = {
      home: <path d="M3 9l5-4 5 4v5H3z" {...stroke} />,
      trend: <><path d="M3 11l3-3 3 2 4-5" {...stroke} /><path d="M10 5h3v3" {...stroke} /></>,
      ref: <path d="M3 4h8M3 8h8M3 12h6" {...stroke} />,
      design: <><circle cx="8" cy="8" r="5" {...stroke} /><circle cx="8" cy="8" r="2" {...stroke} /></>,
      pick: <path d="M4 8l3 3 6-7" {...stroke} />,
      box: <><path d="M3 5l5-2 5 2v6l-5 2-5-2z" {...stroke} /><path d="M3 5l5 2 5-2M8 7v6" {...stroke} /></>,
      cart: <><circle cx="6" cy="13" r="1.2" {...stroke} /><circle cx="11" cy="13" r="1.2" {...stroke} /><path d="M2 3h2l1.5 7h7l1-5H4" {...stroke} /></>,
      gallery: <><rect x="3" y="3" width="10" height="10" rx="1" {...stroke} /><path d="M3 10l3-2 3 2 4-3" {...stroke} /></>
    };
    return <svg width="14" height="14" viewBox="0 0 16 16">{map[k]}</svg>;
  };

  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 14,
      boxShadow: '0 30px 60px rgba(10,9,8,0.08), 0 4px 12px rgba(10,9,8,0.04)',
      overflow: 'hidden', display: 'grid', gridTemplateColumns: '180px 1fr'
    }}>
      {/* Sidebar */}
      <aside style={{ background: '#fff', borderRight: `1px solid ${C.line}`, padding: '18px 12px', minHeight: 600 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 6px 16px', marginBottom: 8, borderBottom: `1px solid ${C.line}` }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
              <path d="M3 20V5l5 8 4-6 4 6 5-8v15" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2, lineHeight: 1 }}>Matesy</div>
            <div className="mono" style={{ fontSize: 8.5, color: C.inkMute, letterSpacing: 0.5, marginTop: 2 }}>BETA</div>
          </div>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 13, color: C.inkMute }}>‹</span>
        </div>

        {sidebar.map((group, gi) =>
        <div key={gi} style={{ paddingTop: gi ? 10 : 0, marginTop: gi ? 10 : 0, borderTop: gi ? `1px solid ${C.line}` : 'none' }}>
            {group.map((it) =>
          <div key={it.k} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 8, marginBottom: 2,
            background: it.active ? C.brandSoft : 'transparent',
            color: it.active ? C.brandDeep : C.ink2,
            fontSize: 12, fontWeight: it.active ? 600 : 500
          }}>
                <Icon k={it.icon} />
                <span>{it.k}</span>
                {it.active && <span style={{ flex: 1, textAlign: 'right', fontSize: 9, color: C.brandDeep, opacity: 0.6 }} className="mono">●</span>}
              </div>
          )}
          </div>
        )}
      </aside>

      {/* Main */}
      <main style={{ background: C.surface, padding: 18 }}>
        {/* Top bar — credit, balance */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, justifyContent: 'flex-end' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 9px',
            background: '#FFF7E0', color: '#7A5A0A', border: '1px solid #F4E1A8', borderRadius: 6,
            fontSize: 11, fontWeight: 600
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#D6A82D' }} /> 1.176
          </span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 9px',
            background: C.brandSoft, color: C.brandDeep, border: `1px solid ${C.line2}`, borderRadius: 6,
            fontSize: 11, fontWeight: 600
          }}>
            <span className="mono">$44.40</span>
          </span>
        </div>

        {/* Heading */}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: C.ink, letterSpacing: -0.3, lineHeight: 1.1 }}>Siparişler</div>
            <div style={{ fontSize: 11, color: C.inkSoft, marginTop: 4 }}>11 Sipariş</div>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 11px',
            background: '#fff', border: `1px solid ${C.line}`, borderRadius: 7, color: C.ink2,
            fontSize: 11, fontWeight: 600
          }}>
            <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6L5 9 10 3" stroke={C.pos} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
            $44.40
          </div>
          <button style={{
            background: C.brand, color: '#fff', border: 'none', borderRadius: 7,
            padding: '7px 12px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            display: 'inline-flex', alignItems: 'center', gap: 5
          }}>
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" /></svg>
            Yeni Sipariş
          </button>
        </div>

        {/* Filter row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 12px', background: '#fff', border: `1px solid ${C.line}`, borderRadius: 8
          }}>
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
              <circle cx="6" cy="6" r="4" stroke={C.inkMute} strokeWidth="1.5" />
              <path d="M9 9l3 3" stroke={C.inkMute} strokeWidth="1.5" strokeLinecap="round" />
            </svg>
            <span style={{ fontSize: 12, color: C.inkMute }}>Sipariş ara…</span>
          </div>
          <button style={{
            fontSize: 11, fontFamily: 'inherit', fontWeight: 500, padding: '8px 12px',
            background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 8, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5
          }}>Tüm Durumlar <span style={{ fontSize: 8, opacity: 0.5 }}>▾</span></button>
          <span style={{ flex: 0.2 }} />
          <button style={{
            fontSize: 11, fontFamily: 'inherit', fontWeight: 600, padding: '8px 12px',
            background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 8, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5
          }}>
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.4" /><path d="M6 4v2.5l1.5.8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
            Aktif
          </button>
          <button style={{
            fontSize: 11, fontFamily: 'inherit', fontWeight: 600, padding: '8px 12px',
            background: '#fff', color: C.ink2, border: `1px solid ${C.line}`, borderRadius: 8, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5
          }}>
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
            Arşiv
          </button>
        </div>

        {/* Table */}
        <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, overflow: 'hidden' }}>
          <div className="mono" style={{
            display: 'grid',
            gridTemplateColumns: '2fr 0.9fr 1.2fr 1.4fr 0.9fr 0.8fr 1fr 36px',
            padding: '10px 14px', fontSize: 9.5, color: C.inkMute,
            background: C.surface, borderBottom: `1px solid ${C.line}`,
            fontWeight: 600, letterSpacing: 0.4
          }}>
            <span>SİPARİŞ</span>
            <span>TARİH</span>
            <span>MAĞAZA</span>
            <span>MÜŞTERİ</span>
            <span>ÜRÜNLER</span>
            <span>TOPLAM</span>
            <span>DURUM</span>
            <span style={{ textAlign: 'right' }}>İŞLEM</span>
          </div>
          {orders.map((o, i) => {
            // tiny shirt thumbnail color rotates
            const palette = ['#0F0E0C', '#3A2520', '#2C3E2D', '#E8DFCD', '#5A4A38'];
            const thumb = palette[i % palette.length];
            return (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '2fr 0.9fr 1.2fr 1.4fr 0.9fr 0.8fr 1fr 36px',
                padding: '10px 14px', fontSize: 11.5, color: C.ink2,
                borderBottom: i < orders.length - 1 ? `1px solid ${C.line}` : 'none',
                alignItems: 'center'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: 5, flexShrink: 0,
                    background: thumb,
                    display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <svg width="14" height="12" viewBox="0 0 24 20"><path d="M2 5l5-3h10l5 3-3 4h-3v9H8V9H5z" fill={thumb === '#E8DFCD' ? '#1a1a1a' : '#FFEAD4'} opacity="0.4" /></svg>
                  </div>
                  <span className="mono" style={{ color: C.ink, fontWeight: 600, fontSize: 11 }}>{o.id}</span>
                </div>
                <span style={{ color: C.inkSoft, fontSize: 10.5, lineHeight: 1.3 }}>{o.date}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                  <span style={{ background: C.brand, color: '#fff', fontSize: 9, fontWeight: 700, padding: '2px 5px', borderRadius: 3 }}>Etsy</span>
                  <span style={{ color: C.ink2, fontSize: 10.5 }}>{o.store}</span>
                </span>
                <span style={{ color: C.ink2, fontSize: 11 }}>{o.cust}</span>
                <span style={{ color: C.inkSoft, fontSize: 10.5 }}>{o.qty}</span>
                <span className="mono" style={{ color: C.ink, fontWeight: 600, fontSize: 11.5 }}>{o.total}</span>
                <span>
                  <span style={{
                    fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 4,
                    background: o.sBg, color: o.sFg
                  }}>{o.status}</span>
                </span>
                <span style={{ display: 'flex', justifyContent: 'flex-end', gap: 4, color: C.inkMute }}>
                  <span style={{ fontSize: 11 }}>›</span>
                  <span style={{ fontSize: 11, letterSpacing: 1 }}>⋮</span>
                </span>
              </div>);

          })}
        </div>
      </main>
    </div>);

}

// ───────── Interstitial pull-quote band ─────────
function Interstitial({ badge, children }) {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      padding: '64px 32px',
      background: C.surface,
      borderTop: `1px solid ${C.line}`, borderBottom: `1px solid ${C.line}`
    }}>
      <div className="dot-grid" style={{ position: 'absolute', inset: 0, opacity: 0.55, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        {badge &&
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 7,
          padding: '6px 14px', borderRadius: 999,
          background: '#fff', border: `1px solid ${C.line2}`,
          fontSize: 12, fontWeight: 500, color: C.ink2, marginBottom: 22
        }}>
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
              <path d="M6 1l1.4 3.2L11 5l-3.6.8L6 9 4.6 5.8 1 5l3.6-.8z" fill={C.brand} />
            </svg>
            {badge}
          </div>
        }
        <p className="display" style={{
          fontSize: 38, lineHeight: 1.18, letterSpacing: '-0.025em', fontWeight: 600,
          color: C.ink, margin: 0, textWrap: 'balance'
        }}>
          {children}
        </p>
      </div>
    </section>);

}

// shorthand for highlighted words
const Hi = ({ children }) => <span style={{ color: 'var(--brand)' }}>{children}</span>;

// ───────── Compare / Manuel vs Matesy ─────────
function Compare() {
  return (
    <section style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Tag>Ne Sunuyoruz?</Tag>
          <h2 className="display" style={{ fontSize: 56, color: C.ink, lineHeight: 1.05, margin: '14px 0 16px', letterSpacing: '-0.04em', textWrap: 'balance' }}>
            Neden Çoğu ETSY Satıcısı<br/>Başarılı <span style={{ color: C.brand }}>Olamıyor?</span>
          </h2>
          <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 580, marginInline: 'auto' }}>
            Print-on-demand satıcılarının yaşadığı zorlukların hızlı bir karşılaştırması — ve biz her birini nasıl çözüyoruz.
          </p>
        </div>

        {/* Comparison container */}
        <div style={{
          maxWidth: 980, margin: '0 auto',
          background: '#FAF8F4',
          border: `1px solid ${C.line2}`,
          borderRadius: 20,
          padding: 28,
          position: 'relative',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {/* LEFT — Problems */}
            <div>
              <div style={{
                textAlign: 'center', padding: '12px 0 22px',
                fontSize: 20, fontWeight: 700, color: C.ink, letterSpacing: '-0.01em',
              }}>
                Temel Problemler
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {PROBLEMS.map((p, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: '16px 20px',
                    background: '#fff',
                    border: `1px solid ${C.line}`,
                    borderRadius: 12,
                    fontSize: 14.5, color: C.ink, fontWeight: 500,
                  }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: '50%',
                      background: '#F3D8CF', color: '#A04030',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontWeight: 700, flexShrink: 0,
                    }}>×</span>
                    <span>{p.p}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* RIGHT — Solutions (dark) */}
            <div>
              <div style={{
                textAlign: 'center', padding: '12px 0 22px',
                fontSize: 20, fontWeight: 700, color: C.brand, letterSpacing: '-0.01em',
              }}>
                Bizim Çözümümüz
              </div>
              <div style={{
                background: 'radial-gradient(ellipse at 80% 0%, #2A1D14 0%, #161310 55%, #0A0908 100%)',
                borderRadius: 14,
                padding: 14,
                position: 'relative',
                overflow: 'hidden',
                boxShadow: '0 20px 50px rgba(10,9,8,0.18)',
              }}>
                {/* warm glow */}
                <div style={{
                  position: 'absolute', top: -40, right: -40, width: 240, height: 240,
                  background: 'radial-gradient(circle, rgba(255,90,31,0.18) 0%, transparent 60%)',
                  pointerEvents: 'none', borderRadius: '50%',
                }} />
                <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {PROBLEMS.map((p, i) => (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 14,
                      padding: '14px 16px',
                      background: 'rgba(255,255,255,0.03)',
                      border: '1px solid rgba(255,255,255,0.06)',
                      borderRadius: 10,
                      fontSize: 14.5, color: 'rgba(255,255,255,0.95)', fontWeight: 500,
                    }}>
                      <span style={{
                        width: 22, height: 22, borderRadius: '50%',
                        background: C.brand, color: '#fff',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 12, fontWeight: 700, flexShrink: 0,
                      }}>✓</span>
                      <span>{p.s}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Reviews — gerçek kullanıcı hikayeleri ─────────
const STORIES = [
  {
    name: 'Hande Hanım',
    role: 'T-Shirt mağazası · İlk Etsy denemesi',
    avatar: 'H',
    avatarBg: '#E89A4D',
    badge: 'İlk satış',
    narrative:
      'Hande Hanım ilk defa Etsy\'de satışa başladı. Matesy programına başladıktan sonra ilk satışlarını almaya başladık — henüz yolun başında, fakat bu iş modelinin gerçekten çalıştığını gördü. Bu en zoruydu, gerisi zamanla hallolacak.',
    shots: [{ src: 'assets/wa-hande.jpg', cap: '"Dün ilk siparişim geldi"' }],
    metrics: [
      { k: 'Önceki Etsy satışı', v: 'Yok' },
      { k: 'İlk satış',          v: 'Aldı' },
    ],
  },
  {
    name: 'Eyüp Bey',
    role: 'Tecrübeli Amazon POD satıcısı · Yeni Etsy mağazası',
    avatar: 'E',
    avatarBg: '#3A4A48',
    badge: 'Tam zamanlı satıcı',
    narrative:
      'Eyüp Bey çok ciddi satış yapan tecrübeli bir Amazon POD satıcısıydı. Tüm tasarımlarını artık Matesy ile oluşturuyor. Amazon\'un yanında bir de Etsy satıcısı oldu ve kısa sürede burada da iyi sonuçlar almaya başladı. Bu iş modelini tam zamanlı bir iş olarak yapıyor.',
    shots: [
      { src: 'assets/wa-eyup-3.png', cap: '"Bu tasarımı Matesy\'de yaptım, günlük ortalama 25 satış getirdi"' },
      { src: 'assets/wa-eyup-1.png', cap: '"Kullandığım o yöntem son 15-20 gün iyi, en azından günde 10 satış yaptırıyor"' },
      { src: 'assets/wa-eyup-2.png', cap: '"Bu daha 30 gün" — Etsy paneli: 6,587 görüntüleme · 191 sipariş · $4,199' },
    ],
    metrics: [
      { k: 'Günlük satış',     v: '10–25' },
      { k: '30 günlük gelir',  v: '$4,199' },
    ],
  },
  {
    name: 'Kerem Bey',
    role: 'Profesyonel · Etsy\'yi tekrar denedi',
    avatar: 'K',
    avatarBg: '#A03520',
    badge: 'İlk satış',
    narrative:
      'Kerem Bey profesyonel hayatta oldukça kabul gören bir meslek grubuna sahip, daha önce de Etsy\'yi denemiş fakat devam edememişti. Matesy ile temelde çözdüğümüz en önemli problem zaten bu — devam etmeyi kolaylaştırıyor, sürtünme noktalarını ciddi manada azaltıyor. Kerem Bey de geçtiğimiz günlerde ilk satışını aldı.',
    shots: [
      { src: 'assets/wa-kerem-1.png', cap: '"İlk siparişimi aldım, sevinçten çığlık atacağım :)"' },
      { src: 'assets/wa-kerem-2.png', cap: '"Çok ama çok mutluyum 🙏" — Etsy ilk sipariş ekranı' },
      { src: 'assets/wa-kerem-3.png', cap: '"İnşallah, ilk sipariş başkadır, bu daha başlangıç"' },
    ],
    metrics: [
      { k: 'Önceki deneme', v: 'Devam edemedi' },
      { k: 'Bu sefer',      v: 'İlk satış' },
    ],
  },
];

function Reviews() {
  return (
    <section style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}`, background: C.surface }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginBottom: 44, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <Tag>Gerçek Hikayeler</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 14px', letterSpacing: '-0.04em' }}>
              Matesy ile<br/><span style={{ color: C.brand }}>ilk satışını alan</span> kullanıcılar.
            </h2>
            <p style={{ fontSize: 15, color: C.inkSoft, lineHeight: 1.6, margin: 0 }}>
              Aşağıdakiler programa dahil olan gerçek Matesy kullanıcıları. WhatsApp üzerinden bizimle paylaştıkları
              ekran görüntüleri — kişisel bilgiler maskelenmiş, sahiplerinin izniyle yayınlanmıştır.
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 10, padding: '12px 18px' }}>
              <div className="mono" style={{ fontSize: 10, color: C.inkMute, marginBottom: 4, letterSpacing: 0.4, textTransform: 'uppercase' }}>Aktif Üye</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1 }}>25 kişi</div>
            </div>
            <div style={{ background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 10, padding: '12px 18px' }}>
              <div className="mono" style={{ fontSize: 10, color: C.inkMute, marginBottom: 4, letterSpacing: 0.4, textTransform: 'uppercase' }}>Birebir Destek</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: C.ink, letterSpacing: -0.6, lineHeight: 1 }}>WhatsApp</div>
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, alignItems: 'start' }}>
          {STORIES.map((s, i) => <StoryCard key={i} s={s}/>)}
        </div>

        <div style={{
          marginTop: 36, padding: '20px 26px', background: '#fff',
          border: `1px solid ${C.line}`, borderRadius: 12,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 38, height: 38, borderRadius: 9, background: '#25D366', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
              </svg>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>İlk satışlar gelmeye devam ediyor</div>
              <div style={{ fontSize: 12.5, color: C.inkSoft, marginTop: 2 }}>Programa dahil her üye süreç boyunca bizden birebir WhatsApp desteği alıyor.</div>
            </div>
          </div>
          <a href="#pricing" style={{ fontSize: 13, fontWeight: 600, color: C.brand, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            Programa başvur <span>→</span>
          </a>
        </div>
      </div>
    </section>);

}

function ShotMosaic({ shots }) {
  const [active, setActive] = React.useState(0);
  const [lightbox, setLightbox] = React.useState(false);
  const single = shots.length === 1;
  const cur = shots[active];

  // Auto-advance carousel for multi-shot cards (pauses on hover)
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (single || paused || lightbox) return;
    const t = setInterval(() => setActive(a => (a + 1) % shots.length), 4500);
    return () => clearInterval(t);
  }, [single, paused, shots.length, lightbox]);

  // Esc + arrow keys when lightbox open
  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(false);
      else if (e.key === 'ArrowRight' && !single) setActive(a => (a + 1) % shots.length);
      else if (e.key === 'ArrowLeft' && !single) setActive(a => (a - 1 + shots.length) % shots.length);
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [lightbox, single, shots.length]);

  return (
    <>
      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{ background: '#0A0908', borderRadius: 8, padding: 6, border: `1px solid #1f1d1a` }}>
        {/* Stage */}
        <div
          onClick={() => setLightbox(true)}
          style={{ position: 'relative', borderRadius: 4, overflow: 'hidden', background: '#000', height: 360, cursor: 'zoom-in' }}>
          {shots.map((sh, i) => (
            <img
              key={i}
              src={sh.src}
              alt={sh.cap}
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%', display: 'block',
                objectFit: 'cover', objectPosition: 'top center',
                opacity: i === active ? 1 : 0,
                transition: 'opacity 0.45s ease',
                pointerEvents: i === active ? 'auto' : 'none',
              }}
            />
          ))}

          {/* Zoom hint */}
          <div style={{
            position: 'absolute', top: 10, right: 10,
            width: 28, height: 28, borderRadius: '50%',
            background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)',
            border: '1px solid rgba(255,255,255,0.15)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, pointerEvents: 'none',
          }} aria-hidden>⤢</div>

          {/* Counter pill */}
          {!single && (
            <div style={{
              position: 'absolute', top: 10, left: 10,
              fontSize: 10, fontWeight: 600, color: '#fff',
              background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)',
              padding: '3px 9px', borderRadius: 999, letterSpacing: 0.4,
              fontFamily: '"JetBrains Mono", monospace',
              pointerEvents: 'none',
            }}>{active + 1} / {shots.length}</div>
          )}

          {/* Prev/next */}
          {!single && (
            <>
              <button
                aria-label="previous"
                onClick={(e) => { e.stopPropagation(); setActive(a => (a - 1 + shots.length) % shots.length); }}
                style={navBtnStyle('left')}>‹</button>
              <button
                aria-label="next"
                onClick={(e) => { e.stopPropagation(); setActive(a => (a + 1) % shots.length); }}
                style={navBtnStyle('right')}>›</button>
            </>
          )}

          {/* Dots */}
          {!single && (
            <div style={{
              position: 'absolute', bottom: 10, left: 0, right: 0,
              display: 'flex', justifyContent: 'center', gap: 6,
            }}>
              {shots.map((_, i) => (
                <button
                  key={i}
                  aria-label={`go to ${i + 1}`}
                  onClick={(e) => { e.stopPropagation(); setActive(i); }}
                  style={{
                    width: i === active ? 22 : 7, height: 7, padding: 0,
                    borderRadius: 999, border: 'none', cursor: 'pointer',
                    background: i === active ? '#fff' : 'rgba(255,255,255,0.45)',
                    transition: 'all 0.25s ease',
                  }}
                />
              ))}
            </div>
          )}
        </div>

        {/* Caption */}
        <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.72)', padding: '10px 6px 4px', lineHeight: 1.45, fontStyle: 'italic', minHeight: 32 }}>
          {cur.cap}
        </div>
      </div>

      {/* Lightbox — portaled to body so no transformed ancestor affects fixed positioning */}
      {lightbox && ReactDOM.createPortal(
        <Lightbox
          shots={shots}
          active={active}
          onClose={() => setLightbox(false)}
          onPrev={() => setActive(a => (a - 1 + shots.length) % shots.length)}
          onNext={() => setActive(a => (a + 1) % shots.length)}
        />,
        document.body
      )}
    </>
  );
}

function Lightbox({ shots, active, onClose, onPrev, onNext }) {
  const single = shots.length === 1;
  const cur = shots[active];
  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 9999,
        background: 'rgba(8,7,6,0.92)', backdropFilter: 'blur(8px)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: 40,
        animation: 'lbFade 0.2s ease',
      }}
    >
      <style>{`
        @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes lbScale { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
      `}</style>

      {/* Close */}
      <button
        onClick={onClose}
        aria-label="close"
        style={{
          position: 'fixed', top: 24, right: 24,
          width: 48, height: 48, borderRadius: '50%',
          background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)',
          color: '#fff', cursor: 'pointer', fontSize: 24, lineHeight: 1, padding: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'system-ui, sans-serif',
        }}>×</button>

      {/* Counter */}
      {!single && (
        <div style={{
          position: 'fixed', top: 30, left: 30,
          fontSize: 13, fontWeight: 600, color: '#fff',
          fontFamily: '"JetBrains Mono", monospace', letterSpacing: 0.5,
        }}>{active + 1} / {shots.length}</div>
      )}

      {/* Prev */}
      {!single && (
        <button
          onClick={(e) => { e.stopPropagation(); onPrev(); }}
          aria-label="previous"
          style={{
            position: 'fixed', left: 24, top: '50%', transform: 'translateY(-50%)',
            width: 48, height: 48, borderRadius: '50%',
            background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)',
            color: '#fff', cursor: 'pointer', fontSize: 26, lineHeight: 1, padding: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'system-ui, sans-serif',
          }}>‹</button>
      )}

      {/* Image — fills viewport */}
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100vw', height: '100vh',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          animation: 'lbScale 0.25s ease', padding: '60px 80px 60px',
          boxSizing: 'border-box', pointerEvents: 'none',
        }}>
        <img
          src={cur.src}
          alt={cur.cap}
          style={{
            maxWidth: '100%', maxHeight: 'calc(100vh - 140px)',
            width: 'auto', height: 'auto',
            display: 'block', objectFit: 'contain',
            borderRadius: 6, boxShadow: '0 30px 80px rgba(0,0,0,0.6)',
            pointerEvents: 'auto',
          }}
        />
        <div style={{
          fontSize: 13, color: 'rgba(255,255,255,0.85)',
          padding: '14px 8px 0', textAlign: 'center', fontStyle: 'italic',
          maxWidth: 640, lineHeight: 1.5, pointerEvents: 'auto',
        }}>
          {cur.cap}
        </div>
      </div>

      {/* Next */}
      {!single && (
        <button
          onClick={(e) => { e.stopPropagation(); onNext(); }}
          aria-label="next"
          style={{
            position: 'fixed', right: 24, top: '50%', transform: 'translateY(-50%)',
            width: 48, height: 48, borderRadius: '50%',
            background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)',
            color: '#fff', cursor: 'pointer', fontSize: 26, lineHeight: 1, padding: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'system-ui, sans-serif',
          }}>›</button>
      )}

      {/* Help */}
      <div style={{
        position: 'fixed', bottom: 24, left: 0, right: 0, textAlign: 'center',
        fontSize: 11, color: 'rgba(255,255,255,0.4)', letterSpacing: 0.4,
        fontFamily: '"JetBrains Mono", monospace', textTransform: 'uppercase',
      }}>Esc kapat · ← → gezin</div>
    </div>
  );
}

function navBtnStyle(side) {
  return {
    position: 'absolute', top: '50%', [side]: 8, transform: 'translateY(-50%)',
    width: 28, height: 28, borderRadius: '50%',
    background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)',
    border: '1px solid rgba(255,255,255,0.15)', color: '#fff',
    cursor: 'pointer', fontSize: 18, lineHeight: 1, padding: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'system-ui, sans-serif',
  };
}

function StoryCard({ s }) {
  return (
    <div className="lift" style={{
      background: '#fff', border: `1px solid ${C.line}`, borderRadius: 14,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
      boxShadow: '0 4px 14px rgba(10,9,8,0.04)',
    }}>
      {/* Header */}
      <div style={{ padding: '20px 22px 16px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${C.line}` }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%', background: s.avatarBg, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17, fontWeight: 700,
          letterSpacing: -0.4,
        }}>{s.avatar}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>{s.name}</div>
          <div style={{ fontSize: 11.5, color: C.inkSoft, marginTop: 2, lineHeight: 1.3 }}>{s.role}</div>
        </div>
        <span style={{
          fontSize: 10, fontWeight: 600, color: C.brandDeep, background: C.brandSoft,
          padding: '4px 9px', borderRadius: 999, letterSpacing: 0.2, whiteSpace: 'nowrap',
        }}>{s.badge}</span>
      </div>

      {/* Narrator paragraph */}
      <div style={{ padding: '18px 22px 6px' }}>
        <p style={{ fontSize: 14, color: C.ink, lineHeight: 1.55, margin: 0, fontWeight: 400, textWrap: 'pretty' }}>
          {s.narrative}
        </p>
      </div>

      {/* WhatsApp screenshots */}
      <div style={{ padding: '14px 14px 18px' }}>
        <div className="mono" style={{ fontSize: 9.5, color: C.inkMute, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8, paddingLeft: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#25D366' }}/>
          WhatsApp · {s.shots.length} ekran görüntüsü
        </div>
        <ShotMosaic shots={s.shots}/>
      </div>

      {/* Metrics */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: `1px solid ${C.line}`, marginTop: 'auto' }}>
        {s.metrics.map((m, i) => (
          <div key={i} style={{
            padding: '14px 22px',
            borderRight: i < s.metrics.length - 1 ? `1px solid ${C.line}` : 'none',
          }}>
            <div className="mono" style={{ fontSize: 9.5, color: C.inkMute, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 4 }}>{m.k}</div>
            <div style={{ fontSize: 16, fontWeight: 700, color: C.ink, letterSpacing: -0.3, lineHeight: 1.1 }}>{m.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────── Pricing ─────────
function Pricing() {
  return (
    <section id="pricing" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        {/* Header — matches other sections */}
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Tag>Fiyatlandırma</Tag>
          <h2 className="display" style={{ fontSize: 56, color: C.ink, lineHeight: 1, margin: '14px 0 16px', letterSpacing: '-0.04em' }}>
            Tek paket. <span style={{ color: C.brand }}>Hepsi dahil.</span>
          </h2>
          <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 580, marginInline: 'auto' }}>
            Etsy POD’a başlamak için ihtiyacınız olan her şeyi — yazılım, danışmanlık, eğitim — tek pakette topladık.
          </p>
        </div>

        {/* Card — single dark card with everything inside */}
        <div style={{
          maxWidth: 920, margin: '0 auto',
          borderRadius: 20,
          background: 'radial-gradient(ellipse at 80% 15%, #2A1D14 0%, #161310 55%, #0A0908 100%)',
          padding: 0,
          color: '#fff',
          position: 'relative',
          overflow: 'hidden',
          boxShadow: '0 30px 80px rgba(10,9,8,0.18), 0 1px 0 rgba(10,9,8,0.04)',
        }}>
          {/* warm orange glow */}
          <div style={{
            position: 'absolute', top: -60, right: -60, width: 360, height: 360,
            background: 'radial-gradient(circle, rgba(255,90,31,0.18) 0%, transparent 60%)',
            pointerEvents: 'none', borderRadius: '50%',
          }} />
          {/* subtle grid */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)',
            backgroundSize: '24px 24px',
            opacity: 0.7,
            pointerEvents: 'none',
          }} />

          {/* Top section — price + CTA */}
          <div style={{ position: 'relative', padding: '44px 48px 36px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: C.brand }} />
              <span className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600 }}>
                ETSY POD'a Başlangıç Paketi
              </span>
            </div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 18 }}>
              <span className="display" style={{ fontSize: 88, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>$990</span>
              <span style={{ fontSize: 17, color: 'rgba(255,255,255,0.65)' }}>/ Tek Seferlik Ödeme</span>
            </div>

            <p style={{
              fontSize: 15, color: 'rgba(255,255,255,0.65)',
              lineHeight: 1.6, margin: '0 0 32px', maxWidth: 580,
            }}>
              Bu iş modeline başlamak için ihtiyacınız olan her şeyi birebir danışmanlık ve eğitim desteği ile bir araya getirdiğimiz, sektördeki en rekabetçi paketi tasarladık.
            </p>

            <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
              <a href="https://tally.so/r/obRzrN" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '6px 6px 6px 22px',
                background: '#fff', color: C.ink,
                borderRadius: 999, textDecoration: 'none',
                fontSize: 15, fontWeight: 600, letterSpacing: -0.1,
                fontFamily: 'inherit',
                transition: 'transform .15s ease',
              }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
              >
                Hemen Başvur
                <span style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: C.brand, color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 15, fontWeight: 600,
                }}>→</span>
              </a>
              <span className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: 0.4 }}>
                Mayıs kontenjanı 3/5 dolu
              </span>
            </div>
          </div>

          {/* Divider */}
          <div style={{ position: 'relative', height: 1, background: 'rgba(255,255,255,0.08)' }} />

          {/* Includes — inside the card */}
          <div style={{ position: 'relative', padding: '32px 48px 40px' }}>
            <div className="mono" style={{
              fontSize: 11, color: 'rgba(255,255,255,0.5)',
              letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600,
              marginBottom: 22,
            }}>
              Paket İçeriği
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 32, rowGap: 16 }}>
              {PACKAGE_INCLUDES.map((it, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: 'rgba(255,90,31,0.15)', color: '#FFB591',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13, fontWeight: 700, flexShrink: 0,
                  }}>✓</div>
                  <span style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.9)', fontWeight: 500 }}>{it}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ───────── FAQ ─────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: '100px 32px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
        <div>
          <Tag>SSS</Tag>
          <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1, margin: '14px 0 24px' }}>
            Sorularınız mı var?
          </h2>
          <p style={{ fontSize: 14.5, color: C.inkSoft, lineHeight: 1.6 }}>
            Aklınızdaki başka sorular için <a className="underline-link" style={{ color: C.brand, textDecoration: 'none', fontWeight: 600 }}>support@matesy.co</a> adresine yazın — 24 saat içinde döneriz.
          </p>
        </div>
        <div>
          {FAQS.map((f, i) =>
          <div key={i} style={{ borderTop: `1px solid ${C.line}`, padding: 0 }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, fontFamily: 'inherit'
            }}>
                <span style={{ fontSize: 16.5, fontWeight: 600, color: C.ink, letterSpacing: -0.2 }}>{f.q}</span>
                <span style={{
                width: 28, height: 28, borderRadius: 7, flexShrink: 0,
                background: open === i ? C.brand : C.surface, color: open === i ? '#fff' : C.ink,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700,
                transition: 'all .2s'
              }}>{open === i ? '−' : '+'}</span>
              </button>
              {open === i && <p style={{ fontSize: 14.5, color: C.inkSoft, lineHeight: 1.65, margin: '-4px 0 22px', maxWidth: 640 }}>{f.a}</p>}
            </div>
          )}
          <div style={{ borderTop: `1px solid ${C.line}` }} />
        </div>
      </div>
    </section>);

}

// ───────── Final CTA — Founder + closing (sade & cream) ─────────
function FinalCTA() {
  return (
    <section style={{
      padding: '100px 32px 72px',
      background: C.surface,
      borderTop: `1px solid ${C.line}`,
      position: 'relative'
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.15fr',
          gap: 64,
          alignItems: 'center'
        }}>
          {/* LEFT — Founder */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 22 }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                background: 'linear-gradient(135deg, #C7421A, #FF8754)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 22, fontWeight: 700,
                boxShadow: '0 4px 14px rgba(199,66,26,0.22), inset 0 1px 0 rgba(255,255,255,0.25)',
                flexShrink: 0
              }}>BÇ</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>
                  Burak Çatak
                </div>
                <div style={{ fontSize: 12.5, color: C.inkSoft, marginTop: 2 }}>
                  Matesy Kurucu
                </div>
              </div>
            </div>
            <div style={{ maxWidth: 480 }}>
              <p style={{
                fontSize: 16, color: C.ink, lineHeight: 1.55, fontWeight: 500,
                margin: '0 0 14px', letterSpacing: '-0.005em'
              }}>
                Bu programda size 100 saatlik video gönderip, hadi yapın demiyoruz. <strong style={{ fontWeight: 700 }}>Çünkü buna ihtiyacınız yok!</strong>
              </p>
              <p style={{
                fontSize: 16, color: C.inkSoft, lineHeight: 1.6, fontWeight: 500,
                margin: 0, letterSpacing: '-0.005em'
              }}>
                Birkaç saatlik temel eğitim, takıldığınız noktalarda soru sorabileceğiniz bir Mentor ve her şeyden önemlisi düzenli olarak Aksiyon alabileceğiniz bir sisteme ihtiyacınız var. <strong style={{ color: C.ink, fontWeight: 700 }}>Burada vermeyi amaçladığımız asıl değer bu.</strong>
              </p>
            </div>
          </div>

          {/* RIGHT — Closing CTA */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', background: '#fff', color: C.brandDeep,
              border: `1px solid ${C.line2}`,
              borderRadius: 999, marginBottom: 20, fontSize: 11.5, fontWeight: 600,
              fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.3
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.brand, boxShadow: '0 0 0 3px rgba(255,90,31,0.18)' }} />
              MAYIS KONTENJANI · 3/5
            </div>
            <h2 className="display" style={{
              fontSize: 48, color: C.ink, lineHeight: 1.05, margin: '0 0 16px',
              letterSpacing: '-0.035em', fontWeight: 600
            }}>
              Sıradaki kişi <span style={{ color: C.brand }}>sen ol.</span>
            </h2>
            <p style={{
              fontSize: 15.5, color: C.inkSoft, lineHeight: 1.55,
              margin: '0 0 28px', maxWidth: 460
            }}>
              Başvuru dökümanını incele, aynı bakış açısındaysak başvuru yap, tanışma toplantımızı yapalım.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
              <BrandBtn size="lg" href="https://tally.so/r/obRzrN">
                Başvuru Formuna Git <span aria-hidden>→</span>
              </BrandBtn>
              <a href="mailto:support@matesy.co" style={{
                fontSize: 13, color: C.inkSoft, textDecoration: 'none', fontWeight: 500
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = C.ink}
                onMouseLeave={(e) => e.currentTarget.style.color = C.inkSoft}
              >
                Sorular: <span style={{ borderBottom: `1px solid ${C.line2}` }}>support@matesy.co</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Footer — minimal compact satır ─────────
function Footer() {
  return (
    <footer style={{
      padding: '24px 32px 32px',
      background: C.surface,
      borderTop: `1px solid ${C.line}`
    }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 20, flexWrap: 'wrap'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Logo size={22} />
          <span className="mono" style={{ fontSize: 11, color: C.inkMute }}>
            © 2026
          </span>
        </div>
        <div className="mono" style={{ fontSize: 10.5, color: C.inkMute, maxWidth: 600, textAlign: 'right', lineHeight: 1.5 }}>
          The term ‘Etsy’ is a trademark of Etsy, Inc. This application uses the Etsy API but is not endorsed or certified by Etsy.
        </div>
      </div>
    </footer>);

}

// ───────── App ─────────
function App() {
  const [t, setTweak] = useTweaks(window.__MATESY_TWEAKS);

  React.useEffect(() => {
    document.body.setAttribute('data-vibe', t.vibe || 'default');
    document.body.setAttribute('data-type', t.type || 'modern');
    document.body.setAttribute('data-density', t.density || 'regular');
  }, [t.vibe, t.type, t.density]);

  return (
    <div>
      <Nav />
      <Hero />
      <Demo />
      <Compare />
      <Process />
      <Trends />
      <AIDesigns />
      <Selections />
      <Products />
      <Orders />
      <Interstitial badge="Print On Demand Satıcıları için Hazırlandı">
        Çoğu POD satıcısı ürün listelerken tahminde bulunur,
        bizim kullanıcılarımız ise <Hi>verilerle hareket eder</Hi> ve Matesy
        ile listing hazırlamak <Hi>saatler değil</Hi> sadece <Hi>dakikalar alır!</Hi>
      </Interstitial>
      <Reviews />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Vibe" />
        <TweakRadio
          label="Palette"
          value={t.vibe}
          options={[
          { value: 'default', label: 'Orange' },
          { value: 'midnight', label: 'Midnight' },
          { value: 'sunbaked', label: 'Sun-baked' },
          { value: 'monopress', label: 'Mono' }]
          }
          onChange={(v) => setTweak('vibe', v)} />
        
        <TweakSection label="Type personality" />
        <TweakRadio
          label="Voice"
          value={t.type}
          options={[
          { value: 'modern', label: 'Modern' },
          { value: 'editorial', label: 'Editorial' },
          { value: 'industrial', label: 'Industrial' }]
          }
          onChange={(v) => setTweak('type', v)} />
        
        <TweakSection label="Rhythm" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
          { value: 'compact', label: 'Compact' },
          { value: 'regular', label: 'Regular' },
          { value: 'editorial', label: 'Editorial' }]
          }
          onChange={(v) => setTweak('density', v)} />
        
      </TweaksPanel>
    </div>);

}

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