// Wozen UI Kit — SaaS/AI platform components
// Sister brand to Adboosta. Electric purple accent, more "app" feel than marketing.

const { useState } = React;

const WIcon = ({ d, size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{typeof d === 'string' ? <path d={d}/> : d}</svg>
);
const WIconSparkle = (p) => <WIcon {...p} d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z"/>;
const WIconBolt = (p) => <WIcon {...p} d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>;
const WIconCheck = (p) => <WIcon {...p} d="M5 12l5 5L20 7"/>;
const WIconArrow = (p) => <WIcon {...p} d="M5 12h14M12 5l7 7-7 7"/>;
const WIconSearch = (p) => <WIcon {...p} d={<><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>}/>;
const WIconChat = (p) => <WIcon {...p} d="M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8z"/>;

// Wozen wordmark — "WOZEN" with purple dot accent on the E
const WozenLogo = ({ size = 24 }) => (
  <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', fontFamily: 'Inter', fontWeight: 900, fontSize: size, letterSpacing: '-0.04em', color: '#FAF8F5' }}>
    WOZEN
    <span style={{ position: 'absolute', right: -size*0.25, top: -size*0.1, width: size*0.32, height: size*0.32, borderRadius: '50%', background: '#8B5CF6', boxShadow: `0 0 ${size*0.5}px ${-size*0.1}px #8B5CF6` }}/>
  </div>
);

// WozenNav — sidebar-anchored app shell nav (different from Adboosta's pill)
const WozenAppShell = ({ children }) => {
  const [active, setActive] = useState('Studio');
  const items = [
    { name: 'Studio', icon: WIconSparkle },
    { name: 'Campaigns', icon: WIconBolt },
    { name: 'Conversations', icon: WIconChat },
    { name: 'Search', icon: WIconSearch },
  ];
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: '#0D0D12' }}>
      <aside style={{ width: 240, borderRight: '1px solid #2A2A35', padding: '24px 16px', display: 'flex', flexDirection: 'column', gap: 32, flexShrink: 0 }}>
        <div style={{ padding: '0 8px' }}><WozenLogo size={20}/></div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {items.map(it => {
            const I = it.icon;
            const isActive = active === it.name;
            return (
              <button key={it.name} onClick={() => setActive(it.name)} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px',
                borderRadius: 10, border: 'none', cursor: 'pointer', textAlign: 'left',
                background: isActive ? 'rgba(139,92,246,0.12)' : 'transparent',
                color: isActive ? '#FAF8F5' : '#A1A1AA',
                fontSize: 13, fontWeight: 500, fontFamily: 'Inter',
                position: 'relative'
              }}>
                {isActive && <span style={{ position: 'absolute', left: -16, top: 8, bottom: 8, width: 3, borderRadius: 2, background: '#8B5CF6' }}/>}
                <I size={16}/> {it.name}
              </button>
            );
          })}
        </nav>
        <div style={{ marginTop: 'auto', padding: 12, borderRadius: 12, background: 'rgba(139,92,246,0.08)', border: '1px solid rgba(139,92,246,0.2)' }}>
          <p style={{ fontFamily: 'JetBrains Mono', fontSize: 9, color: '#8B5CF6', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>Pro Plan</p>
          <p style={{ fontSize: 12, color: '#A1A1AA', lineHeight: 1.5 }}>2,847 / 10,000 credits this month</p>
          <div style={{ marginTop: 8, height: 4, background: 'rgba(58,58,71,0.5)', borderRadius: 9999, overflow: 'hidden' }}>
            <div style={{ width: '28.47%', height: '100%', background: '#8B5CF6' }}/>
          </div>
        </div>
      </aside>
      <main style={{ flex: 1, overflow: 'hidden' }}>{children}</main>
    </div>
  );
};

