/* global React */
// Sozee hero — shared bits: brand tokens helpers, nav, buttons, gen data, primitives.

const INK = '#1C1B1B';
const CREAM = '#FCF8F8';
const PULSE = 'linear-gradient(135deg, #6813D4 0%, #813CED 100%)';

// Curated, diverse, tasteful generation set used across all concepts.
const GENS = [
  { src: 'assets/gen/editorial-glamour.png', scene: 'Editorial · bed',       tag: 'Photoshoot' },
  { src: 'assets/gen/golden-hour.png',        scene: 'Rooftop · string lights', tag: 'Photoshoot' },
  { src: 'assets/gen/streetwear-city.png',    scene: 'Café · hoodie',         tag: 'Photoshoot' },
  { src: 'assets/gen/yacht-sunset.png',       scene: 'Poolside · midday',     tag: 'Reel' },
  { src: 'assets/gen/cafe-rain.png',          scene: 'Morning light',         tag: 'Photoshoot' },
  { src: 'assets/gen/car-selfie.png',         scene: 'Bed · grey tee',        tag: 'Reel' },
  { src: 'assets/gen/lifestyle-lounge.png',   scene: 'Studio floor',          tag: 'Photoshoot' },
  { src: 'assets/gen/beach-pool.png',         scene: 'Pool · lounge',         tag: 'Reel' },
  { src: 'assets/gen/bedroom-boudoir.png',    scene: 'Boudoir · black',       tag: 'Photoshoot' },
];

// ---- text helpers ----
const GradText = ({ children, style }) => (
  <span style={{
    background: PULSE, WebkitBackgroundClip: 'text', backgroundClip: 'text',
    WebkitTextFillColor: 'transparent', color: 'transparent', ...style,
  }}>{children}</span>
);

const Eyebrow = ({ children, dark = false, style }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    font: 'var(--type-eyebrow)', fontWeight: 700, fontSize: 11,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    color: dark ? 'rgba(255,255,255,0.72)' : 'var(--text-tertiary)', ...style,
  }}>{children}</span>
);

const Sparkle = ({ size = 13, color = '#813CED' }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
    <path d="M8 0.5l1.6 4.7a3 3 0 0 0 1.9 1.9l4.7 1.6-4.7 1.6a3 3 0 0 0-1.9 1.9L8 16.5l-1.6-4.7a3 3 0 0 0-1.9-1.9L-0.2 8.3l4.7-1.6a3 3 0 0 0 1.9-1.9L8 0.5z" fill={color}/>
  </svg>
);

// ---- buttons ----
const CTAButton = ({ children = 'TRY IT FREE', size = 'md', style, withArrow = true }) => {
  const dims = size === 'lg'
    ? { height: 56, padding: '0 30px', fontSize: 15 }
    : size === 'sm'
    ? { height: 42, padding: '0 20px', fontSize: 13 }
    : { height: 50, padding: '0 26px', fontSize: 14 };
  return (
    <button onClick={(e) => window.szCTA && window.szCTA(e.currentTarget.textContent)} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap',
      ...dims, border: 0, cursor: 'pointer', borderRadius: 9999,
      background: PULSE, color: '#fff',
      fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
      boxShadow: '0 8px 20px -4px rgba(104,19,212,0.40)', ...style,
    }}>
      {children}
      {withArrow && (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M3 8h9M8.5 4l4 4-4 4" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )}
    </button>
  );
};

const GhostButton = ({ children, dark = false, size = 'md', style, icon }) => {
  const dims = size === 'lg' ? { height: 56, padding: '0 24px', fontSize: 15 } : { height: 50, padding: '0 20px', fontSize: 14 };
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 9, ...dims,
      borderRadius: 9999, cursor: 'pointer',
      background: dark ? 'rgba(255,255,255,0.08)' : 'transparent',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.22)' : 'var(--border-soft)'}`,
      color: dark ? '#fff' : 'var(--text-primary)',
      fontWeight: 600, letterSpacing: '0.01em', ...style,
    }}>
      {icon}{children}
    </button>
  );
};

// ---- marketing top nav ----
const NavLink = ({ children }) => (
  <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-secondary)', cursor: 'pointer' }}>{children}</span>
);

