/* Hero mockup — a floating browser window showing a tracked proposal micro-site */

function HeroMockup() {
  return (
    <div className="pp-float" style={{
      width: '100%', maxWidth: 980, margin: '0 auto',
      borderRadius: 16,
      textAlign: 'left',
      background: 'linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%)',
      border: '1px solid rgba(14,14,12,0.13)',
      boxShadow:
        '0 1px 0 rgba(14,14,12,0.06) inset,' +
        '0 60px 120px -40px rgba(0,0,0,0.65),' +
        '0 20px 60px -20px rgba(229,83,60,0.25)',
      overflow: 'hidden',
    }}>
      {/* Window chrome */}
      <div style={{
        display: 'flex', alignItems: 'center',
        padding: '12px 16px',
        borderBottom: '1px solid rgba(14,14,12,0.08)',
        background: 'rgba(14,14,12,0.025)',
      }}>
        <div style={{ display: 'flex', gap: 7 }}>
          <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FF5F57', border: '1px solid rgba(14,14,12,0.08)' }} />
          <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FEBC2E', border: '1px solid rgba(14,14,12,0.08)' }} />
          <span style={{ width: 11, height: 11, borderRadius: 999, background: '#28C840', border: '1px solid rgba(14,14,12,0.08)' }} />
        </div>
        <div style={{
          margin: '0 auto', display: 'flex', alignItems: 'center', gap: 8,
          padding: '5px 14px', borderRadius: 999,
          background: 'rgba(14,14,12,0.06)',
          border: '1px solid rgba(14,14,12,0.08)',
          fontFamily: PP.mono, fontSize: 11, letterSpacing: '0.4px',
          color: 'rgba(14,14,12,0.62)',
        }}>
          <span style={{ width: 11, height: 11, borderRadius: 2, background: 'rgba(229,83,60,0.5)' }} />
          pulse.so/p/northwind-rebuild
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: PP.mono, fontSize: 10.5, color: 'rgba(14,14,12,0.42)', letterSpacing: '0.6px' }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: PP.green }} />
          LIVE
        </div>
      </div>

      {/* Body — two columns */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1.35fr) minmax(0,1fr)',
        gap: 0,
      }}>
        {/* Left — proposal preview */}
        <div style={{ padding: '26px 28px 28px', borderRight: '1px solid rgba(14,14,12,0.06)' }}>
          <div style={{
            fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.5px',
            textTransform: 'uppercase', color: 'rgba(14,14,12,0.4)',
            marginBottom: 10,
          }}>PROPOSAL · #PP-2614 · sent 3 days ago</div>

          <h3 style={{
            margin: 0, fontFamily: PP.serif, fontStyle: 'italic',
            fontSize: 28, lineHeight: 1.08, color: PP.text, letterSpacing: '-0.6px',
            maxWidth: 360,
          }}>
            Northwind — full-stack rebuild &amp; migration
          </h3>
          <div style={{
            marginTop: 8, fontFamily: PP.sans, fontSize: 12.5,
            color: 'rgba(14,14,12,0.5)',
          }}>For Maya Chen · VP Engineering, Northwind Labs</div>

          {/* Stats row */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 10, marginTop: 22,
          }}>
            {[
              { label: 'Value', value: '$84k' },
              { label: 'Timeline', value: '14 wks' },
              { label: 'AI chats', value: '7' },
            ].map(s => (
              <div key={s.label} style={{
                padding: '12px 12px',
                background: 'rgba(14,14,12,0.04)',
                border: '1px solid rgba(14,14,12,0.08)',
                borderRadius: 9,
              }}>
                <div style={{ fontFamily: PP.mono, fontSize: 10, letterSpacing: '1px', color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase' }}>{s.label}</div>
                <div style={{ fontFamily: PP.serif, fontStyle: 'italic', fontSize: 22, color: PP.text, marginTop: 2 }}>{s.value}</div>
              </div>
            ))}
          </div>

          {/* Section read bars */}
          <div style={{ marginTop: 22 }}>
            <div style={{
              fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.2px',
              textTransform: 'uppercase', color: 'rgba(14,14,12,0.4)',
              marginBottom: 10,
            }}>Section engagement</div>
            {[
              { name: 'Overview',     pct: 100, t: '0:42' },
              { name: 'Approach',     pct: 78,  t: '1:08' },
              { name: 'Timeline',     pct: 64,  t: '0:51' },
              { name: 'Pricing',      pct: 100, t: '6:14', hot: true },
              { name: 'Team & next',  pct: 22,  t: '0:18' },
            ].map(s => (
              <div key={s.name} style={{
                display: 'grid',
                gridTemplateColumns: '88px 1fr 38px',
                alignItems: 'center', gap: 10,
                padding: '7px 0',
                borderBottom: '1px dashed rgba(14,14,12,0.08)',
              }}>
                <div style={{ fontFamily: PP.sans, fontSize: 12.5, color: s.hot ? PP.amber : 'rgba(14,14,12,0.68)' }}>{s.name}</div>
                <div style={{ position: 'relative', height: 4, background: 'rgba(14,14,12,0.08)', borderRadius: 999 }}>
                  <div style={{
                    position: 'absolute', inset: 0, width: s.pct + '%',
                    background: s.hot
                      ? 'linear-gradient(90deg, rgba(183,121,31,0.8), rgba(183,121,31,0.4))'
                      : 'linear-gradient(90deg, rgba(229,83,60,0.85), rgba(229,83,60,0.25))',
                    borderRadius: 999,
                  }} />
                </div>
                <div style={{ fontFamily: PP.mono, fontSize: 10.5, color: 'rgba(14,14,12,0.42)', textAlign: 'right' }}>{s.t}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right — live cards */}
        <div style={{ padding: '26px 24px', display: 'flex', flexDirection: 'column', gap: 14, background: 'rgba(14,14,12,0.02)' }}>
          {/* Live activity */}
          <div style={{
            padding: 16, borderRadius: 12,
            background: 'rgba(14,14,12,0.04)',
            border: '1px solid rgba(14,14,12,0.1)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <div style={{ fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.2px', color: 'rgba(14,14,12,0.5)', textTransform: 'uppercase' }}>Live activity</div>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: PP.green, boxShadow: '0 0 8px rgba(31,138,91,0.7)' }} />
            </div>
            {[
              { dot: PP.green,    label: 'Opened on iPhone',          when: '11:42 PM' },
              { dot: PP.blue,     label: 'Re-read “Pricing” section', when: '11:48 PM' },
              { dot: PP.amber,    label: 'Asked AI: “phase 1 only?”', when: '11:51 PM' },
              { dot: PP.accentHi, label: 'Forwarded to alex@nw.io',   when: '11:56 PM' },
            ].map((row, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '12px 1fr auto',
                alignItems: 'center', gap: 10,
                padding: '7px 0',
                borderTop: i ? '1px solid rgba(14,14,12,0.06)' : 'none',
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: row.dot }} />
                <div style={{ fontFamily: PP.sans, fontSize: 12.5, color: 'rgba(14,14,12,0.78)' }}>{row.label}</div>
                <div style={{ fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.42)', whiteSpace: 'nowrap' }}>{row.when}</div>
              </div>
            ))}
          </div>

          {/* AI insight */}
          <div style={{
            padding: 16, borderRadius: 12,
            background: 'rgba(183,121,31,0.06)',
            border: '1px solid rgba(183,121,31,0.25)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span style={{
                width: 20, height: 20, borderRadius: 6,
                background: 'rgba(183,121,31,0.2)', border: '1px solid rgba(183,121,31,0.4)',
                display: 'grid', placeItems: 'center',
                color: PP.amber, fontSize: 11, fontWeight: 600,
              }}>✦</span>
              <div style={{ fontFamily: PP.mono, fontSize: 10, letterSpacing: '1.2px', color: PP.amber, textTransform: 'uppercase' }}>AI insight</div>
            </div>
            <div style={{ fontFamily: PP.serif, fontStyle: 'italic', fontSize: 16, lineHeight: 1.35, color: PP.text }}>
              6 min on pricing, then a forward. Budget concern likely — soften the Phase 1 option before they reply.
            </div>
            <div style={{ marginTop: 10, fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.5)' }}>Confidence 92% · based on 412 similar deals</div>
          </div>

          {/* Tiny pulse card */}
          <div style={{
            padding: '12px 14px', borderRadius: 12,
            background: 'rgba(229,83,60,0.06)',
            border: '1px solid rgba(229,83,60,0.22)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ position: 'relative', width: 22, height: 22 }}>
              <span className="pp-ring" style={{
                position: 'absolute', inset: 0, borderRadius: 999,
                border: '1px solid ' + PP.accentHi, opacity: 0.5,
              }} />
              <span style={{ position: 'absolute', inset: 7, borderRadius: 999, background: PP.accentHi }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: PP.sans, fontSize: 12.5, color: PP.text }}>Pulse queued for day 5</div>
              <div style={{ fontFamily: PP.mono, fontSize: 10, color: 'rgba(14,14,12,0.5)', marginTop: 2 }}>If no reply by Mon · anonymous · single tap</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.HeroMockup = HeroMockup;