// 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,
    transition: 'transform .15s, filter .15s',
    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)'
  };
  const onEnter = (e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.06)'; };
  const onLeave = (e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; };
  if (href) return <a href={href} style={style} onMouseEnter={onEnter} onMouseLeave={onLeave}>{children}</a>;
  return <button style={style} onMouseEnter={onEnter} onMouseLeave={onLeave}>{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 = [
  ['Trends', '#trends'],
  ['AI Design', '#designs'],
  ['Selections & Mockup', '#selections'],
  ['Products & SEO', '#products'],
  ['Order Automation', '#orders']];

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

  // On pricing pages, in-page anchors should point back to the EN home so they aren't dead links.
  const onPricing = typeof window !== 'undefined' && (window.__MATESY_PAGE === 'pricing' || window.__MATESY_PAGE === 'pricing2');
  const hasLocalFaq = typeof window !== 'undefined' && window.__MATESY_PAGE === 'pricing';
  const navHref = (h) => {
    if (!onPricing || h.charAt(0) !== '#') return h;
    if (h === '#faq' && hasLocalFaq) return h;
    return '/en/' + h;
  };

  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={navHref('#features')} style={linkStyle}
            onMouseEnter={(e) => e.currentTarget.style.color = C.ink}
            onMouseLeave={(e) => e.currentTarget.style.color = C.inkSoft}>
            How It Works
          </a>

          {/* Features 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
            }}>
              Features
              <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={navHref(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>

          {[['Catalog', '/en/katalog'], ['Pricing', '/en/pricing'], ['FAQ', '#faq']].map(([l, h]) =>
            <a key={l} href={navHref(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="Open menu"
            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)'
              }}>
                {[
                  ['How It Works', '#features'],
                  ['Catalog', '/en/katalog'],
                  ['Pricing', '/en/pricing'],
                  ['FAQ', '#faq']
                ].map(([l, h]) => (
                  <a key={l} href={navHref(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'
                }}>Features</div>
                {features.map(([l, h]) => (
                  <a key={l} href={navHref(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 }}>Language / Dil</span>
                  <LangToggle compact />
                </div>
              </div>
            </div>
          )}
        </div>
        <BrandBtn size="sm" href="/en/pricing">Get Started <span aria-hidden>→</span></BrandBtn>
      </div>
    </header>);

}

// ───────── Hero (per visual reference) ─────────
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" }}>The Easiest</span>
              <span style={{ display: 'block', color: C.brand, fontWeight: "600" }}>Way to Sell</span>
              <span style={{ display: 'block', fontWeight: "600" }}>on ETSY.</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 }}>One click,</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 }}>Find Trends.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Mockups.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>SEO.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Production & Shipping.</span>
                  <span style={{ height: '1.15em', lineHeight: 1.15 }}>Find Trends.</span>
                </span>
              </span>
            </div>

            {/* CTA pill */}
            <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 18 }}>
              <a href="/en/pricing"
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.06)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }}
                style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                background: C.brand, color: '#fff', textDecoration: 'none', cursor: 'pointer',
                borderRadius: 10, padding: '16px 28px', fontSize: 17, fontWeight: 600, letterSpacing: -0.2,
                fontFamily: 'inherit', transition: 'transform .15s, filter .15s',
                boxShadow: '0 8px 22px 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)',
              }}>
                Get Started <span aria-hidden style={{ fontSize: 18 }}>→</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 }}>
                  June Quota<br /><span style={{ color: C.ink, fontWeight: 600 }}>Sold Out</span> · Starter Kit open
                </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 Shop Owner"
                text={<>I run my whole T-Shirt operation without ever leaving Matesy.</>}
                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 Shop Owner"
                text={<>Thanks to Matesy Trends, I easily track current events in the US and post listings.</>}
                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 = [
  'Find Trending Designs',
  'Generate Similar Designs',
  'One-Click Mockup',
  'One-Click Title, Story & Tags',
  'Live on ETSY in Minutes',
  'Find Trending Designs',
  'Generate Similar Designs',
  'One-Click Mockup'];

  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 no longer rendered as a separate section.
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 Spotted"
          body="'boho butterfly' concept grew +312% in 48 hours"
          time="now" />
        
      </div>
      <div style={{ position: 'absolute', right: -68, bottom: 60, zIndex: 3, transform: 'rotate(3deg)' }} className="lift">
        <FloatCard
          kind="seo"
          title="SEO Ready"
          body="3 titles · 13 tags · product story"
          time="2s ago" />
        
      </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 }}>CREDITS</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 Discovery</div>
          <div className="mono" style={{ fontSize: 11, color: C.inkMute, marginTop: 2 }}>1,284 listings · last 7 days · US market</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>DESIGN</span><span>SHOP</span><span>CATEGORY</span><span>WEEKLY</span><span>GROWTH</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' }}>Make Similar</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 }}>
          Order with one click<br />via POD partners
        </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>);

}

// ───────── YouTube IFrame API (tek sefer) — EN demo videosu 1.25x ─────────
let __ytApiPromiseEn = null;
function loadYTApiEn() {
  if (typeof window === 'undefined') return Promise.resolve(null);
  if (window.YT && window.YT.Player) return Promise.resolve(window.YT);
  if (__ytApiPromiseEn) return __ytApiPromiseEn;
  __ytApiPromiseEn = new Promise((resolve) => {
    const prev = window.onYouTubeIframeAPIReady;
    window.onYouTubeIframeAPIReady = () => { if (typeof prev === 'function') { try { prev(); } catch (e) {} } resolve(window.YT); };
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    document.head.appendChild(tag);
  });
  return __ytApiPromiseEn;
}