// WozenStudioCanvas — flagship "studio" UI: prompt panel + AI output preview
const WozenStudioCanvas = () => (
  <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr', height: '100vh' }}>
    <div style={{ borderRight: '1px solid #2A2A35', padding: 24, display: 'flex', flexDirection: 'column', gap: 20, overflowY: 'auto' }}>
      <div>
        <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#8B5CF6', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>Prompt</p>
        <textarea defaultValue="Generate three high-performing video creatives for a Sydney dental clinic targeting Invisalign leads, ages 25–40." style={{ width: '100%', minHeight: 120, padding: 14, background: 'rgba(42,42,53,0.5)', border: '1px solid #3A3A47', borderRadius: 12, color: '#FAF8F5', fontSize: 13, fontFamily: 'Inter', lineHeight: 1.6, resize: 'none', outline: 'none' }}/>
      </div>
      <div>
        <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#A1A1AA', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>Style</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {['Cinematic', 'Documentary', 'UGC', 'Animated'].map((s, i) => (
            <button key={s} style={{ padding: '6px 12px', borderRadius: 9999, fontSize: 11, fontWeight: 600, border: '1px solid', borderColor: i === 0 ? '#8B5CF6' : '#3A3A47', background: i === 0 ? 'rgba(139,92,246,0.15)' : 'transparent', color: i === 0 ? '#FAF8F5' : '#A1A1AA', cursor: 'pointer' }}>{s}</button>
          ))}
        </div>
      </div>
      <div>
        <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#A1A1AA', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>Length</p>
        <input type="range" min="6" max="60" defaultValue="15" style={{ width: '100%', accentColor: '#8B5CF6' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono', fontSize: 10, color: '#A1A1AA', marginTop: 4 }}><span>6s</span><span style={{ color: '#FAF8F5' }}>15s</span><span>60s</span></div>
      </div>
      <button style={{ marginTop: 'auto', padding: '14px 24px', borderRadius: 12, background: '#8B5CF6', border: 'none', color: '#fff', fontSize: 14, fontWeight: 700, fontFamily: 'Inter', cursor: 'pointer', boxShadow: '0 0 40px -10px #8B5CF6', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
        <WIconSparkle size={16}/> Generate
      </button>
    </div>
    <div style={{ padding: 32, overflowY: 'auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 4 }}>Generations</h2>
          <p style={{ fontSize: 13, color: '#A1A1AA' }}>3 of 3 complete · 12s total</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: '#A1A1AA' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#34D399', boxShadow: '0 0 0 4px rgba(52,211,153,0.25)' }}/> Live
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[1,2,3].map(i => (
          <div key={i} style={{ background: '#2A2A35', border: '1px solid #3A3A47', borderRadius: 16, overflow: 'hidden' }}>
            <div style={{ aspectRatio: '9/16', background: `linear-gradient(${135+i*40}deg, #8B5CF6, #FF0073, #2A2A35)`, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 16 }}>
              <div style={{ position: 'absolute', top: 12, right: 12, padding: '4px 10px', borderRadius: 9999, background: 'rgba(13,13,18,0.8)', backdropFilter: 'blur(8px)', fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 700 }}>v{i}</div>
              <div style={{ position: 'relative' }}>
                <p style={{ fontSize: 11, fontWeight: 700, color: '#fff', textShadow: '0 1px 8px rgba(0,0,0,0.6)' }}>Confident smiles</p>
                <p style={{ fontSize: 9, color: 'rgba(255,255,255,0.85)', marginTop: 2 }}>start at $0 down</p>
              </div>
            </div>
            <div style={{ padding: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <p style={{ fontSize: 12, fontWeight: 600 }}>Variant {i}</p>
                <p style={{ fontSize: 10, fontFamily: 'JetBrains Mono', color: '#A1A1AA', marginTop: 2 }}>Score · {[8.4, 9.1, 7.8][i-1]}</p>
              </div>
              <button style={{ padding: '6px 10px', borderRadius: 8, border: '1px solid #3A3A47', background: 'transparent', color: '#FAF8F5', fontSize: 11, fontWeight: 600, cursor: 'pointer' }}>Use</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// WozenMetricCard
const WozenMetricCard = ({ label, value, change, sub }) => (
  <div style={{ background: '#2A2A35', border: '1px solid #3A3A47', borderRadius: 16, padding: 20 }}>
    <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#A1A1AA', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>{label}</p>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
      <span style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>{value}</span>
      {change && <span style={{ fontSize: 12, fontWeight: 600, color: change.startsWith('+') ? '#34D399' : '#EF4444' }}>{change}</span>}
    </div>
    <p style={{ fontSize: 12, color: '#A1A1AA' }}>{sub}</p>
  </div>
);

// WozenChatBubble
const WozenChatBubble = ({ from = 'ai', children }) => (
  <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', maxWidth: 560 }}>
    <div style={{ width: 32, height: 32, borderRadius: 8, flexShrink: 0, background: from === 'ai' ? 'linear-gradient(135deg, #8B5CF6, #FF0073)' : '#3A3A47', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
      {from === 'ai' ? <WIconSparkle size={14}/> : 'U'}
    </div>
    <div style={{ flex: 1 }}>
      <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#A1A1AA', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6, fontWeight: 600 }}>
        {from === 'ai' ? 'Wozen' : 'You'}
      </p>
      <div style={{ background: from === 'ai' ? 'rgba(139,92,246,0.08)' : 'rgba(42,42,53,0.5)', border: `1px solid ${from === 'ai' ? 'rgba(139,92,246,0.2)' : '#3A3A47'}`, borderRadius: 12, padding: 14, fontSize: 14, lineHeight: 1.6, color: '#FAF8F5' }}>{children}</div>
    </div>
  </div>
);

// WozenHero — for marketing site (lighter than Adboosta's hero)
const WozenHero = () => (
  <section style={{ position: 'relative', minHeight: 640, padding: '120px 48px', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: '20%', left: '50%', width: 600, height: 600, transform: 'translateX(-50%)', background: 'rgba(139,92,246,0.18)', borderRadius: '50%', filter: 'blur(140px)', pointerEvents: 'none' }}/>
    <div style={{ position: 'relative', maxWidth: 960, margin: '0 auto', textAlign: 'center' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, border: '1px solid rgba(139,92,246,0.3)', borderRadius: 9999, padding: '6px 14px', background: 'rgba(139,92,246,0.06)', color: '#8B5CF6', fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 28 }}>
        <WIconSparkle size={12}/> Now in private beta
      </span>
      <h1 style={{ fontSize: 84, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 700, marginBottom: 28 }}>
        The growth stack for <span style={{ fontFamily: '"Playfair Display", serif', fontStyle: 'italic', fontWeight: 400, color: '#8B5CF6' }}>creative teams.</span>
      </h1>
      <p style={{ fontSize: 20, color: '#A1A1AA', fontWeight: 300, maxWidth: 620, margin: '0 auto 40px', lineHeight: 1.55 }}>
        Generate, test, and scale ad creative in one workspace. Powered by the same engine running Adboosta campaigns.
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
        <button style={{ padding: '14px 28px', borderRadius: 9999, background: '#8B5CF6', border: 'none', color: '#fff', fontSize: 14, fontWeight: 700, cursor: 'pointer', boxShadow: '0 0 50px -12px #8B5CF6', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          Get early access <WIconArrow size={16}/>
        </button>
        <button style={{ padding: '14px 28px', borderRadius: 9999, background: 'rgba(255,255,255,0.06)', border: '1px solid #3A3A47', color: '#FAF8F5', fontSize: 14, fontWeight: 600, cursor: 'pointer', backdropFilter: 'blur(8px)' }}>Watch demo</button>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  WozenLogo, WozenAppShell, WozenStudioCanvas, WozenMetricCard, WozenChatBubble, WozenHero,
  WIconSparkle, WIconBolt, WIconCheck, WIconArrow, WIconSearch, WIconChat
});