// Product.jsx — open source engine vs governed cloud
const FeatureRow = ({ icon, title, body, accent }) => (
  <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 34, height: 34, borderRadius: 9, flexShrink: 0,
      background: `${accent}12`, border: `1px solid ${accent}2e`,
      color: accent, marginTop: 2,
    }}>{icon}</span>
    <div>
      <div style={{
        fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
        color: '#e6eef9', marginBottom: 3,
      }}>{title}</div>
      <div style={{
        fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.55,
        color: '#8ea3c0',
      }}>{body}</div>
    </div>
  </div>
);

const Product = () => {
  const stroke = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const ossRows = [
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M4 7h16M4 12h16M4 17h10" /></svg>,
      title: 'Federated SQL',
      body: 'One statement across 20+ sources, no application-side joins.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M4 17l6-6-6-6" /><path d="M12 19h8" /></svg>,
      title: 'Pipelines as tools',
      body: 'A YAML file becomes a REST endpoint and a shell verb your agent can call.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M12 8v4l3 3" /><circle cx="12" cy="12" r="9" /></svg>,
      title: 'Query ledger with intent',
      body: 'Every ask recorded with its purpose. The raw material of the loop.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.35-4.35" /></svg>,
      title: 'Retrieval built in',
      body: 'Vector, full text and hybrid search in SQL, embeddings inline.',
    },
  ];
  const cloudRows = [
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" /></svg>,
      title: 'ReBAC authorization',
      body: 'Agents reach exactly the rows the calling user could read in the source. No more, no less.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" /></svg>,
      title: 'Semantic catalog',
      body: 'Plain-English definitions on every table and column, mapped once, corrected everywhere.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M9 15l2 2 4-4" /></svg>,
      title: 'Governance',
      body: 'Access requests, approvals and a full audit stream. Support reads audit, not data.',
    },
    {
      icon: <svg width="18" height="18" viewBox="0 0 24 24" {...stroke}><path d="M17.5 19a4.5 4.5 0 1 0-1.9-8.6 6 6 0 1 0-11 3.2" /><path d="M12 12v9" /><path d="m8 17 4 4 4-4" /></svg>,
      title: 'Managed workspaces',
      body: 'Isolated tenants, GitOps config, metering and observability wired in.',
    },
  ];

  const linkStyle = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
    textDecoration: 'none', marginTop: 26,
  };

  return (
    <section style={{ padding: '56px 32px', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>Product</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 54px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 20px',
            color: '#e6eef9', textWrap: 'balance',
          }}>Enterprise-ready from day one</h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: '#8ea3c0', maxWidth: 640, margin: '0 auto',
          }}>
            Skardi Cloud wraps the engine in identity, authorization and a catalog.
            Prefer your own infra? Run the same engine in your VPC, no lock-in.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(330px, 1fr))',
          gap: 24,
        }}>
          {/* Cloud card */}
          <div style={{
            padding: '28px 32px',
            borderRadius: 20,
            border: '1px solid rgba(46,232,154,0.28)',
            background: 'linear-gradient(180deg, rgba(29,168,105,0.09) 0%, rgba(14,26,46,0.5) 45%)',
            boxShadow: '0 0 60px rgba(46,232,154,0.06)',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <span style={{
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 700,
                color: '#e6eef9', letterSpacing: '-0.01em',
              }}>Skardi Cloud</span>
              <span style={{
                padding: '3px 9px', borderRadius: 4,
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, fontWeight: 500,
                letterSpacing: '0.05em',
                background: 'rgba(46,232,154,0.1)', border: '1px solid rgba(46,232,154,0.25)',
                color: '#2ee89a',
              }}>MANAGED</span>
            </div>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
              color: '#8ea3c0', margin: '0 0 22px',
            }}>The same engine with identity, authorization and a catalog around it.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {cloudRows.map(r => <FeatureRow key={r.title} {...r} accent="#2ee89a" />)}
            </div>
            <a href="Demo.html"
              style={{ ...linkStyle, color: '#2ee89a' }}
              onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
              onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
            >Book a demo →</a>
          </div>

          {/* Self-host card */}
          <div style={{
            padding: '28px 32px',
            borderRadius: 20,
            border: '1px solid rgba(125,211,252,0.12)',
            background: 'rgba(14,26,46,0.5)',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <span style={{
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 700,
                color: '#e6eef9', letterSpacing: '-0.01em',
              }}>Self-hosted</span>
              <span style={{
                padding: '3px 9px', borderRadius: 4,
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, fontWeight: 500,
                letterSpacing: '0.05em',
                background: 'rgba(125,211,252,0.08)', border: '1px solid rgba(125,211,252,0.16)',
                color: '#9aacc2',
              }}>APACHE 2.0</span>
            </div>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
              color: '#8ea3c0', margin: '0 0 22px',
            }}>The same engine, open source and in your VPC. No black box, no lock-in.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {ossRows.map(r => <FeatureRow key={r.title} {...r} accent="#7ec4ff" />)}
            </div>
            <a href="https://github.com/SkardiLabs/skardi" target="_blank" rel="noopener noreferrer"
              style={{ ...linkStyle, color: '#7ec4ff' }}
              onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
              onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
            >View on GitHub →</a>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Product = Product;