function EnDemoVideo() {
  const elRef = React.useRef(null);
  const playerRef = React.useRef(null);
  const ratedRef = React.useRef(false);
  React.useEffect(() => {
    let cancelled = false;
    loadYTApiEn().then((YT) => {
      if (cancelled || !YT || !elRef.current) return;
      playerRef.current = new YT.Player(elRef.current, {
        videoId: 'MLkXC-lSzco',
        host: 'https://www.youtube-nocookie.com',
        playerVars: { rel: 0, modestbranding: 1, playsinline: 1 },
        events: {
          onReady: (e) => {
            const f = e.target.getIframe && e.target.getIframe();
            if (f) { f.style.position = 'absolute'; f.style.inset = '0'; f.style.width = '100%'; f.style.height = '100%'; f.style.border = '0'; }
          },
          onStateChange: (e) => { if (e.data === 1 && !ratedRef.current) { try { e.target.setPlaybackRate(1.1); } catch (er) {} ratedRef.current = true; } },
        },
      });
    });
    return () => { cancelled = true; try { if (playerRef.current && playerRef.current.destroy) playerRef.current.destroy(); } catch (e) {} };
  }, []);
  return <div ref={elRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />;
}

// ───────── 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' }}>
              What exactly does<br />Matesy do?
            </h2>
          </div>
          <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 560 }}>Watch the video below to see exactly which core problems Matesy solves.

          </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'
        }}>
          <EnDemoVideo />

        </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 }}>
                Core Features
              </div>
              <h3 className="display" style={{ fontSize: 28, color: C.ink, lineHeight: 1.1, margin: 0, letterSpacing: '-0.025em', fontWeight: 700 }}>
                Everything you need to run<br />
                <span style={{ color: C.brand }}>an Etsy shop</span>, in one panel.
              </h3>
            </div>
            <div className="mono" style={{ fontSize: 11, color: C.inkMute, whiteSpace: 'nowrap', borderLeft: `1px solid ${C.line2}`, paddingLeft: 16 }}>
              5 modules<br />1 subscription
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12
          }}>
            {[
            {
              t: 'Trend Tracking',
              b: 'Sports, pop culture, news, music — anything with global POD potential lands in your panel within 24 hours.',
              meta: ['Reddit · Google News · Twitter', 'Updates automatically'],
              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: 'Competitor Shop Analysis',
              b: 'Paste an Etsy shop URL — top-sellers, sales velocity, price and category breakdowns.',
              meta: ['Real review data', 'Product & date map'],
              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: 'Effortless Orders',
              b: 'Connect your Etsy shop, watch orders flow in. One click — produced and shipped in the US.',
              meta: ['Etsy integration', '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: 'Effortless Mockups',
              b: 'Use our library of hundreds of ready-made mockups, or upload your own — apply with one click.',
              meta: ['T-shirt · Hoodie · Canvas · Mug', 'Multi-position'],
              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: 'Effortless SEO',
              b: 'Etsy-friendly titles, 13 tags and a product story — one click per listing.',
              meta: ['Etsy LLM SEO algorithm', 'Title · Tags · Description'],
              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: '~60s', visual: 'storeurl' },
  { ...STEPS[1], time: '~30s', visual: 'designs' },
  { ...STEPS[2], time: '~20s', visual: 'mockups' },
  { ...STEPS[3], time: '~30s', 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>Step-by-Step</Tag>
            <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1, margin: '14px 0 0', maxWidth: 720 }}>
              From Etsy data to a live listing<br />
              <span style={{ color: C.brand }}>in 4 steps</span>.
            </h2>
          </div>
          <div className="mono" style={{ fontSize: 12, color: C.inkSoft, textAlign: 'right' }}>
            Average time per listing<br />
            <span style={{ fontSize: 28, color: C.ink, fontWeight: 700, letterSpacing: -1 }}>3–6 min</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 }}>Step</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 }}>TITLE · TAGS</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() {
  const [tEmail, setTEmail] = React.useState('');
  const goTrends = (e) => {
    if (e) e.preventDefault();
    const q = tEmail.trim() ? '?email=' + encodeURIComponent(tEmail.trim()) : '';
    window.location.href = 'http://panel.matesy.co/trends' + q;
  };
  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>Trends</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              See what's trending<br /><span style={{ color: C.brand }}>before anyone else.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Matesy Trends pulls anything with global POD potential at regular intervals —
              sports, pop culture, politics, music. Spot fast-rising designs and
              quickly generate them in your shop.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Sports', 'Entertainment', 'Politics', 'Music', '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: 'Trend records pulled regularly' },
          { k: '24H', l: 'Time between trend emergence and action' },
          { k: 'One click', l: 'See a trend, click "Generate Design", post to your shop' }].
          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>

        {/* CTA — try trends yourself → lead page */}
        <div style={{ marginTop: 14, background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 14, padding: '24px 26px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', boxShadow: '0 2px 10px rgba(10,9,8,0.03)' }}>
          <div style={{ flex: '1 1 320px', minWidth: 240 }}>
            <div style={{ fontSize: 19, fontWeight: 700, color: C.ink, letterSpacing: -0.3, marginBottom: 4 }}>See how Trends works for yourself</div>
            <div style={{ fontSize: 14, color: C.inkSoft, lineHeight: 1.5 }}>Drop your email and get instant, free access to Matesy Trends.</div>
          </div>
          <form onSubmit={goTrends} style={{ display: 'flex', gap: 10, flexWrap: 'wrap', flex: '1 1 360px', minWidth: 280 }}>
            <input type="email" value={tEmail} onChange={(e) => setTEmail(e.target.value)} placeholder="Your email" style={{
              flex: 1, minWidth: 190, border: `1px solid ${C.line2}`, borderRadius: 10, padding: '14px 16px',
              fontSize: 15, fontFamily: 'inherit', color: C.ink, outline: 'none', background: '#fff', transition: 'border-color .15s, box-shadow .15s',
            }}
              onFocus={(e) => { e.target.style.borderColor = C.brand; e.target.style.boxShadow = `0 0 0 3px ${C.brandSoft}`; }}
              onBlur={(e) => { e.target.style.borderColor = C.line2; e.target.style.boxShadow = 'none'; }} />
            <button type="submit" style={{
              display: 'inline-flex', alignItems: 'center', gap: 9, background: C.brand, color: '#fff',
              border: 'none', cursor: 'pointer', borderRadius: 10, padding: '14px 24px', fontSize: 15, fontWeight: 700,
              letterSpacing: -0.1, fontFamily: 'inherit', whiteSpace: 'nowrap', transition: 'transform .15s, filter .15s',
              boxShadow: '0 8px 22px rgba(255,90,31,0.32), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0.5px rgba(199,66,26,0.6)',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.06)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }}
            >Try Free <span aria-hidden style={{ fontSize: 17 }}>→</span></button>
          </form>
        </div>
      </div>
    </section>);

}

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

  const sidebar2 = [
  { k: 'Designs', icon: 'design' },
  { k: 'Lists', icon: 'list' },
  { k: 'Products', icon: 'box' }];

  const sidebar3 = [
  { k: 'My Orders', icon: 'cart' },
  { k: 'Mockup Gallery', 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: [['High', 'pos'], ['Low', 'mute'], ['6 Days', 'mute']], time: '24h' },
  { 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: [['High', 'pos'], ['Medium', 'mid'], ['Today', 'mute']], time: '2h' },
  { 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: [['Medium', 'mid'], ['Low', 'mute'], ['8 Days', 'mute']], time: '5h' },
  { 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: [['High', 'pos'], ['Medium', 'mid'], ['Weeks', 'mute']], time: '14h' },
  { title: 'Just Like Heaven 2026 Festival, Pasadena CA', cat: 'entert. music', src: 'Pitchfork, US', score: 78, rec: 'POD 7', tags: [['High', 'pos'], ['Medium', 'mid'], ['Weeks', 'mute']], time: '34h' },
  { 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: [['High', 'pos'], ['High', 'pos'], ['Weeks', 'mute']], time: '20h' },
  { title: 'Jaylen Brown', cat: 'sports', src: 'Reddit, US', score: 70, rec: 'POD 7', tags: [['High', 'pos'], ['Medium', 'mid'], ['Days', 'mute']], time: '24h' },
  { title: 'Derrick White', cat: 'sports', src: 'Twitter, US', score: 72, rec: 'POD 7', tags: [['High', 'pos'], ['Low', 'mute'], ['Days', 'mute']], time: '20h' },
  { title: 'The Celtics', cat: 'sports', src: 'Reddit, US', score: 65, rec: 'POD 7', tags: [['High', 'pos'], ['High', 'pos'], ['Weeks', 'mute']], time: '21h' }];


  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 }}>Trends</div>
            <div style={{ fontSize: 12, color: C.inkSoft, marginTop: 4, lineHeight: 1.4 }}>
              Discover trending topics with global POD potential
            </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+ records · last updated: today 09:30 GMT+3
            </div>
          </div>

          <div style={{ display: 'flex', gap: 4, background: '#fff', padding: 3, border: `1px solid ${C.line}`, borderRadius: 8 }}>
            {[['24 hours', true], ['3 days', false], ['7 days', false], ['All time', 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 }}>Search global trends…</span>
          </div>
          {['Categories', 'All Markets', 'Sources', 'Activity', '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>
                    Generate Design
                  </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 / Design generation ─────────
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>AI Design</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              Pick a reference,<br /><span style={{ color: C.brand }}>10+ similar designs</span> in one click.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              For your chosen reference, next-gen AI models generate 10+ similar designs.
              Save the ones you like, regenerate the rest — all in one panel.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['10+ variants / reference', 'Edit & update', 'Bulk select', 'Send to Mockup'].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+ variants', l: 'Multiple outputs from one reference, latest AI models' },
          { k: 'Editable', l: 'Regenerate any output with a text prompt' },
          { k: 'Pick in one click', l: 'Send selections to Mockup or create a listing' }].
          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: 'Home', icon: 'home', active: false },
  { k: 'Trends', icon: 'trend', active: false },
  { k: 'References', icon: 'ref', active: false }],

  [
  { k: 'Designs', icon: 'design', active: true },
  { k: 'Selections', icon: 'pick' },
  { k: 'Products', icon: 'box' }],

  [
  { k: 'My Orders', icon: 'cart' },
  { k: 'Mockup Gallery', 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 Design" 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 Design" date="9/12/25" hasBadge={i === 0 && 'Iteration 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
        }}>
            Pick
            <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>Selections & Mockup</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              One click,<br /><span style={{ color: C.brand }}>dozens of mockups</span> ready.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Collect your AI-generated or uploaded designs in Selections. Remove backgrounds,
              tweak colors, iterate with prompts. Pick one or more designs and
              generate dozens of mockups in one click.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Remove background', 'Edit colors', 'Prompt iteration', 'Bulk 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: 'Ready-made mockup templates — T-shirt, hoodie, canvas, mug' },
          { k: 'Batch Generation', l: 'Group multiple designs, generate dozens of mockups in one click' },
          { k: 'AI Edit', l: 'Remove backgrounds, change colors, regenerate with prompts' }].
          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: 'Home', icon: 'home' },
  { k: 'Trends', icon: 'trend' },
  { k: 'References', icon: 'ref' }],

  [
  { k: 'Designs', icon: 'design' },
  { k: 'Selections', icon: 'pick', active: true },
  { k: 'Products', icon: 'box' }],

  [
  { k: 'My Orders', icon: 'cart' },
  { k: 'Mockup Gallery', 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 Design', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'Donald Trump Mugshot...', cta: 'Regenerate', art: 'fearless' },
  { kind: 'My Upload', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'My Upload', cta: 'Mockup', art: 'miracle', selected: true },
  { kind: 'My Upload', tag: 'Original', tagBg: '#3A4A48', tagFg: '#fff', name: 'My Upload', cta: 'Mockup', art: 'positive' },
  { kind: 'My Upload', tag: 'Original', tagBg: '#3A4A48', tagFg: '#fff', name: 'My Upload', cta: 'Mockup', art: 'positive2' },
  { kind: 'Color Edit', tag: 'T-Shirt', tagBg: '#FFE89A', tagFg: '#7A5A0A', name: 'Etsy Reference', cta: 'Regenerate', 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: 'Regenerate', art: 'murph2' },
  { kind: 'Original', tag: 'Canvas Wall Art', tagBg: '#E8DDC4', tagFg: '#3A4A32', name: 'Etsy Reference', cta: 'Mockup', art: 'lake' },
  { kind: 'Original', 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 Design' || 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 Colors', tags: ['Bella Canvas', 'Front & Back'] },
  { name: 'front_large.png', base: '#D85A3E', label: '3 Colors', tags: ['Comfort Colors'] },
  { name: 'Bay', base: '#9BA8A0', label: '24 Colors', tags: ['Comfort Colors', '+2'] },
  { name: 'Bay', base: '#A8B5A8', label: '32 Colors', tags: ['Multiple Print'] },
  { name: 'Bay', base: '#A8B5A8', label: '24 Colors', tags: ['Bella Canvas'], badge: '24 Colors' },
  { name: 'Blossom', base: '#F5C4D0', label: '44 Colors', tags: ['1 Mil Aligned'] },
  { name: 'Gray', base: '#7A7A7A', label: '42 Colors', tags: [] },
  { name: 'Autumn', base: '#C97540', label: '24 Colors', 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 }}>Pick a Mockup</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 }}>Your Design</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 }}>Reference</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> Search mockups...
            </div>
            <div style={{ padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, fontSize: 11, color: C.ink2, background: '#fff' }}>T-Shirt ▾</div>
            <div style={{ padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, fontSize: 11, color: C.ink2, background: '#fff' }}>Tags</div>
            <div style={{ padding: '6px 10px', border: `1px solid ${C.line}`, borderRadius: 6, fontSize: 11, color: C.ink2, background: '#fff' }}>Variants</div>
          </div>
          <div style={{ background: '#E5F0FF', border: `1px solid #C7DDF5`, borderRadius: 6, padding: '6px 10px', fontSize: 10.5, color: '#2A4A88' }}>
            ⓘ Showing T-Shirt mockups (10 available)
          </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 }}>Select all {t.label} colors</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 }}>Select All</span>
              <span style={{ color: C.inkMute }}>Clear</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 }}>Cancel</button>
              <button style={{ padding: '6px 14px', fontSize: 11, background: C.brand, color: '#fff', border: 'none', borderRadius: 5, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 600 }}>Create 0</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>Products & SEO</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              SEO work,<br /><span style={{ color: C.brand }}>one click.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Every product's title, description and tags — optimized for the Etsy algorithm,
              auto-generated. Polish, regenerate, attach mockups, archive. Listing creation drops
              from <strong style={{ color: C.ink }}>30 minutes to 30 seconds</strong>.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Title', 'Description', 'Tags', 'Mockup chain', 'Archive'].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: '30s', l: 'Title + description + 13 tags. Etsy SEO standard.' },
          { k: 'One Click', l: 'All mockups auto-attached. Listing ready to publish.' },
          { k: 'Algorithm-Aligned', l: 'Content aligned with the Etsy SEO algorithm.' }].
          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: 'Home', icon: 'home' },
  { k: 'Trends', icon: 'trend' },
  { k: 'References', icon: 'ref' }],

  [
  { k: 'Designs', icon: 'design' },
  { k: 'Selections', icon: 'pick' },
  { k: 'Products', icon: 'box', active: true }],

  [
  { k: 'My Orders', icon: 'cart' },
  { k: 'Mockup Gallery', 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' }}>Content</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="↑">Polish Quality</ProdBtn>
              <ProdBtn icon="⟳">Regenerate</ProdBtn>
              <ProdBtn icon="✂">Mockup Again</ProdBtn>
              <ProdBtn icon="↓">Download</ProdBtn>
              <ProdBtn primary green icon="📦">Archive</ProdBtn>
            </div>
          </div>

          {/* Design strip */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: C.inkSoft, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 8 }}>Design</div>
            <div style={{ display: 'flex', gap: 10 }}>
              <DesignChip label="New Design" art="basket" />
              <DesignChip label="Background Removed" 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> Generated Content
            </div>

            <SEOField icon="T" label="Title">
              2001 Retro Basketball Tee, Vintage Sports Graphic, Nostalgia Streetwear
            </SEOField>
            <SEOField icon="¶" label="Description" 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="Tags" 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 versions used
              </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> Mockups (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 / Order automation ─────────
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>Order Automation</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
              Connect your Etsy shop,<br /><span style={{ color: C.brand }}>orders flow in automatically.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 520 }}>
              Connect your Etsy shop in one click — incoming orders land in your panel automatically.
              Send to production in a few clicks; printed at US-based facilities
              and shipped directly to your customer. No code, no shipping labels.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Etsy connection', 'Auto-sync', 'US fulfillment', 'Tracking & label', 'One 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 manual steps', l: 'Orders appear in your panel as they come in — no copy-paste' },
          { k: 'US-based', l: 'Production at US printing facilities, fast shipping' },
          { k: 'One-click production', l: 'Pick orders from the list, send to production, tracking arrives automatically' }].
          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: 'Apr 27, 2026', store: 'StoreName', cust: 'L. S***e', qty: '1 item', total: '$76.21', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-770005', date: 'Apr 27, 2026', store: 'StoreName', cust: 'R. D****n', qty: '1 item', total: '$23.38', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-37C5BB', date: 'Apr 27, 2026', store: 'StoreName', cust: 'L. S***e', qty: '1 item', total: '$76.21', status: 'In Production', sFg: '#A04E15', sBg: '#FFEFE3' },
  { id: 'MTSY-20260427-8D7A7B', date: 'Apr 27, 2026', store: 'StoreName', cust: 'D. F***s', qty: '1 item', total: '$22.05', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-474EE5', date: 'Apr 25, 2026', store: 'StoreName', cust: 'A****', qty: '1 item', total: '$24.75', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-A33D18', date: 'Apr 22, 2026', store: 'StoreName', cust: 'K. C**t', qty: '1 item', total: '$25.27', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-58F752', date: 'Apr 21, 2026', store: 'StoreName', cust: 'N. E*****s', qty: '1 item', total: '$23.04', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-D0A0D1', date: 'Apr 16, 2026', store: 'StoreName', cust: 'J. F*****k', qty: '1 item', total: '$23.59', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-2A8FE8', date: 'Apr 12, 2026', store: 'StoreName', cust: 'M. B****n', qty: '1 item', total: '$23.37', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-3036DF', date: 'Apr 9, 2026', store: 'StoreName', cust: 'J. C***n', qty: '1 item', total: '$23.37', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' },
  { id: 'MTSY-20260427-8AB647', date: 'Apr 9, 2026', store: 'StoreName', cust: 'C. S*****n', qty: '1 item', total: '$24.31', status: 'Shipped', sFg: '#3F8B23', sBg: '#E5F4DD' }];


  const sidebar = [
  [
  { k: 'Home', icon: 'home', active: false },
  { k: 'Trends', icon: 'trend', active: false },
  { k: 'References', icon: 'ref', active: false }],

  [
  { k: 'Designs', icon: 'design' },
  { k: 'Selections', icon: 'pick' },
  { k: 'Products', icon: 'box' }],

  [
  { k: 'My Orders', icon: 'cart', active: true },
  { k: 'Mockup Gallery', 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 }}>Orders</div>
            <div style={{ fontSize: 11, color: C.inkSoft, marginTop: 4 }}>11 Orders</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>
            New Order
          </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 }}>Search orders…</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
          }}>All Statuses <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>
            Active
          </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>
            Archive
          </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>ORDER</span>
            <span>DATE</span>
            <span>SHOP</span>
            <span>CUSTOMER</span>
            <span>ITEMS</span>
            <span>TOTAL</span>
            <span>STATUS</span>
            <span style={{ textAlign: 'right' }}>ACTION</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' }}>
            Why Most ETSY Sellers<br/>Don't <span style={{ color: C.brand }}>Succeed?</span>
          </h2>
          <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 580, marginInline: 'auto' }}>
            A quick comparison of the challenges print-on-demand sellers face — and how we solve each one.
          </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',
              }}>
                Core Problems
              </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',
              }}>
                Our Solution
              </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 — real user stories ─────────