const MarketingNav = ({ dark = false, compact = false }) => {
  const fg = dark ? '#fff' : INK;
  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: compact ? '0 24px' : '0 56px', height: compact ? 60 : 74,
      borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'var(--border-hairline)'}`,
      flexShrink: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
        <Wordmark dark={dark} h={20} />
        {!compact && (
          <div style={{ display: 'flex', gap: 26 }}>
            {['Features', 'Explore', 'Pricing', 'Guides'].map(l => (
              <span key={l} style={{ fontSize: 14, fontWeight: 500, color: dark ? 'rgba(255,255,255,0.75)' : 'var(--text-secondary)', cursor: 'pointer' }}>{l}</span>
            ))}
          </div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: compact ? 12 : 18 }}>
        {!compact && <span style={{ fontSize: 14, fontWeight: 600, color: fg, cursor: 'pointer' }}>Log in</span>}
        {compact
          ? <Burger color={fg} />
          : <CTAButton size="sm" withArrow={false}>Try it free</CTAButton>}
      </div>
    </nav>
  );
};

const Burger = ({ color = INK }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 5, padding: 4, cursor: 'pointer' }}>
    {[0, 1].map(i => <span key={i} style={{ width: 22, height: 2, borderRadius: 2, background: color }} />)}
  </div>
);

// Sozee wordmark — icon + type lockup (icon is a PNG; type is set in Inter to match).
const Wordmark = ({ dark = false, h = 22 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
    <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ height: h * 1.2, width: 'auto', objectFit: 'contain',
      filter: dark ? 'brightness(0) invert(1)' : 'none' }} />
    <span style={{ fontSize: h, fontWeight: 800, letterSpacing: '-0.03em', color: dark ? '#fff' : INK }}>sozee</span>
  </div>
);

// ---- trust row: stacked avatars + line ----
const TrustRow = ({ dark = false, count = '12,000+' }) => {
  const faces = [GENS[5].src, GENS[1].src, GENS[3].src, GENS[7].src];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ display: 'flex' }}>
        {faces.map((s, i) => (
          <div key={i} style={{
            width: 30, height: 30, borderRadius: '50%', overflow: 'hidden',
            border: `2px solid ${dark ? '#1C1B1B' : CREAM}`, marginLeft: i ? -9 : 0,
            backgroundImage: `url(${s})`, backgroundSize: 'cover', backgroundPosition: 'center 22%',
          }} />
        ))}
      </div>
      <span style={{ fontSize: 13, color: dark ? 'rgba(255,255,255,0.7)' : 'var(--text-secondary)' }}>
        <b style={{ color: dark ? '#fff' : INK, fontWeight: 700 }}>{count}</b> creators shooting on Sozee
      </span>
    </div>
  );
};

// ---- animated marquee column of generations ----
const GenCard = ({ g, h = 240, live = false, radius = 16, showCaption = true }) => (
  <div style={{
    position: 'relative', width: '100%', height: h, borderRadius: radius,
    overflow: 'hidden', background: 'var(--surface-base)', flexShrink: 0,
    boxShadow: '0 4px 20px rgba(28,27,27,0.10)',
  }}>
    <img loading="lazy" decoding="async" src={g.src} alt={g.scene} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    {showCaption && (
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, padding: '26px 12px 11px',
        background: 'linear-gradient(to top, rgba(0,0,0,0.62), transparent)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
      }}>
        <span style={{ fontSize: 11.5, fontWeight: 600, color: '#fff', letterSpacing: '0.01em' }}>{g.scene}</span>
        <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.78)', border: '1px solid rgba(255,255,255,0.4)', borderRadius: 9999, padding: '2px 7px' }}>{g.tag}</span>
      </div>
    )}
    {live && (
      <div style={{
        position: 'absolute', top: 10, left: 10, display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '4px 9px', borderRadius: 9999, background: 'rgba(28,27,27,0.55)',
        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#A675FF', animation: 'sz-pulse-dot 1.4s ease-in-out infinite' }} />
        <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff' }}>Generating</span>
      </div>
    )}
  </div>
);

const MarqueeColumn = ({ items, cardH = 240, gap = 16, speed = 38, reverse = false, live = -1 }) => {
  const loop = [...items, ...items];
  return (
    <div style={{ overflow: 'hidden', height: '100%' }}>
      <div style={{
        display: 'flex', flexDirection: 'column', gap,
        animation: `${reverse ? 'sz-scroll-down' : 'sz-scroll-up'} ${speed}s linear infinite`,
      }}>
        {loop.map((g, i) => (
          <GenCard key={i} g={g} h={cardH} live={i === live} />
        ))}
      </div>
    </div>
  );
};

// ---- feature teaser strip (Photoshoot / Scheduler / Reel cloning) ----
const FEATURES = [
  { n: '01', name: 'Photoshoot', blurb: 'Direct a full set — scene, wardrobe, mood. Six on-brand variants from one input.', icon: 'camera' },
  { n: '02', name: 'Scheduler',  blurb: 'Queue and auto-publish to OnlyFans, Fanvue and Fansly on your cadence.', icon: 'calendar' },
  { n: '03', name: 'Reel cloning', blurb: 'Drop a reference clip. Sozee re-shoots it as you, frame for frame.', icon: 'reel' },
];

const FeatIcon = ({ kind, color = INK }) => {
  const p = { fill: 'none', stroke: color, strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'camera') return (<svg width="22" height="22" viewBox="0 0 24 24"><path {...p} d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2L8 5h8l1.5 2h2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-9z"/><circle {...p} cx="12" cy="13" r="3.5"/></svg>);
  if (kind === 'calendar') return (<svg width="22" height="22" viewBox="0 0 24 24"><rect {...p} x="3.5" y="5" width="17" height="15" rx="2.5"/><path {...p} d="M3.5 9.5h17M8 3v4M16 3v4"/></svg>);
  return (<svg width="22" height="22" viewBox="0 0 24 24"><rect {...p} x="3.5" y="5" width="17" height="14" rx="2.5"/><path {...p} d="M10 9.5l4.5 2.5L10 14.5z"/></svg>);
};

const FeatureStrip = ({ width }) => (
  <div style={{ background: '#fff', borderTop: '1px solid var(--border-hairline)', padding: '30px 56px' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
      <Eyebrow>§ What's new</Eyebrow>
      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--brand-purple-700)', cursor: 'pointer' }}>See everything →</span>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
      {FEATURES.map(f => (
        <div key={f.n} style={{
          background: 'var(--surface-low)', borderRadius: 16, padding: '22px 22px 24px',
          border: '1px solid var(--border-hairline)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: '#fff', display: 'grid', placeItems: 'center', border: '1px solid var(--border-hairline)' }}>
              <FeatIcon kind={f.icon} />
            </div>
            <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-mute)', letterSpacing: '0.04em' }}>{f.n}</span>
          </div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 6 }}>{f.name}</div>
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{f.blurb}</div>
        </div>
      ))}
    </div>
  </div>
);

// Explore pool — real Sozee generations, stills and clips. Any Explore grid draws a random,
// non-repeating slice on each load (guaranteed 2 clips mixed in), so the wall feels alive.
const EXPLORE_STILLS = [
  'assets/explore/e17.webp', 'assets/explore/e18.webp', 'assets/explore/e19.webp', 'assets/explore/e20.webp',
  'assets/explore/e21.webp', 'assets/explore/e22.webp', 'assets/explore/e23.webp', 'assets/explore/e24.webp',
  'assets/explore/e25.webp', 'assets/explore/e26.webp', 'assets/explore/e27.webp', 'assets/explore/e28.webp',
  'assets/explore/e29.webp', 'assets/explore/e30.webp'];
const EXPLORE_CLIPS = [
  'assets/explore/v01.mp4', 'assets/explore/v02.mp4', 'assets/explore/v03.mp4', 'assets/explore/v04.mp4',
  'assets/explore/v08.mp4', 'assets/explore/v09.mp4', 'assets/explore/v10.mp4', 'assets/explore/v11.mp4',
  'assets/explore/v13.mp4', 'assets/explore/v14.mp4', 'assets/explore/v15.mp4', 'assets/explore/v16.mp4'];
const EXPLORE_POOL = EXPLORE_STILLS;
const shuffleTake = (arr, n) => {
  const p = arr.slice();
  for (let i = p.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [p[i], p[j]] = [p[j], p[i]]; }
  return p.slice(0, n);
};
// returns [{ src, video }] — strict alternation: still, clip, still, clip …
const pickExplore = (n, clips = Math.floor(n / 2)) => {
  const s = shuffleTake(EXPLORE_STILLS, n - clips), v = shuffleTake(EXPLORE_CLIPS, clips);
  const out = [];
  for (let i = 0; i < n; i++) out.push(i % 2 ? { src: v[(i - 1) / 2], video: true } : { src: s[i / 2], video: false });
  return out;
};

Object.assign(window, {
  INK, CREAM, PULSE, GENS, FEATURES, EXPLORE_POOL, EXPLORE_STILLS, EXPLORE_CLIPS, pickExplore,
  GradText, Eyebrow, Sparkle, CTAButton, GhostButton,
  MarketingNav, Burger, Wordmark, TrustRow,
  GenCard, MarqueeColumn, FeatIcon, FeatureStrip,
});