// Hero.jsx — "Databricks for AI" hero
const Hero = () => {
  return (
    <section style={{
      position: 'relative',
      padding: '80px 32px 100px',
      overflow: 'hidden',
    }}>
      {/* Grid overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(125,211,252,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.06) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 85%)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 85%)',
        pointerEvents: 'none',
      }} />
      {/* Gradient glow */}
      <div style={{
        position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 600,
        background: 'radial-gradient(ellipse at top, rgba(29,168,105,0.22) 0%, rgba(26,143,224,0.10) 40%, transparent 70%)',
        pointerEvents: 'none', filter: 'blur(30px)',
      }} />

      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        {/* Eyebrow pill */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 14px 6px 6px',
          borderRadius: 9999,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 12, letterSpacing: '0.04em', fontWeight: 500,
          border: '1px solid rgba(46,232,154,0.22)',
          color: '#c4d2e2',
          background: 'rgba(10,18,32,0.6)',
          marginBottom: 32,
          backdropFilter: 'blur(4px)',
        }}>
          <span style={{
            padding: '3px 9px', borderRadius: 9999,
            background: 'linear-gradient(90deg,#2ec47a,#1a8fe0)',
            color: '#fff', fontSize: 10, fontWeight: 600, letterSpacing: '0.06em',
          }}>NEW</span>
          <span>Offline jobs shipped · Skardi Cloud waitlist open</span>
          <span style={{ color: '#6b7e9a' }}>→</span>
        </div>

        <h1 style={{
          fontFamily: 'Inter, sans-serif', fontWeight: 700,
          fontSize: 'clamp(56px, 8vw, 104px)', lineHeight: 0.98,
          letterSpacing: '-0.035em',
          margin: 0, marginBottom: 28,
          color: '#e6eef9',
          textWrap: 'balance',
        }}>
          Databricks for{' '}
          <span style={{
            background: 'linear-gradient(90deg, #2ec47a 0%, #7ef3c4 40%, #1a8fe0 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent', color: 'transparent',
            fontStyle: 'italic', fontWeight: 700,
          }}>AI.</span>
        </h1>

        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 20, lineHeight: 1.55,
          fontWeight: 400,
          color: '#8ea3c0',
          maxWidth: 820, margin: '0 auto 14px',
          textWrap: 'pretty',
        }}>
          A managed data platform that gives AI agents full data autonomy — every dataset in
          your stack becomes something an agent can actually query, join, write to, and operate on.
        </p>
        <p style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 13, lineHeight: 1.6,
          color: '#6b7e9a', maxWidth: 780, margin: '0 auto 44px',
          letterSpacing: '-0.005em',
        }}>
          One engine over Postgres, MySQL, SQLite, MongoDB, Redis, SeekDB, Iceberg, Lance,
          S3/GCS/Azure, Parquet, CSV — wired to agents through{' '}
          <span style={{color:'#2ee89a'}}>SQL</span>,{' '}
          <span style={{color:'#2ee89a'}}>REST</span>,{' '}
          <span style={{color:'#2ee89a'}}>shell</span>, and soon{' '}
          <span style={{color:'#2ee89a'}}>MCP</span>.
        </p>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginBottom: 20, flexWrap: 'wrap' }}>
          <a href="Cloud.html" style={{
            background: 'linear-gradient(90deg, #2ec47a, #1a8fe0)',
            color: '#fff', textDecoration: 'none',
            padding: '15px 30px', borderRadius: '2rem',
            fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
            transition: 'opacity 150ms ease-out',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >
            Join Cloud waitlist →
          </a>
          <a href="Cloud.html" style={{
            background: 'rgba(10,18,32,0.6)',
            border: '1px solid rgba(125,211,252,0.18)',
            color: '#e6eef9', textDecoration: 'none',
            padding: '14px 26px', borderRadius: '2rem',
            fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            backdropFilter: 'blur(6px)',
          }}>
            Book a demo
            <span style={{ color: '#6b7e9a' }}>→</span>
          </a>
        </div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
          color: '#6b7e9a', marginBottom: 72,
        }}>
          Drop it into Claude Code, Cursor, or any agent with a Bash tool
        </div>

        {/* Source strip */}
        <div style={{
          display: 'flex', gap: 12, justifyContent: 'center', alignItems: 'center',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500,
          color: '#6b7e9a', flexWrap: 'wrap',
        }}>
          <span style={{color:'#3a5578'}}>// one engine federates</span>
          {['POSTGRES', 'MYSQL', 'SQLITE', 'MONGO', 'REDIS', 'SEEKDB', 'PARQUET', 'ICEBERG', 'LANCE', 'S3 / GCS / AZURE'].map((s) => (
            <span key={s} style={{
              color: '#c4d2e2',
              padding: '4px 10px',
              border: '1px solid rgba(125,211,252,0.08)',
              borderRadius: 4,
              background: 'rgba(10,18,32,0.4)',
            }}>{s}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;