const STORIES = [
  {
    name: 'Hande',
    role: 'T-Shirt shop · First Etsy try',
    avatar: 'H',
    avatarBg: '#E89A4D',
    badge: 'First sale',
    narrative:
      'Hande started selling on Etsy for the first time. After joining the Matesy program, she made her first sales — early days, but she saw the model truly works. The hardest part is done; the rest comes with time.',
    shots: [{ src: '/assets/wa-hande.jpg', cap: '"My first order came in yesterday"' }],
    metrics: [
      { k: 'Previous Etsy sales', v: 'None' },
      { k: 'First sale',         v: 'Made' },
    ],
  },
  {
    name: 'Eyüp',
    role: 'Veteran Amazon POD seller · New Etsy shop',
    avatar: 'E',
    avatarBg: '#3A4A48',
    badge: 'Full-time seller',
    narrative:
      'Eyüp was an experienced Amazon POD seller doing serious volume. He now creates all his designs with Matesy. Alongside Amazon, he became an Etsy seller and started getting great results quickly. He runs this as a full-time business.',
    shots: [
      { src: '/assets/wa-eyup-3.png', cap: '"Made this design with Matesy — averaging 25 sales per day"' },
      { src: '/assets/wa-eyup-1.png', cap: '"My current method has been solid for 15-20 days — at least 10 sales/day"' },
      { src: '/assets/wa-eyup-2.png', cap: '"Just 30 days in" — Etsy dashboard: 6,587 views · 191 orders · $4,199' },
    ],
    metrics: [
      { k: 'Daily sales',     v: '10–25' },
      { k: '30-day revenue',  v: '$4,199' },
    ],
  },
  {
    name: 'Kerem',
    role: 'Professional · Retrying Etsy',
    avatar: 'K',
    avatarBg: '#A03520',
    badge: 'First sale',
    narrative:
      'Kerem has a respected professional career and had tried Etsy before but couldn\'t keep going. That\'s exactly the core problem Matesy solves — making it easier to keep going by reducing friction significantly. Kerem made his first sale a few days ago.',
    shots: [
      { src: '/assets/wa-kerem-1.png', cap: '"Got my first order — could scream with joy :)"' },
      { src: '/assets/wa-kerem-2.png', cap: '"So, so happy 🙏" — Etsy first-order screen' },
      { src: '/assets/wa-kerem-3.png', cap: '"Hopefully — the first order is special, just the beginning"' },
    ],
    metrics: [
      { k: 'Previous attempt', v: 'Stalled' },
      { k: 'This time',       v: 'First sale' },
    ],
  },
];

// ── "Won with Matesy" — horizontal strip of WhatsApp screenshots (EN: no story videos) ──
const WIN_SHOTS = [
  { person: 'Cüneyt', src: '/assets/wins/cuneyt-1.png' },
  { person: 'Cüneyt', src: '/assets/wins/cuneyt-2.png' },
  { person: 'Cüneyt', src: '/assets/wins/cuneyt-3.png' },
  { person: 'Cüneyt', src: '/assets/wins/cuneyt-4.png' },
  { person: 'Hande', src: '/assets/wins/hande-1.jpg' },
  { person: 'Kerem', src: '/assets/wins/kerem-1.png' },
  { person: 'Kerem', src: '/assets/wins/kerem-2.png' },
  { person: 'Kerem', src: '/assets/wins/kerem-3.png' },
  { person: 'Kerem', src: '/assets/wins/kerem-4.png' },
  { person: 'Kerem', src: '/assets/wins/kerem-5.png' },
  { person: 'Eyüp', src: '/assets/wins/eyup-1.png' },
  { person: 'Eyüp', src: '/assets/wins/eyup-2.png' },
  { person: 'Eyüp', src: '/assets/wins/eyup-3.png' },
  { person: 'Zemin', src: '/assets/wins/zemin-1.png' },
];

