// CloudContent.jsx: Skardi Cloud landing, sending visitors into the console
const CONSOLE_URL = 'https://console.skardi.ai';

const CloudContent = () => {
  const track = (cta) => () => window.skardiTrack?.('cta_clicked', { cta, location: 'cloud_page' });

  const props = [
    {
      h: 'ReBAC authorization',
      d: 'Agents reach exactly the rows the asking user could read in the source. No more, no less, enforced on every path: SQL, MCP, pipelines, jobs.',
    },
    {
      h: 'Semantic catalog',
      d: 'Plain-English definitions on every table and column, mapped once and corrected everywhere, with lineage and agent-facing context built in.',
    },
    {
      h: 'Governance and audit',
      d: 'Access requests, approvals and a full audit stream that can answer why an agent returned or refused a row after the fact. Support reads audit, not data.',
    },
    {
      h: 'The loop, managed',
      d: 'The query ledger, promotion and review are wired in, so the questions your agents keep asking become governed tools without extra plumbing.',
    },
    {
      h: 'Managed federated engine',
      d: 'One query across Postgres, MySQL, Mongo, Redis, object stores and your SaaS tools. You bring credentials; we run the engine.',
    },
    {
      h: 'Observability built in',
      d: 'Per-workspace identity, metering and OpenTelemetry traces, metrics and logs on a pre-configured stack. No extra wiring.',
    },
  ];

  const faqs = [
    {
      q: 'Who can sign up?',
      a: 'Skardi Cloud is live and invite-only for now. Create an account with the invite code we sent you; if a teammate invited you to their workspace, leave the code blank. No code yet? Request a demo and we will get you one.',
    },
    {
      q: 'How is this different from self-hosting?',
      a: 'Self-hosting stays fully supported: same engine, same YAML, no lock-in. Skardi Cloud adds what the engine alone does not carry: ReBAC authorization, the semantic catalog, approvals and audit, plus provisioning, upgrades and multi-tenant isolation handled for you.',
    },
    {
      q: 'Will my data leave my region?',
      a: 'Cloud workspaces are pinned to a region you choose at provisioning time. For sources you already operate, Skardi connects via outbound credentials: your Postgres, your bucket, your policy.',
    },
    {
      q: 'How does pricing work?',
      a: 'Invited teams start on an introductory tier covering a single production workspace. Usage-based pricing for compute, storage, and egress ships before GA.',
    },
  ];

  const buttonBase = {
    display: 'block', width: '100%', boxSizing: 'border-box',
    padding: '14px 22px', borderRadius: '2rem',
    fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
    textAlign: 'center', textDecoration: 'none',
    transition: 'opacity 150ms ease-out',
  };

  return (
    <>
      {/* Hero + form */}
      <section style={{ position: 'relative', padding: '120px 32px 100px', overflow: 'hidden' }}>
        <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% 30%, #000 25%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 25%, transparent 80%)',
          pointerEvents: 'none',
        }} />
        <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: 1160, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'start',
        }}>
          <div style={{ paddingTop: 20 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 9999, marginBottom: 24,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: '0.06em',
              border: '1px solid rgba(46,232,154,0.22)',
              color: '#2ee89a',
              background: 'rgba(10,18,32,0.6)',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#2ee89a', boxShadow: '0 0 0 3px rgba(46,232,154,0.2)' }} />
              now live · invite only
            </div>
            <h1 style={{
              fontFamily: 'Inter, sans-serif', fontWeight: 700,
              fontSize: 'clamp(44px, 5.6vw, 72px)', lineHeight: 1.02,
              letterSpacing: '-0.03em', margin: 0, marginBottom: 24,
              color: '#e6eef9', textWrap: 'balance',
            }}>
              Skardi{' '}
              <span style={{
                background: 'linear-gradient(90deg, #2ec47a 0%, #7ef3c4 40%, #1a8fe0 100%)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text',
                WebkitTextFillColor: 'transparent', color: 'transparent',
              }}>Cloud</span>
            </h1>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.55,
              color: '#8ea3c0', margin: 0, marginBottom: 20, maxWidth: 560,
            }}>
              Enterprise Context, fully managed. The same self-improving engine with
              identity, authorization, a semantic catalog and observability wrapped
              around it, provisioned in minutes.
            </p>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65,
              color: '#6b7e9a', margin: 0, maxWidth: 540,
            }}>
              Create your account with the invite code we sent you, or sign in to a
              workspace you already belong to.
            </p>
          </div>

          {/* Form card */}
          <div style={{
            background: '#0a1220',
            border: '1px solid rgba(125,211,252,0.12)',
            borderRadius: 16,
            padding: 28,
            boxShadow: '0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(46,232,154,0.06)',
          }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 8,
            }}>Get started</div>
            <h3 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 600,
              color: '#e6eef9', margin: 0, marginBottom: 10, letterSpacing: '-0.015em',
            }}>Open the Skardi console</h3>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6,
              color: '#8ea3c0', margin: 0, marginBottom: 24,
            }}>
              Sign up with Google or your work email. We send a sign-in link, so there is
              no password to set.
            </p>

            <a href={`${CONSOLE_URL}/signup`} onClick={track('console_signup')}
              style={{
                ...buttonBase,
                background: 'linear-gradient(90deg, #2ec47a, #1a8fe0)',
                border: 'none', color: '#fff',
                marginBottom: 12,
              }}>
              Create account →
            </a>
            <a href={`${CONSOLE_URL}/login`} onClick={track('console_login')}
              style={{
                ...buttonBase,
                background: 'transparent',
                border: '1px solid rgba(125,211,252,0.22)',
                color: '#e6eef9',
              }}>
              Sign in
            </a>

            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.55,
              color: '#6b7e9a', margin: '20px 0 0', textAlign: 'center',
            }}>
              No invite code yet?{' '}
              <a href="/demo" onClick={track('demo')}
                style={{ color: '#2ee89a', textDecoration: 'none' }}>Request a demo</a>
              {' '}and we'll send you one.
            </p>
          </div>
        </div>
      </section>

      {/* What you get */}
      <section style={{ padding: '60px 32px 100px', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ maxWidth: 780, marginBottom: 48 }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>What you get</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(32px, 4.2vw, 44px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: '#e6eef9', textWrap: 'balance',
            }}>Everything that makes an engine safe to point an agent at</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {props.map((p) => (
              <div key={p.h} style={{
                padding: '22px 24px', borderRadius: 12,
                background: '#0a1220',
                border: '1px solid rgba(125,211,252,0.08)',
              }}>
                <h4 style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 600,
                  margin: 0, marginBottom: 10, color: '#e6eef9', letterSpacing: '-0.01em',
                }}>{p.h}</h4>
                <p style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6,
                  margin: 0, color: '#8ea3c0',
                }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '80px 32px 120px', background: '#060b14', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <div style={{ marginBottom: 40 }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 16,
            }}>FAQ</div>
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(30px, 4vw, 40px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: '#e6eef9',
            }}>Questions before you sign up</h2>
          </div>
          <div style={{
            border: '1px solid rgba(125,211,252,0.08)',
            borderRadius: 12, overflow: 'hidden',
          }}>
            {faqs.map((f, i) => (
              <div key={f.q} style={{
                padding: '22px 24px',
                background: i % 2 === 0 ? '#0a1220' : '#0e1a2e',
                borderBottom: i < faqs.length - 1 ? '1px solid rgba(125,211,252,0.06)' : 'none',
              }}>
                <h4 style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 600,
                  margin: 0, marginBottom: 8, color: '#e6eef9', letterSpacing: '-0.01em',
                }}>{f.q}</h4>
                <p style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.6,
                  margin: 0, color: '#8ea3c0',
                }}>{f.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

window.CloudContent = CloudContent;