import ServerStatus from "../islands/ServerStatus.tsx";

const DASHBOARD_URL = "https://dashboard.core.dev";

function GitHubIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7">
      <path d="M12 .5a12 12 0 0 0-3.79 23.4c.6.11.82-.26.82-.58v-2.02c-3.34.73-4.04-1.61-4.04-1.61-.55-1.4-1.34-1.77-1.34-1.77-1.09-.74.08-.73.08-.73 1.2.09 1.83 1.24 1.83 1.24 1.07 1.83 2.81 1.3 3.5 1 .11-.78.42-1.3.76-1.6-2.67-.31-5.47-1.34-5.47-5.95 0-1.31.47-2.39 1.24-3.24-.13-.3-.54-1.55.12-3.23 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.68.25 2.93.12 3.23.77.85 1.23 1.93 1.23 3.24 0 4.62-2.8 5.63-5.48 5.94.43.38.81 1.12.81 2.25v3.34c0 .32.22.69.82.57A12 12 0 0 0 12 .5Z" />
    </svg>
  );
}

function CloudflareIcon() {
  return (
    <svg viewBox="0 0 192 192" fill="currentColor" class="h-7 w-7">
      <path d="M104.6 102.7c-1.2-6.7-7.6-12.2-14.4-12.2H73c-1.8 0-3.2 1.4-3.4 3.2l-1.1 8.9c0 .2 0 .5.1.7l.8 3.6c.3 1.3 1.5 2.3 2.9 2.3h31c2.1 0 3.7-2 3.3-4.1Zm69.6-26.1c-4.8 0-9.2 2-12.4 5.3-3.5-13-15.3-22.4-29.3-22.4-14.5 0-26.8 10.2-29.9 23.8-.3 1.5 1 3 2.5 3h17.6c6.7 0 13.2 5.5 14.4 12.2l2.2 12.5c.3 1.7 2.1 3 3.8 3h26.1c13.6 0 24.6-11 24.6-24.6 0-12.6-9.6-23-22.2-23Z" />
      <path d="M111.8 118.1H65.3c-.6 0-1.1.5-1.1 1.1v1.2c0 .6.5 1.1 1.1 1.1h46.5c.6 0 1.1-.5 1.1-1.1v-1.2c0-.6-.5-1.1-1.1-1.1Zm-53.7 0H23.1c-.6 0-1.1.5-1.1 1.1v1.2c0 .6.5 1.1 1.1 1.1h35c.6 0 1.1-.5 1.1-1.1v-1.2c0-.6-.5-1.1-1.1-1.1Zm42.4-10.8H68c-.6 0-1.1.5-1.1 1.1v1.2c0 .6.5 1.1 1.1 1.1h32.5c.6 0 1.1-.5 1.1-1.1v-1.2c0-.6-.5-1.1-1.1-1.1Zm-26.3 0H15.1c-.6 0-1.1.5-1.1 1.1v1.2c0 .6.5 1.1 1.1 1.1h58.9c.6 0 1.1-.5 1.1-1.1v-1.2c0-.6-.5-1.1-1.1-1.1Z" />
    </svg>
  );
}

export default function Home() {
  return (
    <main class="bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.08),transparent_35%)]">
      <section class="relative mx-auto flex max-w-6xl flex-col gap-12 px-6 pb-16 pt-20 md:flex-row md:items-center md:justify-between">
        <div
          class="absolute inset-x-10 top-12 h-64 rounded-3xl bg-accent/10 blur-3xl"
          aria-hidden
        />
        <div class="relative z-10 max-w-2xl space-y-6">
          <p class="text-sm uppercase tracking-[0.3em] text-accent">
            Orquestração
          </p>
          <h1 class="text-4xl font-bold leading-[1.1] text-foreground sm:text-5xl">
            Orquestração de Infraestrutura Centralizada
          </h1>
          <p class="max-w-xl text-lg text-foreground/80">
            Gerencie Workers, Pages e Repositórios em um único painel. Fluxos
            GitHub e Cloudflare operando lado a lado, com observabilidade
            nativa.
          </p>
          <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
            <a
              class="inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-surface shadow-lg shadow-accent/30 transition hover:-translate-y-0.5 hover:shadow-accent/50"
              href={DASHBOARD_URL}
            >
              Acessar Console
            </a>
            <div class="flex items-center gap-3 text-sm text-foreground/60">
              <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
              Deploy ativo em rede edge global
            </div>
          </div>
        </div>
        <div class="relative z-10 w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-6 text-sm text-foreground/80 shadow-2xl shadow-black/40">
          <div class="mb-4 flex items-center justify-between text-xs uppercase tracking-[0.2em] text-foreground/60">
            <span>Edge workload</span>
            <span class="rounded-full bg-accent/10 px-3 py-1 text-accent">
              Live
            </span>
          </div>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-foreground/70">Workers ativos</span>
              <span class="text-lg font-semibold text-foreground">128</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-foreground/70">Repos monitorados</span>
              <span class="text-lg font-semibold text-foreground">56</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-foreground/70">Páginas entregues</span>
              <span class="text-lg font-semibold text-foreground">324</span>
            </div>
            <div class="pt-2">
              <ServerStatus />
            </div>
          </div>
        </div>
      </section>

      <section class="mx-auto max-w-6xl px-6 pb-20">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div>
            <p class="text-sm uppercase tracking-[0.25em] text-accent">
              Integrações Suportadas
            </p>
            <h2 class="text-3xl font-semibold text-foreground">
              Pipelines prontos para GitHub e Cloudflare
            </h2>
            <p class="mt-2 max-w-2xl text-foreground/70">
              Conecte repositórios GitHub, sincronize ambientes e publique
              workers em minutos. Observabilidade e segurança alinhadas para
              equipes de plataforma.
            </p>
          </div>
          <a
            class="inline-flex items-center gap-2 text-sm font-semibold text-accent underline decoration-accent/40 underline-offset-4 transition hover:decoration-accent"
            href="https://status.core.dev"
            target="_blank"
            rel="noreferrer"
          >
            Ver status em tempo real
            <span aria-hidden class="text-lg">↗</span>
          </a>
        </div>
        <div class="mt-10 grid gap-6 md:grid-cols-2">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-lg shadow-black/30">
            <div class="flex items-center gap-3 text-accent">
              <span class="rounded-lg bg-accent/10 p-2 text-accent">
                <GitHubIcon />
              </span>
              <p class="text-sm font-semibold uppercase tracking-[0.2em] text-foreground">
                GitHub Ops
              </p>
            </div>
            <h3 class="mt-4 text-xl font-semibold text-foreground">
              Releases controladas
            </h3>
            <p class="mt-2 text-foreground/70">
              Automatize PR checks, proteja branches principais e promova
              releases para edge com auditoria completa.
            </p>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-lg shadow-black/30">
            <div class="flex items-center gap-3 text-accent">
              <span class="rounded-lg bg-accent/10 p-2 text-accent">
                <CloudflareIcon />
              </span>
              <p class="text-sm font-semibold uppercase tracking-[0.2em] text-foreground">
                Cloudflare
              </p>
            </div>
            <h3 class="mt-4 text-xl font-semibold text-foreground">
              Workers e Pages
            </h3>
            <p class="mt-2 text-foreground/70">
              Deploys paralelos, métricas em tempo real e roteamento inteligente
              com baixa latência.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}