function WinsStrip() {
  const scroller = React.useRef(null);
  const [box, setBox] = React.useState(null);
  const scrollByDir = (dir) => { const el = scroller.current; if (el) el.scrollBy({ left: dir * Math.min(el.clientWidth * 0.85, 560), behavior: 'smooth' }); };

  React.useEffect(() => {
    if (box == null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setBox(null);
      else if (e.key === 'ArrowRight') setBox((b) => (b + 1) % WIN_SHOTS.length);
      else if (e.key === 'ArrowLeft') setBox((b) => (b - 1 + WIN_SHOTS.length) % WIN_SHOTS.length);
    };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow; document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [box]);

  const TILE_W = 246, TILE_H = 408;
  const tileBase = { scrollSnapAlign: 'start', flex: '0 0 auto', width: TILE_W };

  return (
    <section style={{ padding: '100px 32px 64px', borderBottom: `1px solid ${C.line}`, background: C.surface, overflow: 'hidden' }}>
      <style>{`.wins-scroller{scrollbar-width:thin;scrollbar-color:${C.line2} transparent;-webkit-overflow-scrolling:touch}.wins-scroller::-webkit-scrollbar{height:8px}.wins-scroller::-webkit-scrollbar-thumb{background:${C.line2};border-radius:99px}.wins-scroller::-webkit-scrollbar-track{background:transparent}@media(max-width:768px){.wins-arrows{display:none!important}}`}</style>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 28, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <Tag>Real Stories</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 14px', letterSpacing: '-0.04em' }}>
              Won with<br /><span style={{ color: C.brand }}>Matesy</span>
            </h2>
            <p style={{ fontSize: 15, color: C.inkSoft, lineHeight: 1.6, margin: 0 }}>
              Real screenshots customers shared with us on WhatsApp — first-sale moments and dashboards. Personal info masked, published with permission. Swipe to see more.
            </p>
          </div>
          <div className="wins-arrows" style={{ display: 'flex', gap: 10 }}>
            {[['‹', -1], ['›', 1]].map(([g, d]) =>
              <button key={d} onClick={() => scrollByDir(d)} aria-label={d < 0 ? 'Previous' : 'Next'} style={{
                width: 46, height: 46, borderRadius: '50%', border: `1px solid ${C.line2}`, background: '#fff', color: C.ink,
                cursor: 'pointer', fontSize: 22, lineHeight: 1, fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                boxShadow: '0 4px 14px rgba(10,9,8,0.06)', transition: 'transform .15s, filter .15s',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(0.98)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }}
              >{g}</button>
            )}
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 2, boxShadow: `inset 30px 0 22px -22px ${C.surface}, inset -30px 0 22px -22px ${C.surface}` }} />
          <div ref={scroller} className="wins-scroller" style={{ display: 'flex', gap: 16, overflowX: 'auto', scrollSnapType: 'x mandatory', paddingBottom: 14 }}>
            {WIN_SHOTS.map((w, i) =>
              <button key={'s' + i} onClick={() => setBox(i)} style={{ ...tileBase, height: TILE_H, position: 'relative', padding: 0, border: `1px solid ${C.line}`, borderRadius: 14, overflow: 'hidden', cursor: 'zoom-in', background: '#0A0908', fontFamily: 'inherit', display: 'block' }}>
                <img src={w.src} alt={`${w.person} — WhatsApp`} loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
                <span style={{ position: 'absolute', top: 10, left: 10, display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(8,7,6,0.62)', backdropFilter: 'blur(6px)', borderRadius: 999, padding: '5px 10px 5px 7px' }}>
                  <span style={{ width: 18, height: 18, borderRadius: 5, background: '#25D366', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="#fff"><path d="M.057 24l1.687-6.163a11.87 11.87 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24z"/></svg>
                  </span>
                  <span style={{ fontSize: 11, fontWeight: 700, color: '#fff', letterSpacing: -0.1 }}>{w.person}</span>
                </span>
                <span style={{ position: 'absolute', bottom: 10, right: 10, width: 28, height: 28, borderRadius: '50%', background: 'rgba(8,7,6,0.55)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.15)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }} aria-hidden>⤢</span>
              </button>
            )}
          </div>
        </div>
      </div>

      {box != null && ReactDOM.createPortal(
        <div onClick={() => setBox(null)} style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(8,7,6,0.86)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
          <button onClick={() => setBox(null)} aria-label="Close" style={{ position: 'absolute', top: 18, right: 18, width: 40, height: 40, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.2)', background: 'rgba(255,255,255,0.08)', color: '#fff', cursor: 'pointer', fontSize: 18, fontFamily: 'inherit' }}>✕</button>
          <button onClick={(e) => { e.stopPropagation(); setBox((b) => (b - 1 + WIN_SHOTS.length) % WIN_SHOTS.length); }} aria-label="Previous" style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', width: 46, height: 46, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.2)', background: 'rgba(255,255,255,0.08)', color: '#fff', cursor: 'pointer', fontSize: 24, fontFamily: 'inherit' }}>‹</button>
          <button onClick={(e) => { e.stopPropagation(); setBox((b) => (b + 1) % WIN_SHOTS.length); }} aria-label="Next" style={{ position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)', width: 46, height: 46, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.2)', background: 'rgba(255,255,255,0.08)', color: '#fff', cursor: 'pointer', fontSize: 24, fontFamily: 'inherit' }}>›</button>
          <div onClick={(e) => e.stopPropagation()} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, maxHeight: '92vh' }}>
            <img src={WIN_SHOTS[box].src} alt={WIN_SHOTS[box].person} style={{ maxWidth: 'min(92vw, 520px)', maxHeight: '82vh', objectFit: 'contain', borderRadius: 12, boxShadow: '0 30px 80px rgba(0,0,0,0.5)' }} />
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#fff', fontSize: 13.5, fontWeight: 600 }}>
              <span style={{ width: 20, height: 20, borderRadius: 6, background: '#25D366', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M.057 24l1.687-6.163a11.87 11.87 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24z"/></svg>
              </span>
              {WIN_SHOTS[box].person} · {box + 1}/{WIN_SHOTS.length}
            </div>
          </div>
        </div>, document.body)}
    </section>
  );
}

function Reviews() {
  return (
    <section style={{ padding: '100px 32px 56px', 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>Real Stories</Tag>
            <h2 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.02, margin: '14px 0 14px', letterSpacing: '-0.04em' }}>
              Customers who made<br/><span style={{ color: C.brand }}>their first sale</span> with Matesy.
            </h2>
            <p style={{ fontSize: 15, color: C.inkSoft, lineHeight: 1.6, margin: 0 }}>
              These are real Matesy customers in the program. Screenshots they shared with us on WhatsApp
              — personal info masked, published with their permission.
            </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' }}>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 }}>First sales keep coming</div>
              <div style={{ fontSize: 12.5, color: C.inkSoft, marginTop: 2 }}>Every member in the program gets one-on-one WhatsApp support throughout.</div>
            </div>
          </div>
          <a href="/en/pricing" style={{ fontSize: 13, fontWeight: 600, color: C.brand, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            Apply to the program <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} screenshots
        </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 ─────────
// ───────── Pricing page: package card ─────────
function PkgCard({ pkg }) {
  const dark = pkg.recommended;
  const cardBg = dark
    ? 'linear-gradient(165deg, #1C1714 0%, #120F0D 46%, #0B0908 100%)'
    : '#fff';
  const subColor = dark ? 'rgba(255,255,255,0.62)' : C.inkSoft;
  const featColor = dark ? 'rgba(255,255,255,0.92)' : C.ink2;
  // Mentorship (seats) package sold out → button shows "sold out", note points to the Starter Kit
  const seatsSoldOut = pkg.seats && SEATS.soldOut;
  const ctaNote = seatsSoldOut ? 'You can start with the Starter Kit right away' : pkg.ctaNote;
  return (
    <div style={{
      position: 'relative', overflow: 'hidden',
      borderRadius: 20, border: dark ? '1px solid rgba(255,255,255,0.10)' : `1px solid ${C.line2}`,
      background: cardBg, display: 'flex', flexDirection: 'column',
      boxShadow: dark ? '0 24px 70px rgba(10,9,8,0.32), inset 0 1px 0 rgba(255,255,255,0.06)' : '0 8px 30px rgba(10,9,8,0.05)',
    }}>
      {dark && <>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg, #FF8754, #FF5A1F)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: -110, right: -70, width: 400, height: 400, background: 'radial-gradient(circle, rgba(255,90,31,0.20) 0%, rgba(255,90,31,0) 68%)', filter: 'blur(18px)', pointerEvents: 'none' }} />
      </>}
      {pkg.badge &&
        <span style={{ position: 'absolute', top: 22, right: 22, zIndex: 2, fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 700, letterSpacing: 0.6, color: '#fff', background: C.brand, padding: '6px 11px', borderRadius: 999 }}>{pkg.badge}</span>
      }

      <div style={{ position: 'relative', padding: '36px 36px 28px' }}>
        <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: 0.2, color: dark ? '#fff' : C.ink, marginBottom: pkg.mantra ? 3 : 6 }}>{pkg.name}</div>
        {pkg.mantra &&
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.1, color: dark ? '#FF8754' : C.brandDeep, marginBottom: 12 }}>{pkg.mantra}</div>}
        <p style={{ fontSize: 13.5, color: subColor, lineHeight: 1.5, margin: '0 0 20px', maxWidth: 360, minHeight: 40 }}>{pkg.tagline}</p>

        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 16 }}>
          {pkg.oldPrice &&
            <span style={{ fontSize: 24, color: dark ? 'rgba(255,255,255,0.4)' : C.inkMute, textDecoration: 'line-through', fontWeight: 600 }}>${pkg.oldPrice}</span>}
          <span className="display" style={{ fontSize: 64, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, color: dark ? '#fff' : C.ink }}>${pkg.price}</span>
          <span style={{ fontSize: 14, color: subColor }}>/ {pkg.unit}</span>
        </div>

        {/* Chip row — reserved on both cards so price / CTA / divider stay aligned */}
        <div style={{ minHeight: 33, marginBottom: 22, display: 'flex', alignItems: 'center' }}>
          {pkg.launchNote ?
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing: 0.3, color: C.brandDeep, background: C.brandSoft, padding: '7px 12px', borderRadius: 999 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.brand }} /> {pkg.launchNote}
            </span> :
          pkg.valueChip ?
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing: 0.3, color: dark ? 'rgba(255,255,255,0.82)' : C.inkSoft, background: dark ? 'rgba(255,255,255,0.06)' : C.surface, border: dark ? '1px solid rgba(255,255,255,0.14)' : `1px solid ${C.line2}`, padding: '6px 12px', borderRadius: 999 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.brand }} /> {pkg.valueChip}
            </span> : null}
        </div>

        {seatsSoldOut ?
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            padding: '15px 22px', borderRadius: 8,
            fontSize: 15, fontWeight: 700, letterSpacing: 0.2, fontFamily: 'inherit',
            background: dark ? 'rgba(255,255,255,0.08)' : '#F3ECE4',
            color: dark ? 'rgba(255,255,255,0.6)' : C.inkMute,
            border: dark ? '1px solid rgba(255,255,255,0.12)' : `1px solid ${C.line2}`,
          }}>
            {SEATS.month} Cohort Full
          </div> :
          <a href={pkg.cta.href}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.05)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }}
            style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            padding: '15px 22px', borderRadius: 8, textDecoration: 'none',
            fontSize: 15, fontWeight: 600, letterSpacing: -0.1, fontFamily: 'inherit',
            transition: 'transform .15s, filter .15s',
            background: dark ? '#fff' : C.brand, color: dark ? C.ink : '#fff',
            boxShadow: dark
              ? '0 1px 2px rgba(10,9,8,0.16), 0 0 0 0.5px rgba(10,9,8,0.10)'
              : '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)',
          }}>
            {pkg.cta.label} <span aria-hidden style={{ fontSize: 16 }}>→</span>
          </a>}
        {ctaNote &&
          <div className="mono" style={{ marginTop: 12, textAlign: 'center', fontSize: 11, letterSpacing: 0.2, color: dark ? 'rgba(255,255,255,0.5)' : C.inkMute }}>{ctaNote}</div>}
      </div>

      <div style={{ position: 'relative', height: 1, background: dark ? 'rgba(255,255,255,0.08)' : C.line }} />

      <div style={{ position: 'relative', padding: '26px 36px 34px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        {pkg.features.map((f, i) =>
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span style={{ width: 24, height: 24, borderRadius: '50%', flexShrink: 0, marginTop: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, background: dark ? 'rgba(255,90,31,0.15)' : C.brandSoft, color: dark ? '#FFB591' : C.brand }}>✓</span>
            <span style={{ fontSize: 14.5, color: featColor, fontWeight: 500, lineHeight: 1.4 }}>{f}</span>
          </div>
        )}
        {pkg.notIncluded.map((f, i) =>
          <div key={'n' + i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span style={{ width: 24, height: 24, borderRadius: '50%', flexShrink: 0, marginTop: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, background: dark ? 'rgba(255,255,255,0.08)' : '#F3ECE4', color: dark ? 'rgba(255,255,255,0.5)' : C.inkMute }}>×</span>
            <span style={{ fontSize: 14, color: dark ? 'rgba(255,255,255,0.5)' : C.inkMute, fontWeight: 500, lineHeight: 1.4 }}>{f}</span>
          </div>
        )}

        {pkg.seats ?
          <div style={{ marginTop: 'auto', paddingTop: 22 }}>
            <div style={{ background: dark ? 'rgba(255,255,255,0.05)' : C.brandSoft, border: dark ? '1px solid rgba(255,255,255,0.12)' : `1px solid ${C.line2}`, borderRadius: 12, padding: '13px 15px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontWeight: 700, color: dark ? '#fff' : C.ink }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: C.brand, boxShadow: '0 0 0 3px rgba(255,90,31,0.28)' }} />
                  {SEATS.month} seats{SEATS.soldOut ? '' : ' · one-on-one'}
                </span>
                <span className="mono" style={{ fontSize: 11.5, fontWeight: 600, color: dark ? '#FF8754' : C.brandDeep }}>{SEATS.soldOut ? 'SOLD OUT' : `${SEATS.total - SEATS.filled} seats left`}</span>
              </div>
              <div style={{ display: 'flex', gap: 5 }}>
                {Array.from({ length: SEATS.total }).map((_, i) =>
                  <span key={i} style={{ flex: 1, height: 7, borderRadius: 999, background: i < SEATS.filled ? C.brand : (dark ? 'rgba(255,255,255,0.14)' : '#fff'), border: i < SEATS.filled ? 'none' : (dark ? 'none' : `1px solid ${C.line2}`) }} />
                )}
              </div>
            </div>
          </div> :
        pkg.openNote ?
          <div className="mono" style={{ marginTop: 'auto', paddingTop: 22, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: C.inkMute }}>
            <span style={{ color: C.pos, fontWeight: 700 }}>✓</span> {pkg.openNote}
          </div> : null}
      </div>
    </div>);
}

function PricingHero() {
  return (
    <section style={{ padding: '72px 32px 8px', textAlign: 'center' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ display: 'inline-block' }}><Tag>Pricing</Tag></div>
        <h1 className="display" style={{ fontSize: 60, color: C.ink, lineHeight: 1.02, margin: '16px 0 18px', letterSpacing: '-0.045em', fontWeight: 600 }}>
          Choose the plan <span style={{ color: C.brand }}>that fits you.</span>
        </h1>
        <p style={{ fontSize: 18, color: C.inkSoft, lineHeight: 1.55, margin: '0 auto', maxWidth: 600 }}>
          Do you want a mentor by your side one-on-one through this journey — or should we just give you everything you need and let you handle the rest? Your call.
        </p>
      </div>
    </section>);
}

function ScarcityBar() {
  const remaining = SEATS.total - SEATS.filled;
  return (
    <section style={{ padding: '18px 32px 0' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, flexWrap: 'wrap',
          background: C.brandSoft, border: `1px solid ${C.line2}`, borderRadius: 14, padding: '14px 24px',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontWeight: 600, fontSize: 14.5, color: C.ink }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: C.brand, boxShadow: '0 0 0 4px rgba(255,90,31,0.18)' }} />
            {SEATS.month} seats are {SEATS.soldOut ? 'full' : 'limited'}
          </span>
          <span style={{ display: 'inline-flex', gap: 6 }}>
            {Array.from({ length: SEATS.total }).map((_, i) =>
              <span key={i} style={{ width: 24, height: 8, borderRadius: 999, background: i < SEATS.filled ? C.brand : '#fff', border: i < SEATS.filled ? 'none' : `1px solid ${C.line2}` }} />
            )}
          </span>
          <span className="mono" style={{ fontSize: 13, color: C.brandDeep, fontWeight: 600, letterSpacing: 0.2 }}>
            {SEATS.soldOut ? 'You can start with the Starter Kit right away' : `${SEATS.filled}/${SEATS.total} filled · ${remaining} seats left`}
          </span>
        </div>
      </div>
    </section>);
}

