// Outputs — the THREE artifacts, shown as beautiful mocks
// This is the showcase. Each mock is genuine design craft.

const VideoMock = () => {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div style={{
      aspectRatio: '16 / 10',
      borderRadius: 14,
      overflow: 'hidden',
      position: 'relative',
      background: 'linear-gradient(180deg, #1a1812 0%, #2b2418 70%, #4a3a26 100%)',
      boxShadow: '0 30px 80px -30px rgba(20,15,10,0.55), 0 4px 0 rgba(255,255,255,0.04) inset',
      cursor: 'pointer',
    }} onClick={() => setPlaying(p => !p)}>

      {/* Cinematic poster — abstract editorial composition */}
      <div style={{position:'absolute', inset:0}}>
        {/* Sun/disc */}
        <div style={{
          position: 'absolute',
          right: '14%',
          top: '22%',
          width: '38%',
          aspectRatio: '1',
          borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 35%, #f4a14a 0%, #e26a2c 55%, #b73a1c 100%)',
          boxShadow: '0 0 80px 0 rgba(226, 106, 44, 0.4)',
        }} />
        {/* Horizon */}
        <div style={{
          position: 'absolute',
          left: 0, right: 0, bottom: '32%',
          height: 1,
          background: 'rgba(244, 161, 74, 0.45)',
        }} />
        {/* Silhouette mountains */}
        <svg viewBox="0 0 100 30" preserveAspectRatio="none" style={{
          position:'absolute', left:0, right:0, bottom: '12%', width:'100%', height: '30%',
        }}>
          <path d="M0,30 L0,20 L12,8 L22,16 L34,4 L48,18 L60,10 L74,20 L86,6 L100,16 L100,30 Z" fill="#0e0a06" opacity="0.9"/>
          <path d="M0,30 L0,24 L18,14 L30,22 L44,12 L58,22 L70,16 L84,24 L100,18 L100,30 Z" fill="#0a0703" opacity="0.95"/>
        </svg>

        {/* Film grain */}
        <div style={{
          position:'absolute', inset: 0,
          backgroundImage: 'radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)',
          backgroundSize: '3px 3px',
          mixBlendMode: 'overlay',
        }} />
        {/* Vignette */}
        <div style={{
          position:'absolute', inset: 0,
          background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%)',
        }} />
      </div>

      {/* Title overlay (editorial) */}
      <div style={{
        position: 'absolute',
        left: '7%', top: '7%',
        color: 'var(--paper)',
        fontFamily: 'var(--mono)',
        fontSize: 10,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        opacity: 0.8,
      }}>
        REEL · 00:00:30 · 1080p · H.264
      </div>

      <div style={{
        position: 'absolute',
        left: '7%',
        bottom: '20%',
        color: 'var(--paper)',
        fontFamily: 'var(--serif)',
        fontSize: 'clamp(20px, 3vw, 38px)',
        fontStyle: 'italic',
        lineHeight: 1.0,
        maxWidth: '60%',
      }}>
        a promo film,<br/>
        <span style={{fontStyle: 'normal'}}>made by your agent.</span>
      </div>

      {/* Play button */}
      <button aria-label="play" style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: 'translate(-50%, -50%) scale(' + (playing ? 0.85 : 1) + ')',
        width: 84, height: 84,
        borderRadius: '50%',
        background: 'var(--paper)',
        color: 'var(--ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 10px 30px rgba(0,0,0,0.4)',
        transition: 'transform .3s ease',
      }}>
        {playing
          ? <div style={{display:'flex', gap:5}}><div style={{width:6, height:24, background:'var(--ink)'}}/><div style={{width:6, height:24, background:'var(--ink)'}}/></div>
          : <div style={{width:0, height:0, borderTop:'14px solid transparent', borderBottom:'14px solid transparent', borderLeft:'22px solid var(--ink)', marginLeft: 4}}/>
        }
      </button>

      {/* Bottom scrubber */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 0,
        padding: '12px 18px',
        background: 'linear-gradient(0deg, rgba(0,0,0,0.6), transparent)',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        color: 'var(--paper)',
        fontFamily: 'var(--mono)',
        fontSize: 11,
      }}>
        <span>00:00</span>
        <div style={{flex:1, height: 2, background:'rgba(255,255,255,0.25)', position:'relative', borderRadius: 2}}>
          <div style={{position:'absolute', left:0, top:0, bottom:0, width: '18%', background:'var(--vermillion)', borderRadius: 2}}/>
          <div style={{position:'absolute', left:'18%', top:'50%', transform:'translate(-50%,-50%)', width:10, height:10, borderRadius:'50%', background:'var(--paper)'}}/>
        </div>
        <span>00:30</span>
      </div>
    </div>
  );
};

