// Hero — editorial type, asymmetric, marginalia
const Hero = () => {
  const [time, setTime] = React.useState('');
  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      const t = d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
      setTime(t);
    };
    tick();
    const id = setInterval(tick, 1000 * 30);
    return () => clearInterval(id);
  }, []);

  const heroStyles = {
    section: {
      position: 'relative',
      padding: 'clamp(40px, 6vh, 100px) 0 0',
      borderBottom: '1px solid var(--rule)',
    },
    metaRow: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'baseline',
      gap: 24,
      paddingBottom: 28,
      borderBottom: '1px solid var(--rule)',
      marginBottom: 'clamp(48px, 7vh, 96px)',
      flexWrap: 'wrap',
      fontFamily: 'var(--mono)',
      fontSize: 11,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: 'var(--ink-mute)',
    },
    metaLeft: { display: 'flex', gap: 24, flexWrap: 'wrap' },
    title: {
      position: 'relative',
      paddingBottom: 'clamp(40px, 6vh, 88px)',
    },
    lede: {
      maxWidth: 540,
      fontFamily: 'var(--sans)',
      fontSize: 'clamp(15px, 1.15vw, 18px)',
      lineHeight: 1.55,
      color: 'var(--ink-2)',
      letterSpacing: '-0.005em',
    },
    bottomRow: {
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
      gap: 'clamp(24px, 4vw, 80px)',
      alignItems: 'end',
      paddingTop: 'clamp(40px, 5vh, 64px)',
      paddingBottom: 'clamp(40px, 5vh, 80px)',
    },
    pill: {
      fontFamily: 'var(--mono)',
      fontSize: 11,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: 'var(--ink-mute)',
      display: 'inline-flex',
      gap: 10,
      alignItems: 'center',
      padding: '8px 14px',
      border: '1px solid var(--rule)',
      borderRadius: 999,
      background: 'color-mix(in srgb, var(--paper-2) 65%, transparent)',
    },
    ctas: { display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 24 },
  };

  return (
    <section style={heroStyles.section}>
      <div className="container">
        {/* Top meta strip */}
        <div style={heroStyles.metaRow}>
          <div style={heroStyles.metaLeft}>
            <span>v0.4.2 · MIT</span>
            <span>—</span>
            <span>For Claude Code & Cursor</span>
          </div>
          <div>{time} · LOCAL · FREE FOREVER</div>
        </div>

        {/* Pill */}
        <div style={{marginBottom: 28}}>
          <span style={heroStyles.pill}>
            <span style={{width:6, height:6, borderRadius:999, background:'var(--vermillion)'}}></span>
            New · 0.4 launches with cinematic templates
          </span>
        </div>

        {/* Title block */}
        <div style={heroStyles.title}>
          <h1 className="display h-xxl" style={{maxWidth: '12ch'}}>
            Ship the<br />
            <span className="it">launch,</span>{' '}
            <span style={{color: 'var(--vermillion)'}}>not&nbsp;just</span><br />
            the&nbsp;code.
          </h1>

          {/* Marginalia */}
          <div className="mono" style={{
            position: 'absolute',
            right: 0,
            top: 8,
            maxWidth: 240,
            fontSize: 11,
            letterSpacing: '0.06em',
            color: 'var(--ink-mute)',
            lineHeight: 1.6,
            textAlign: 'left',
            display: window.innerWidth < 980 ? 'none' : 'block',
          }}>
            <div style={{borderTop: '1px solid var(--rule)', paddingTop: 12, marginBottom: 12}}>
              <span style={{color:'var(--vermillion)'}}>Fig. 01 —</span> a launch kit
            </div>
            One repository becomes a 30-second promo
            film, a 12-slide investor deck, and a
            landing page like this one. Rendered
            locally by the agent already in your
            editor.
          </div>
        </div>

        {/* Bottom row */}
        <div style={heroStyles.bottomRow}>
          <div>
            <p style={heroStyles.lede}>
              <strong style={{fontWeight: 600}}>pitchkit</strong> is an open-source launch generator. Point
              Claude Code or Cursor at your repo — get a promo video, a pitch deck,
              and a landing page in one local run. No API keys. No cloud.
              MIT-licensed forever.
            </p>
            <div style={heroStyles.ctas}>
              <a href="#install" className="btn btn-primary">
                <Icon.Github size={14} />
                Get on GitHub <Icon.Arrow className="arrow" />
              </a>
              <a href="#demo" className="btn btn-ghost">
                <Icon.Play size={12} />
                Watch the 90-second tour
              </a>
            </div>
          </div>

          {/* Command card */}
          <div style={{
            background: 'var(--ink)',
            color: 'var(--paper)',
            borderRadius: 14,
            padding: '20px 22px',
            fontFamily: 'var(--mono)',
            fontSize: 13,
            lineHeight: 1.65,
            position: 'relative',
            boxShadow: '0 20px 50px -20px rgba(20,15,10,0.35), 0 2px 0 rgba(0,0,0,0.04)',
          }}>
            <div style={{
              display:'flex',
              justifyContent:'space-between',
              alignItems:'center',
              borderBottom: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
              paddingBottom: 10,
              marginBottom: 14,
              fontSize: 10,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
            }}>
              <span>~/your-project</span>
              <span>one command</span>
            </div>
            <div><span style={{color:'var(--vermillion)'}}>$</span> npx pitchkit init</div>
            <div style={{color:'color-mix(in srgb, var(--paper) 55%, transparent)'}}># pitchkit drops a /launch folder + prompts</div>
            <div style={{marginTop: 4}}><span style={{color:'var(--vermillion)'}}>$</span> claude run pitchkit</div>
            <div style={{color:'color-mix(in srgb, var(--paper) 55%, transparent)'}}># video · deck · site — rendered locally</div>
            <div style={{
              marginTop: 12,
              display: 'flex',
              gap: 6,
              alignItems: 'center',
              color: '#9ad19a',
            }}>
              <span style={{
                display:'inline-block',
                width:6, height:6,
                background:'#9ad19a',
                borderRadius: 999,
                animation: 'blink 1.4s ease-in-out infinite',
              }}></span>
              ✓ launch-kit ready · ~2 min
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
        @media (max-width: 860px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;