function PricingSuitability() {
  return (
    <section style={{ padding: '90px 32px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Tag>Who it's for</Tag>
          <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1.05, margin: '14px 0 16px', letterSpacing: '-0.04em' }}>
            Is this program <span style={{ color: C.brand }}>right for you?</span>
          </h2>
          <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 560, marginInline: 'auto' }}>
            Let's be honest — it's not for everyone. If the right column sounds like you, you're in the right place.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div style={{ background: C.surface, border: `1px solid ${C.line2}`, borderRadius: 16, padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{ width: 28, height: 28, borderRadius: 8, background: '#F3D8CF', color: '#A04030', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 15 }}>×</span>
              <div style={{ fontSize: 16, fontWeight: 700, color: C.ink }}>Not a fit</div>
            </div>
            {NOT_SUITABLE.map((t, i) =>
              <div key={i} style={{ display: 'flex', gap: 11, padding: '13px 0', borderTop: i ? `1px dashed ${C.line2}` : 'none' }}>
                <span style={{ color: '#A04030', flexShrink: 0, fontWeight: 700 }}>×</span>
                <span style={{ fontSize: 14.5, color: C.ink2, lineHeight: 1.55 }}>{t}</span>
              </div>
            )}
          </div>
          <div style={{ background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 16, padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{ width: 28, height: 28, borderRadius: 8, background: C.brandSoft, color: C.brandDeep, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 15 }}>✓</span>
              <div style={{ fontSize: 16, fontWeight: 700, color: C.ink }}>A fit</div>
            </div>
            {SUITABLE.map((t, i) =>
              <div key={i} style={{ display: 'flex', gap: 11, padding: '13px 0', borderTop: i ? `1px dashed ${C.line2}` : 'none' }}>
                <span style={{ color: C.brand, flexShrink: 0, fontWeight: 700 }}>→</span>
                <span style={{ fontSize: 14.5, color: C.ink2, lineHeight: 1.55 }}>{t}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);
}

function PackageCards() {
  return (
    <section style={{ padding: '40px 32px 90px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          {PACKAGES.map((p) => <PkgCard key={p.id} pkg={p} />)}
        </div>
        <p className="mono" style={{ textAlign: 'center', fontSize: 11, color: C.inkMute, marginTop: 24, letterSpacing: 0.3 }}>
          Both plans are one-time payments · start whenever you’re ready
        </p>
      </div>
    </section>);
}

// ───────── Pricing page: interactive ROI calculator ─────────
function ROICalculator() {
  const COST = 14.5;             // Comfort Colors 1717 production + shipping
  const COMMISSION_RATE = 0.10;  // Etsy US marketplace fee
  const [price, setPrice] = React.useState(22.5); // average sale price
  const sale = Math.max(0, Number(price) || 0);
  const commission = sale * COMMISSION_RATE;
  const net = sale - commission - COST;
  const netBE = Math.max(0.5, net);
  const liteBE = net > 0 ? Math.ceil(397 / netBE) : null;
  const premBE = net > 0 ? Math.ceil(990 / netBE) : null;
  const m = (n) => '$' + n.toFixed(2);

  const row = (label, val, opts) => {
    opts = opts || {};
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, padding: opts.net ? '14px 0 0' : '9px 0', borderTop: opts.net ? `1px solid ${C.line2}` : 'none', marginTop: opts.net ? 6 : 0 }}>
        <span style={{ fontSize: opts.net ? 15 : 13.5, fontWeight: opts.net ? 700 : 500, color: opts.net ? C.ink : C.inkSoft }}>{label}</span>
        <span className="mono" style={{ fontSize: opts.net ? 19 : 14, fontWeight: opts.net ? 700 : 600, color: opts.net ? C.brand : (opts.minus ? '#A8503F' : C.ink), whiteSpace: 'nowrap' }}>{val}</span>
      </div>);
  };

  const tile = (name, packagePrice, be, dark) =>
    <div style={{
      position: 'relative', overflow: 'hidden', borderRadius: 14, padding: '24px 26px',
      border: dark ? '1px solid rgba(255,255,255,0.10)' : `1px solid ${C.line2}`,
      background: dark ? 'linear-gradient(165deg, #1C1714 0%, #0B0908 100%)' : '#fff',
      boxShadow: dark ? 'inset 0 1px 0 rgba(255,255,255,0.05)' : 'none',
    }}>
      {dark && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg, #FF8754, #FF5A1F)' }} />}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <span style={{ fontSize: 14.5, fontWeight: 700, color: dark ? '#fff' : C.ink }}>{name}</span>
        <span className="mono" style={{ fontSize: 12.5, color: dark ? 'rgba(255,255,255,0.55)' : C.inkMute }}>${packagePrice}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 9 }}>
        <span className="display" style={{ fontSize: 56, fontWeight: 700, color: C.brand, letterSpacing: '-0.04em', lineHeight: 1 }}>{be == null ? '—' : be}</span>
        <span style={{ fontSize: 18, fontWeight: 600, color: dark ? 'rgba(255,255,255,0.85)' : C.inkSoft }}>sales</span>
      </div>
      <div style={{ fontSize: 13.5, color: dark ? 'rgba(255,255,255,0.6)' : C.inkSoft, marginTop: 10, lineHeight: 1.45 }}>
        Sales to cover the <strong style={{ color: dark ? '#fff' : C.ink, fontWeight: 600 }}>${packagePrice}</strong> plan.
      </div>
    </div>;

  return (
    <section style={{ padding: '90px 32px', background: C.surface, borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Tag>ROI Calculator</Tag>
          <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1.05, margin: '14px 0 16px', letterSpacing: '-0.04em' }}>
            How many sales until <span style={{ color: C.brand }}>Matesy pays for itself?</span>
          </h2>
          <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.55, margin: 0, maxWidth: 560, marginInline: 'auto' }}>
            Adjust the average sale price; your per-item net profit and each plan's break-even update instantly.
          </p>
        </div>

        <div style={{ background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 20, padding: 32, boxShadow: '0 8px 30px rgba(10,9,8,0.05)' }}>
          {/* Net profit breakdown */}
          <div className="mono" style={{ fontSize: 11, color: C.inkMute, textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600, marginBottom: 18 }}>How per-item net profit is calculated</div>

          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16 }}>
            <span style={{ fontSize: 15, fontWeight: 600, color: C.ink }}>Average sale price <span style={{ color: C.inkMute, fontWeight: 500 }}>· t-shirt</span></span>
            <span className="mono" style={{ fontSize: 26, fontWeight: 600, color: C.ink, letterSpacing: -0.5 }}>{m(sale)}</span>
          </div>
          <input type="range" min="18" max="40" step="0.5" value={price} onChange={(e) => setPrice(e.target.value)} style={{ width: '100%', accentColor: 'var(--brand)', marginTop: 14, marginBottom: 12 }} />

          {row('Etsy US marketplace fee (10%)', '−' + m(commission), { minus: true })}
          {row('Production + shipping · Comfort Colors 1717', '−' + m(COST), { minus: true })}
          {row('Net profit per item', m(net), { net: true })}

          <div style={{ height: 1, background: C.line, margin: '30px 0' }} />

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {tile('Starter Kit', 397, liteBE, false)}
            {tile('Mentorship Program', 990, premBE, true)}
          </div>
        </div>
        <p className="mono" style={{ fontSize: 11, color: C.inkMute, marginTop: 18, textAlign: 'center', lineHeight: 1.5 }}>
          Figures are estimates/examples; actual results vary by product, sale price and volume.
        </p>
      </div>
    </section>);
}