const DeckMock = () => (
  <div style={{
    aspectRatio: '16 / 10',
    borderRadius: 14,
    overflow: 'hidden',
    background: '#f7f3e9',
    boxShadow: '0 30px 80px -30px rgba(20,15,10,0.45), 0 1px 0 var(--rule) inset',
    position: 'relative',
    padding: 'clamp(20px, 3vw, 36px)',
    display: 'flex',
    flexDirection: 'column',
    gap: 18,
  }}>
    {/* slide header */}
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      fontFamily: 'var(--mono)',
      fontSize: 10,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: 'var(--ink-mute)',
    }}>
      <span>Lumen · Series A · 2026</span>
      <span>03 / 12</span>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 'clamp(16px,3vw,40px)', alignItems:'center', flex: 1}}>
      <div>
        <div style={{
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: 'var(--vermillion)',
          marginBottom: 12,
        }}>The opportunity</div>
        <div className="display" style={{
          fontSize: 'clamp(22px, 2.8vw, 44px)',
          lineHeight: 1.0,
          letterSpacing: '-0.015em',
          color: 'var(--ink)',
        }}>
          A <span className="it" style={{color:'var(--vermillion)'}}>$42B</span><br/>
          market<br/>
          waking up to<br/>
          <span className="it">AI-native</span><br/>
          workflows.
        </div>
      </div>

      {/* Right column — bar chart */}
      <div style={{display:'flex', flexDirection:'column', gap: 10}}>
        <div style={{
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--ink-mute)',
          display:'flex', justifyContent:'space-between',
        }}>
          <span>TAM by 2030</span>
          <span>USD billions</span>
        </div>
        <div style={{display:'grid', gap: 8}}>
          {[
            ['2024', 16, '#c9bea7'],
            ['2026', 24, '#8a7a5a'],
            ['2028', 33, '#df4a26'],
            ['2030', 42, '#171310'],
          ].map(([y, v, c]) => (
            <div key={y} style={{display:'grid', gridTemplateColumns:'40px 1fr 32px', alignItems:'center', gap: 8, fontFamily:'var(--mono)', fontSize:11}}>
              <span style={{color:'var(--ink-mute)'}}>{y}</span>
              <div style={{height: 14, background: 'rgba(0,0,0,0.04)', borderRadius: 2, overflow:'hidden'}}>
                <div style={{width: `${(v/42)*100}%`, height:'100%', background: c}}/>
              </div>
              <span>${v}B</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    <div style={{
      display:'flex',
      justifyContent:'space-between',
      fontFamily:'var(--mono)',
      fontSize: 10,
      letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color:'var(--ink-mute)',
      borderTop: '1px solid var(--rule)',
      paddingTop: 10,
    }}>
      <span>Source: Gartner, a16z, internal</span>
      <span>Lumen.ai</span>
    </div>
  </div>
);

const SiteMock = () => (
  <div style={{
    aspectRatio: '16 / 10',
    borderRadius: 14,
    overflow: 'hidden',
    background: 'linear-gradient(180deg, #1f2647 0%, #161a32 100%)',
    color: '#f1eee5',
    boxShadow: '0 30px 80px -30px rgba(20,15,10,0.5)',
    position: 'relative',
    fontFamily: 'var(--sans)',
  }}>
    {/* Browser chrome */}
    <div style={{
      display: 'flex',
      gap: 6,
      alignItems: 'center',
      padding: '10px 14px',
      background: 'rgba(255,255,255,0.05)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{width:9, height:9, borderRadius:'50%', background:'#e36b56'}}/>
      <div style={{width:9, height:9, borderRadius:'50%', background:'#d4b35b'}}/>
      <div style={{width:9, height:9, borderRadius:'50%', background:'#7da870'}}/>
      <div style={{
        marginLeft: 14,
        padding: '3px 10px',
        borderRadius: 999,
        background: 'rgba(255,255,255,0.07)',
        fontFamily: 'var(--mono)',
        fontSize: 10,
        color: 'rgba(255,255,255,0.65)',
      }}>lumen.ai</div>
    </div>

    {/* Hero of fake site */}
    <div style={{padding: 'clamp(18px, 3vw, 36px)', display:'flex', flexDirection:'column', height:'calc(100% - 36px)', justifyContent:'space-between'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontFamily:'var(--mono)', fontSize: 10, letterSpacing:'0.16em', textTransform:'uppercase', color:'rgba(241,238,229,0.65)'}}>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <span style={{width:14, height:14, borderRadius:'50%', background:'var(--vermillion)'}}/>
          <span style={{fontFamily:'var(--serif)', fontSize:18, fontStyle:'italic', color:'#f1eee5', letterSpacing:'-0.01em'}}>Lumen</span>
        </div>
        <div style={{display:'flex', gap:18}}>
          <span>Product</span><span>Pricing</span><span>Docs</span>
        </div>
      </div>

      <div>
        <div style={{
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--vermillion)',
          marginBottom: 14,
        }}>· Early access — May 2026</div>
        <div className="display" style={{
          fontSize: 'clamp(22px, 3.4vw, 56px)',
          lineHeight: 1.0,
          letterSpacing: '-0.02em',
          color: '#f1eee5',
          maxWidth: '12ch',
        }}>
          The notebook<br/>that <span className="it" style={{color:'var(--vermillion)'}}>thinks</span> with&nbsp;you.
        </div>
        <div style={{marginTop: 14, display:'flex', gap: 10}}>
          <span style={{
            padding: '8px 14px',
            background: 'var(--vermillion)',
            color: '#f1eee5',
            borderRadius: 999,
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
          }}>Request access →</span>
          <span style={{
            padding: '8px 14px',
            border: '1px solid rgba(241,238,229,0.3)',
            borderRadius: 999,
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            color: '#f1eee5',
          }}>Watch demo</span>
        </div>
      </div>

      <div style={{
        display:'flex',
        justifyContent:'space-between',
        fontFamily:'var(--mono)',
        fontSize: 9,
        letterSpacing:'0.16em',
        textTransform:'uppercase',
        color:'rgba(241,238,229,0.45)',
      }}>
        <span>↳ trusted by 12k+ teams</span>
        <span>fig. 01 — homepage</span>
      </div>
    </div>
  </div>
);

const Outputs = () => {
  const [active, setActive] = React.useState(0);
  const items = [
    {
      label: 'Promo video',
      kicker: 'output 01',
      duration: '30 sec',
      format: 'MP4 · 1080p · H.264',
      title: 'A cinematic teaser cut from your demo.',
      body: 'Type-driven motion, your screen recordings cleanly composited, royalty-free score, lower-thirds, end card. Drops as /launch/promo.mp4 — ship it straight to X, LinkedIn, Product Hunt.',
      mock: <VideoMock />,
      details: ['1080p · 30s', 'Royalty-free score', 'Captions baked', 'Square + vertical cuts'],
    },
    {
      label: 'Pitch deck',
      kicker: 'output 02',
      duration: '12 slides',
      format: 'PPTX + PDF · editable',
      title: 'An investor-grade deck. Real typography.',
      body: 'Twelve slides with the bones of a great VC deck: problem, opportunity, product, traction, market, ask. Editable in Keynote, PowerPoint, or Google Slides — and styled, not stock.',
      mock: <DeckMock />,
      details: ['12 slides', 'PPTX + PDF', 'Editable type & color', 'Charts from your data'],
    },
    {
      label: 'Landing page',
      kicker: 'output 03',
      duration: '1 page',
      format: 'Static HTML + Tailwind',
      title: 'A landing page worth the build.',
      body: 'Static HTML with Tailwind, designed not templated. Drop it on Vercel, Netlify, GitHub Pages — or open it in your editor and refine it with your agent.',
      mock: <SiteMock />,
      details: ['Static HTML', 'Tailwind', 'Deploy anywhere', 'Open Graph + favicon'],
    },
  ];
  const cur = items[active];

  return (
    <section id="outputs">
      <div className="container">
        {/* Header */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(120px, 200px) 1fr',
          gap: 'clamp(24px, 5vw, 64px)',
          alignItems: 'baseline',
          marginBottom: 'clamp(40px, 7vh, 96px)',
        }}>
          <div className="eyebrow"><span className="dot"></span> 03 — The outputs</div>
          <h2 className="display h-l" style={{maxWidth: '17ch'}}>
            Three artifacts. Each one a piece of <span className="it">design</span> — not a template.
          </h2>
        </div>

        {/* Tab strip */}
        <div className="outputs-tabs" style={{
          display: 'flex',
          gap: 0,
          borderTop: '1px solid var(--rule)',
          borderBottom: '1px solid var(--rule)',
          marginBottom: 'clamp(36px, 5vh, 64px)',
          flexWrap: 'wrap',
        }}>
          {items.map((it, i) => (
            <button
              key={i}
              onClick={() => setActive(i)}
              style={{
                flex: 1,
                minWidth: 200,
                textAlign: 'left',
                padding: '20px 22px',
                borderLeft: i === 0 ? 'none' : '1px solid var(--rule)',
                position: 'relative',
                background: active === i ? 'var(--paper-2)' : 'transparent',
                transition: 'background .25s ease',
              }}
            >
              <div style={{
                fontFamily: 'var(--mono)',
                fontSize: 10,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: active === i ? 'var(--vermillion)' : 'var(--ink-mute)',
                marginBottom: 8,
              }}>{it.kicker}</div>
              <div className="display" style={{
                fontSize: 'clamp(22px, 2.5vw, 34px)',
                lineHeight: 1,
                letterSpacing: '-0.01em',
                color: 'var(--ink)',
                fontStyle: 'italic',
              }}>{it.label}</div>
              <div className="mono" style={{
                fontSize: 11,
                color: 'var(--ink-mute)',
                marginTop: 8,
              }}>{it.duration} · {it.format.split(' · ')[0]}</div>
            </button>
          ))}
        </div>

        {/* Body — big mock + side prose */}
        <div className="outputs-body" style={{
          display: 'grid',
          gridTemplateColumns: '1.45fr 1fr',
          gap: 'clamp(32px, 5vw, 80px)',
          alignItems: 'start',
        }}>
          <div key={active} style={{animation: 'fadeUp .6s cubic-bezier(.2,.7,.2,1)'}}>
            {cur.mock}
            <div className="mono" style={{
              marginTop: 14,
              display: 'flex',
              justifyContent: 'space-between',
              fontSize: 11,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: 'var(--ink-mute)',
            }}>
              <span>↳ /launch/{['promo.mp4','deck.pptx','site/index.html'][active]}</span>
              <span>fig. 0{active + 3} — output {active + 1}</span>
            </div>
          </div>

          <div key={'side-' + active} style={{animation: 'fadeUp .6s cubic-bezier(.2,.7,.2,1) .08s both'}}>
            <h3 className="display" style={{
              fontSize: 'clamp(28px, 3.4vw, 52px)',
              lineHeight: 1.0,
              letterSpacing: '-0.015em',
              marginBottom: 20,
              maxWidth: '14ch',
            }}>{cur.title}</h3>
            <p style={{fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 44*16}}>
              {cur.body}
            </p>

            <div style={{
              marginTop: 28,
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 0,
              border: '1px solid var(--rule)',
              borderRadius: 12,
              overflow: 'hidden',
            }}>
              {cur.details.map((d, i) => (
                <div key={d} style={{
                  padding: '14px 18px',
                  borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
                  borderTop: i > 1 ? '1px solid var(--rule)' : 'none',
                  fontFamily: 'var(--mono)',
                  fontSize: 12,
                  letterSpacing: '0.04em',
                  color: 'var(--ink-2)',
                  display: 'flex',
                  gap: 8,
                  alignItems: 'center',
                }}>
                  <Icon.Check size={12} />
                  {d}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
        @media (max-width: 960px) {
          .outputs-body { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Outputs = Outputs;