// ───────── Pricing page: Lite vs Premium comparison ─────────
function CompareTable() {
  const cell = (v) => {
    if (v === true) return <span style={{ width: 24, height: 24, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, background: C.brandSoft, color: C.brand }}>✓</span>;
    if (v === false) return <span style={{ width: 24, height: 24, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, background: '#F3ECE4', color: C.inkMute }}>×</span>;
    return <span style={{ fontSize: 13.5, color: C.ink2, fontWeight: 500, lineHeight: 1.35 }}>{v}</span>;
  };
  return (
    <section style={{ padding: '90px 32px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Tag>Comparison</Tag>
          <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1.05, margin: '14px 0 0', letterSpacing: '-0.04em' }}>
            Lite or <span style={{ color: C.brand }}>Premium?</span>
          </h2>
        </div>
        <div style={{ border: `1px solid ${C.line2}`, borderRadius: 16, overflow: 'hidden', background: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', background: C.surface, borderBottom: `1px solid ${C.line}` }}>
            <div style={{ flex: '1.5', padding: '16px 20px', fontSize: 13, fontWeight: 700, color: C.ink }}>Feature</div>
            <div style={{ flex: '1', padding: '16px 12px', textAlign: 'center', fontSize: 14, fontWeight: 700, color: C.ink }}>Lite</div>
            <div style={{ flex: '1', padding: '16px 12px', textAlign: 'center', fontSize: 14, fontWeight: 700, color: C.brand }}>Premium</div>
          </div>
          {PACKAGE_COMPARE.map((r, i) =>
            <div key={i} style={{ display: 'flex', alignItems: 'stretch', borderTop: i === 0 ? 'none' : `1px solid ${C.line}` }}>
              <div style={{ flex: '1.5', padding: '15px 20px', fontSize: 14, fontWeight: 500, color: C.ink, display: 'flex', alignItems: 'center' }}>{r.feature}</div>
              <div style={{ flex: '1', padding: '15px 12px', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>{cell(r.lite)}</div>
              <div style={{ flex: '1', padding: '15px 12px', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center', background: 'rgba(255,90,31,0.035)' }}>{cell(r.premium)}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ───────── Pricing page: value justification ─────────
function ValueJustification() {
  const items = [
    ['US company formation', '$400 – $750'],
    ['Business bank account', '$200 – $400'],
    ['Etsy US shop launch', '$250 – $500'],
    ['6-month Matesy subscription (30,000 credits)', '~$600 value'],
  ];
  return (
    <section style={{ padding: '56px 32px 90px', background: C.surface, borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Tag>Why it's worth it</Tag>
          <h2 className="display" style={{ fontSize: 44, color: C.ink, lineHeight: 1.08, margin: '14px 0 16px', letterSpacing: '-0.04em' }}>
            Buying it piece by piece <span style={{ color: C.brand }}>costs far more.</span>
          </h2>
          <p style={{ fontSize: 16, color: C.inkSoft, lineHeight: 1.6, margin: 0 }}>
            Estimated market prices if you bought the Mentorship Program services separately:
          </p>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 16, padding: '8px 24px' }}>
          {items.map(([label, val], i) =>
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, padding: '16px 0', borderTop: i === 0 ? 'none' : `1px solid ${C.line}` }}>
              <span style={{ fontSize: 15, fontWeight: 500, color: C.ink }}>{label}</span>
              <span className="mono" style={{ fontSize: 15, fontWeight: 600, color: C.inkSoft, whiteSpace: 'nowrap' }}>{val}</span>
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, padding: '18px 0', borderTop: `2px solid ${C.ink}` }}>
            <span style={{ fontSize: 15, fontWeight: 700, color: C.ink }}>Total market value</span>
            <span className="mono" style={{ fontSize: 17, fontWeight: 700, color: C.ink, whiteSpace: 'nowrap' }}>$1,450 – $2,250+</span>
          </div>
        </div>
        <p style={{ fontSize: 16, color: C.ink2, lineHeight: 1.65, margin: '24px 0 0', textAlign: 'center' }}>
          With the Mentorship Program all of this is done for you for <strong>$990</strong>. With the Starter Kit you follow the same roadmap yourself via videos + the Skool community for <strong>$397</strong>.
        </p>
      </div>
    </section>);
}

// ───────── Pricing page: pricing-specific FAQ ─────────
function PricingFAQ() {
  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>FAQ</Tag>
          <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1, margin: '14px 0 24px' }}>
            Pricing questions
          </h2>
          <p style={{ fontSize: 14.5, color: C.inkSoft, lineHeight: 1.6 }}>
            For anything else, email <a className="underline-link" style={{ color: C.brand, textDecoration: 'none', fontWeight: 600 }}>support@matesy.co</a> — we reply within 24 hours.
          </p>
        </div>
        <div>
          {PRICING_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>);
}

// ───────── Pricing page composition ─────────
function PricingPage() {
  return (
    <div>
      <PricingHero />
      <PackageCards />
      <ROICalculator />
      <WinsStrip />
      <ValueJustification />
      <PricingSuitability />
      <PricingFAQ />
      <FinalCTA />
    </div>);
}

// ───────── 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>FAQ</Tag>
          <h2 className="display" style={{ fontSize: 48, color: C.ink, lineHeight: 1, margin: '14px 0 24px' }}>
            Got questions?
          </h2>
          <p style={{ fontSize: 14.5, color: C.inkSoft, lineHeight: 1.6 }}>
            For other questions, write to <a className="underline-link" style={{ color: C.brand, textDecoration: 'none', fontWeight: 600 }}>support@matesy.co</a> — we reply within 24 hours.
          </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() {
  const remaining = SEATS.total - SEATS.filled;
  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 Founder
                </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'
              }}>
                This program isn't about sending 100 hours of video and saying "go figure it out". <strong style={{ fontWeight: 700 }}>You don't need that!</strong>
              </p>
              <p style={{
                fontSize: 16, color: C.inkSoft, lineHeight: 1.6, fontWeight: 500,
                margin: 0, letterSpacing: '-0.005em'
              }}>
                You need a few hours of core training, a Mentor for when you're stuck, and most importantly a system to take action regularly. <strong style={{ color: C.ink, fontWeight: 700 }}>That's the real value we deliver here.</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)' }} />
              {SEATS.month.toUpperCase()} QUOTA · {SEATS.soldOut ? 'SOLD OUT' : `${remaining} SEATS LEFT`}
            </div>
            <h2 className="display" style={{
              fontSize: 48, color: C.ink, lineHeight: 1.05, margin: '0 0 16px',
              letterSpacing: '-0.035em', fontWeight: 600
            }}>
              {SEATS.soldOut ? <>Start <span style={{ color: C.brand }}>today.</span></> : <>Be the next <span style={{ color: C.brand }}>one.</span></>}
            </h2>
            <p style={{
              fontSize: 15.5, color: C.inkSoft, lineHeight: 1.55,
              margin: '0 0 28px', maxWidth: 460
            }}>
              {SEATS.soldOut
                ? `${SEATS.month} one-on-one mentorship is full. If you don't want to wait, start with the Matesy Starter Kit today — or leave an application for next month.`
                : "Review the application doc — if we share the same vision, apply and we'll set up a call."}
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
              {SEATS.soldOut
                ? <BrandBtn size="lg" href="https://buy.stripe.com/fZu6oH9MU2ZydqAbV09Ve0q">
                    Start with the Starter Kit <span aria-hidden>→</span>
                  </BrandBtn>
                : <BrandBtn size="lg" href="https://tally.so/r/obRzrN">
                    Open Application Form <span aria-hidden>→</span>
                  </BrandBtn>}
              {SEATS.soldOut &&
                <a href="https://tally.so/r/obRzrN" 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}
                >
                  Apply for <span style={{ borderBottom: `1px solid ${C.line2}` }}>next month</span>
                </a>}
              <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}
              >
                Questions: <span style={{ borderBottom: `1px solid ${C.line2}` }}>support@matesy.co</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Footer — minimal compact strip ─────────
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 }}>
            © 2025
          </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="Built for Print-on-Demand Sellers">
        Most POD sellers guess when listing products,
        while our customers <Hi>move with data</Hi> and preparing
        listings with Matesy takes <Hi>minutes, not hours!</Hi>
      </Interstitial>
      <WinsStrip />
      <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>);

}

// ───────── Pricing page shell — reuses Nav/Footer + theme system ─────────
function PricingPageApp() {
  const [t] = 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 />
      <PricingPage />
      <Footer />
    </div>);
}

// ═════════ Lead magnet page — email capture for Trends access ═════════
function LeadPage() {
  const TRENDS_URL = 'https://app.matesy.co/trends';
  const TRENDING = [
    { title: 'New York Knicks NBA Champions', cat: 'sports', catBg: '#E5F4DD', catFg: '#3F8B23', src: 'Google News · US', score: 100, pod: 10 },
    { title: 'FIFA World Cup 2026', cat: 'sports', catBg: '#E5F4DD', catFg: '#3F8B23', src: 'Amazon · US', score: 90, pod: 9 },
    { title: 'Juneteenth · Black Women Tee', cat: 'holiday', catBg: '#FFF1E0', catFg: '#B07515', src: 'Amazon · US', score: 80, pod: 8 },
    { title: 'Father’s Day · Grill Dad', cat: 'holiday', catBg: '#FFF1E0', catFg: '#B07515', src: 'Popculture · US', score: 70, pod: 7 },
  ];
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState(() => {
    try { return new URLSearchParams(window.location.search).get('email') || ''; } catch (e) { return ''; }
  });
  const [err, setErr] = React.useState('');

  // --- Auto demo: cursor moves to a trend, clicks, detail card opens (loop) ---
  const DEMO = {
    title: 'Stars react to Knicks NBA Finals win: Timothée disses Oscars, Cardi B screams',
    score: 90, pod: 9, region: 'US', source: 'RSS headline',
    desc: 'The New York Knicks won the 2026 NBA Finals, ending a 50+ year drought since 1973. The whole city poured into the streets — these championship tees are a "keep forever" buy. A flash opportunity for POD sellers.',
  };
  const MARKETS = [
    { n: 'Etsy', c: '#E0561E', bg: '#FFF4EC', bd: '#F6DBC9' },
    { n: 'Amazon', c: '#B27A12', bg: '#FFFBEF', bd: '#F0E6C8' },
    { n: 'Redbubble', c: '#D8285C', bg: '#FFF0F3', bd: '#F6D3DD' },
    { n: 'TeePublic', c: '#2A4FD6', bg: '#EEF1FE', bd: '#D5DCFA' },
    { n: 'Zazzle', c: '#159B9B', bg: '#ECFAFA', bd: '#CDEEEE' },
    { n: 'Society6', c: '#1F8A4C', bg: '#ECF7EF', bd: '#CFE9D8' },
  ];
  const cardRef = React.useRef(null);
  const rowRefs = React.useRef([]);
  const TARGET = 0;
  const [cursor, setCursor] = React.useState({ x: 280, y: 360, on: false });
  const [pressing, setPressing] = React.useState(false);
  const [hoverIdx, setHoverIdx] = React.useState(-1);
  const [detail, setDetail] = React.useState(false);
  const [clickK, setClickK] = React.useState(0);

  React.useEffect(() => {
    const mq = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');
    if (mq && mq.matches) return;
    let alive = true; const timers = [];
    const wait = (ms) => new Promise((res) => { const id = setTimeout(res, ms); timers.push(id); });
    const measure = () => {
      const c = cardRef.current, r = rowRefs.current[TARGET];
      if (!c || !r) return null;
      const cr = c.getBoundingClientRect(), rr = r.getBoundingClientRect();
      return { x: rr.left - cr.left + rr.width * 0.34, y: rr.top - cr.top + rr.height / 2 };
    };
    const park = () => {
      const c = cardRef.current;
      if (!c) return { x: 280, y: 360 };
      const cr = c.getBoundingClientRect();
      return { x: cr.width - 52, y: cr.height - 26 };
    };
    (async () => {
      await wait(700);
      while (alive) {
        const p = park(); if (!alive) break;
        setDetail(false); setHoverIdx(-1);
        setCursor({ x: p.x, y: p.y, on: true });
        await wait(1000);
        const t = measure();
        if (t && alive) setCursor({ x: t.x, y: t.y, on: true });
        await wait(1150); if (!alive) break;
        setHoverIdx(TARGET);
        await wait(350); if (!alive) break;
        setPressing(true); setClickK((k) => k + 1);
        await wait(180); setPressing(false);
        await wait(150); if (!alive) break;
        setDetail(true);
        const p2 = park(); setCursor({ x: p2.x, y: p2.y, on: true });
        await wait(4600); if (!alive) break;
        setDetail(false); setHoverIdx(-1);
        await wait(1200);
      }
    })();
    return () => { alive = false; timers.forEach(clearTimeout); };
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim())) { setErr('Enter a valid email address.'); return; }
    setErr('');
    try { localStorage.setItem('matesyLead', JSON.stringify({ name: name.trim(), email: email.trim(), at: Date.now() })); } catch (e) {}
    // TODO: send email to backend (Supabase/Tally) — redirecting directly for now
    window.location.href = TRENDS_URL;
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <header style={{ padding: '24px 32px', display: 'flex', justifyContent: 'center' }}>
        <Logo size={26} />
      </header>

      <section style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '20px 32px 64px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', width: '100%', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          {/* LEFT — copy + form */}
          <div>
            <div style={{ display: 'inline-block' }}><Tag>Matesy Trends · Free Access</Tag></div>
            <h1 className="display" style={{ fontSize: 52, color: C.ink, lineHeight: 1.04, margin: '16px 0 16px', letterSpacing: '-0.04em', fontWeight: 600 }}>
              What’s <span style={{ color: C.brand }}>trending worldwide</span> right now?<br />See it in one click with Matesy.
            </h1>
            <p style={{ fontSize: 17, color: C.inkSoft, lineHeight: 1.55, margin: '0 0 22px', maxWidth: 460 }}>
              Drop your email to test the Matesy Trends feature and join our newsletter packed with tips to succeed in this business model.
            </p>
            <form onSubmit={submit}>
              <div style={{ background: 'linear-gradient(180deg,#FFF7F2,#ffffff 55%)', border: '1px solid #F2D5C6', borderRadius: 16, padding: 24, boxShadow: '0 24px 54px rgba(255,90,31,0.18), 0 6px 18px rgba(10,9,8,0.06)' }}>
                <div style={{ fontSize: 17, fontWeight: 700, color: C.ink, marginBottom: 3, letterSpacing: -0.2 }}>Drop your email, join the list</div>
                <div style={{ fontSize: 13, color: C.inkSoft, marginBottom: 16, lineHeight: 1.4 }}>Takes 30 seconds — you’ll be redirected to Matesy Trends instantly.</div>
                <input type="text" value={name} onChange={(e) => { setName(e.target.value); setErr(''); }} placeholder="Your name" style={{
                  width: '100%', border: `1px solid ${C.line2}`, borderRadius: 10, padding: '15px 16px', marginBottom: 10,
                  fontSize: 15, fontFamily: 'inherit', color: C.ink, outline: 'none', background: '#fff', transition: 'border-color .15s, box-shadow .15s',
                }}
                  onFocus={(e) => { e.target.style.borderColor = C.brand; e.target.style.boxShadow = `0 0 0 3px ${C.brandSoft}`; }}
                  onBlur={(e) => { e.target.style.borderColor = C.line2; e.target.style.boxShadow = 'none'; }} />
                <input type="email" value={email} onChange={(e) => { setEmail(e.target.value); setErr(''); }} placeholder="Your email" style={{
                  width: '100%', border: `1px solid ${C.line2}`, borderRadius: 10, padding: '15px 16px', marginBottom: 12,
                  fontSize: 15, fontFamily: 'inherit', color: C.ink, outline: 'none', background: '#fff', transition: 'border-color .15s, box-shadow .15s',
                }}
                  onFocus={(e) => { e.target.style.borderColor = C.brand; e.target.style.boxShadow = `0 0 0 3px ${C.brandSoft}`; }}
                  onBlur={(e) => { e.target.style.borderColor = C.line2; e.target.style.boxShadow = 'none'; }} />
                <button type="submit" style={{
                  width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, background: C.ink, color: '#fff',
                  border: 'none', cursor: 'pointer', borderRadius: 10, padding: '16px 24px', fontSize: 16, fontWeight: 700,
                  letterSpacing: -0.1, fontFamily: 'inherit', whiteSpace: 'nowrap', transition: 'transform .15s, filter .15s',
                  boxShadow: '0 10px 26px rgba(10,9,8,0.30), inset 0 1px 0 rgba(255,255,255,0.14)',
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.15)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }}
                >Join Free <span aria-hidden style={{ fontSize: 17 }}>→</span></button>
                {err && <div style={{ color: '#A8503F', fontSize: 13, marginTop: 10, fontWeight: 500 }}>{err}</div>}
                <p className="mono" style={{ fontSize: 10.5, color: C.inkMute, marginTop: 14, letterSpacing: 0.2, lineHeight: 1.6 }}>
                  You join our free email list. No spam · unsubscribe anytime.
                </p>
              </div>
            </form>
          </div>

          {/* RIGHT — Trends preview (reflects the real Trends feature) */}
          <div>
            <div ref={cardRef} style={{ position: 'relative', background: '#fff', border: `1px solid ${C.line2}`, borderRadius: 18, padding: 20, boxShadow: '0 24px 60px rgba(10,9,8,0.10)', overflow: 'hidden' }}>
              <style>{`@keyframes mtsRipple{0%{transform:scale(0);opacity:.5}100%{transform:scale(2.6);opacity:0}}`}</style>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 30, height: 30, borderRadius: 8, background: C.brand, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9" /><line x1="3" y1="12" x2="21" y2="12" /><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z" /></svg>
                  </span>
                  <span style={{ fontSize: 15, fontWeight: 700, color: C.ink }}>Trends</span>
                </div>
                <span className="mono" style={{ fontSize: 10.5, color: C.brand, background: C.brandSoft, padding: '4px 9px', borderRadius: 999, fontWeight: 600 }}>LIVE · 24H</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {TRENDING.map((r, i) =>
                  <div key={i} ref={(el) => (rowRefs.current[i] = el)} style={{ border: `1px solid ${hoverIdx === i ? C.brand : C.line}`, borderRadius: 12, padding: '12px 14px', background: hoverIdx === i ? C.brandSoft : '#fff', transition: 'background .2s, border-color .2s' }}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
                      <span style={{ fontSize: 13.5, fontWeight: 600, color: C.ink, lineHeight: 1.3 }}>{r.title}</span>
                      <span className="mono" style={{ flexShrink: 0, fontSize: 11.5, fontWeight: 700, padding: '3px 8px', borderRadius: 6, background: r.score >= 90 ? C.brandSoft : '#FFF4E0', color: r.score >= 90 ? C.brandDeep : '#B07515' }}>↗ {r.score}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontSize: 10.5, fontWeight: 600, padding: '3px 8px', borderRadius: 6, background: r.catBg, color: r.catFg }}>{r.cat}</span>
                      <span className="mono" style={{ fontSize: 10.5, color: C.inkMute }}>{r.src}</span>
                      <span style={{ flex: 1 }} />
                      <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: C.ink }}>POD {r.pod}</span>
                    </div>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: `1px solid ${C.line}`, fontSize: 12, color: C.inkMute, textAlign: 'center' }}>
                65+ live trends · refreshed daily
              </div>

              {/* DETAIL overlay (opens when the cursor clicks) */}
              <div style={{ position: 'absolute', inset: 0, background: '#fff', borderRadius: 18, padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 11, opacity: detail ? 1 : 0, transform: detail ? 'scale(1)' : 'scale(0.97)', transition: 'opacity .28s ease, transform .28s ease', pointerEvents: 'none', overflow: 'hidden', zIndex: 5 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                  <span style={{ fontSize: 14, fontWeight: 700, color: C.ink, lineHeight: 1.25 }}>{DEMO.title.slice(0, 64)}…</span>
                  <span style={{ flexShrink: 0, color: C.inkMute, fontSize: 18, lineHeight: 1 }}>×</span>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <span className="mono" style={{ fontSize: 10.5, fontWeight: 700, padding: '4px 8px', borderRadius: 999, background: C.brandSoft, color: C.brandDeep }}>↗ {DEMO.score}</span>
                  <span style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 8px', borderRadius: 999, border: `1px solid ${C.line2}`, color: C.ink2 }}>POD {DEMO.pod}</span>
                  <span style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 8px', borderRadius: 999, background: '#E5F4DD', color: '#3F8B23' }}>sports</span>
                  <span style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 8px', borderRadius: 999, border: `1px solid ${C.line2}`, color: C.ink2 }}>{DEMO.region}</span>
                  <span className="mono" style={{ fontSize: 10.5, fontWeight: 600, padding: '4px 8px', borderRadius: 999, border: `1px solid ${C.line2}`, color: C.inkMute }}>{DEMO.source}</span>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <span className="mono" style={{ fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 6, border: `1px solid ${C.line2}`, color: C.inkMute }}>Demand: viral</span>
                  <span className="mono" style={{ fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 6, border: '1px solid #E8C36B', background: '#FFFBF0', color: '#B07515' }}>Copyright Risk: Med</span>
                  <span className="mono" style={{ fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 6, border: `1px solid ${C.line2}`, color: C.inkMute }}>Urgency: flash</span>
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: `linear-gradient(95deg, ${C.brand}, ${C.brandDeep})`, color: '#fff', borderRadius: 10, padding: '11px 16px', fontSize: 13.5, fontWeight: 700, boxShadow: '0 8px 20px rgba(255,90,31,0.28)' }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z" /></svg>
                  Create Design
                </div>
                <p style={{ fontSize: 11.5, color: C.inkSoft, lineHeight: 1.5, margin: 0 }}>{DEMO.desc}</p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, marginTop: 'auto' }}>
                  {MARKETS.map((m, i) =>
                    <span key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, fontSize: 11, fontWeight: 600, padding: '7px 4px', borderRadius: 8, background: m.bg, border: `1px solid ${m.bd}`, color: m.c }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={m.c} strokeWidth="2" strokeLinejoin="round"><path d="M3 9h18l-1.4 11H4.4z" /><path d="M8 9V6a4 4 0 0 1 8 0v3" /></svg>
                      {m.n}
                    </span>
                  )}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 8, borderTop: `1px solid ${C.line}`, fontSize: 10.5, color: C.inkMute }} className="mono">
                  <span>↗ View source</span>
                  <span>Added: Jun 15, 2026</span>
                </div>
              </div>

              {/* CURSOR */}
              <div style={{ position: 'absolute', top: 0, left: 0, transform: `translate(${cursor.x}px, ${cursor.y}px) scale(${pressing ? 0.82 : 1})`, transition: 'transform 1.05s cubic-bezier(.55,.06,.22,1)', opacity: cursor.on ? 1 : 0, pointerEvents: 'none', zIndex: 9, willChange: 'transform' }}>
                {clickK > 0 && <span key={clickK} style={{ position: 'absolute', left: -8, top: -8, width: 26, height: 26, borderRadius: '50%', background: 'rgba(255,90,31,0.45)', animation: 'mtsRipple .55s ease-out', pointerEvents: 'none' }} />}
                <svg width="22" height="22" viewBox="0 0 24 24" style={{ position: 'relative', filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.3))' }}><path d="M4 2 L4 19 L8.6 14.4 L11.8 21 L14.4 19.8 L11.2 13.3 L17.6 13.3 Z" fill="#16110e" stroke="#fff" strokeWidth="1.1" strokeLinejoin="round" /></svg>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>);
}

function LeadPageApp() {
  const [t] = 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 <LeadPage />;
}

const __matesyRoot = ReactDOM.createRoot(document.getElementById('root'));
__matesyRoot.render(
  window.__MATESY_PAGE === 'lead' ? <LeadPageApp /> :
  window.__MATESY_PAGE === 'pricing' ? <PricingPageApp /> : <App />);