Hero.astro

---
import { useTranslations, getBaseUrl } from '../i18n/utils';
import type { Lang } from '../i18n/ui';

interface Props { lang?: Lang; }
const lang = Astro.props.lang ?? 'en';
const t = useTranslations(lang);
const base = getBaseUrl(lang);
---

<section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16" aria-label="Hero" style="background: linear-gradient(180deg, #0a0f1e 0%, #0f172a 60%, #0a0f1e 100%);">
  <!-- Background decorative grid -->
  <div class="absolute inset-0 opacity-10" style="background-image: linear-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1px, transparent 1px); background-size: 60px 60px;"></div>

  <!-- Radial glow top center -->
  <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] rounded-full opacity-20 blur-3xl pointer-events-none" style="background: radial-gradient(ellipse at center, #3b82f6 0%, transparent 70%);"></div>

  <!-- Radial glow bottom left -->
  <div class="absolute bottom-0 left-0 w-[400px] h-[400px] rounded-full opacity-10 blur-3xl pointer-events-none" style="background: radial-gradient(ellipse at center, #8b5cf6 0%, transparent 70%);"></div>

  <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-14 sm:py-16">
    <!-- Tagline badge -->
    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium mb-8 border" style="background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #60a5fa;">
      <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
      {t('hero.badge')}
    </div>

    <!-- Main Heading with typing effect -->
    <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-white mb-2 leading-tight">
      {t('hero.heading1')}
    </h1>
    <div class="h-[1.2em] text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6">
      <span id="hero-typed" class="gradient-text typing-cursor"></span>
    </div>

    <!-- Subtitle -->
    <p class="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
      {t('hero.subtitle')}
    </p>

    <!-- CTA Buttons -->
    <div class="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-4 mb-12">
      <a
        href={`${base}/docs/quick-start`}
        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-500 text-white font-semibold px-8 py-3.5 rounded-lg transition-all duration-200 glow-blue text-base focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
      >
        {t('hero.getStarted')}
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14M12 5l7 7-7 7"/>
        </svg>
      </a>
      <a
        href="https://github.com/helmcode/agent_crew"
        target="_blank"
        rel="noopener noreferrer"
        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 border border-slate-600 hover:border-slate-400 text-slate-300 hover:text-white font-semibold px-8 py-3.5 rounded-lg transition-all duration-200 text-base focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
        </svg>
        {t('hero.viewGithub')}
        <span class="sr-only">(opens in new tab)</span>
      </a>
      <a
        href="https://calendly.com/helmcode/work"
        target="_blank"
        rel="noopener noreferrer"
        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 border border-violet-500/50 hover:border-violet-400 text-violet-300 hover:text-white font-semibold px-8 py-3.5 rounded-lg transition-all duration-200 text-base focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
        style="background: rgba(139, 92, 246, 0.08);"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
          <line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/>
          <line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
        {t('hero.bookCall')}
        <span class="sr-only">(opens in new tab)</span>
      </a>
    </div>

    <!-- App Preview Mockup -->
    <div class="relative max-w-4xl mx-auto reveal-scale">
      <div class="rounded-xl border border-slate-700/60 overflow-hidden shadow-2xl" style="background-color: #0d1117;">
        <!-- Browser chrome -->
        <div class="flex items-center gap-2 px-4 py-2.5 border-b border-slate-700/60" style="background-color: #161b22;">
          <div class="flex gap-1.5">
            <div class="w-3 h-3 rounded-full bg-red-500/70"></div>
            <div class="w-3 h-3 rounded-full bg-yellow-500/70"></div>
            <div class="w-3 h-3 rounded-full bg-green-500/70"></div>
          </div>
          <div class="flex-1 mx-8">
            <div class="flex items-center gap-2 px-3 py-1 rounded-md text-xs text-slate-400 max-w-xs mx-auto" style="background-color: #0d1117;">
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
              agentcrew.sh
            </div>
          </div>
        </div>
        <!-- App screenshot placeholder / mockup -->
        <div class="relative" style="aspect-ratio: 16/9; background: #0f1729;">
          <!-- Sidebar mockup -->
          <div class="absolute left-0 top-0 bottom-0 w-48 border-r border-slate-700/40" style="background-color: #111827;">
            <div class="p-4">
              <div class="flex items-center gap-2 mb-6">
                <div class="w-6 h-6 rounded flex items-center justify-center" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="white"><circle cx="5" cy="9" r="3"/><circle cx="19" cy="9" r="3"/><circle cx="12" cy="5" r="3"/></svg>
                </div>
                <span class="text-white text-sm font-bold">AgentCrew</span>
              </div>
              <div class="space-y-1">
                <div class="flex items-center gap-2 px-3 py-2 rounded-lg text-white text-xs font-medium" style="background: rgba(59, 130, 246, 0.15);">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                  Teams
                </div>
                <div class="flex items-center gap-2 px-3 py-2 text-slate-400 text-xs">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                  Schedules
                </div>
                <div class="flex items-center gap-2 px-3 py-2 text-slate-400 text-xs">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                  Webhooks
                </div>
                <div class="flex items-center gap-2 px-3 py-2 text-slate-400 text-xs">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                  Post-Actions
                </div>
                <div class="flex items-center gap-2 px-3 py-2 text-slate-400 text-xs">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3M12 8v8M9 11h6"/></svg>
                  Variables
                </div>
              </div>
              <div class="mt-4 pt-4 border-t border-slate-700/40">
                <p class="text-slate-500 text-[10px] font-semibold uppercase tracking-wider mb-2 px-3">Settings</p>
                <div class="space-y-1">
                  <div class="flex items-center gap-2 px-3 py-2 text-slate-400 text-xs">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Profile
                  </div>
                  <div class="flex items-center gap-2 px-3 py-2 text-slate-400 text-xs">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a4 4 0 0 0-8 0v2"/><path d="M12 12v3"/></svg>
                    Organization
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Main content mockup with team cards -->
          <div class="absolute left-48 top-0 right-0 bottom-0 p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <!-- Team card 1: LinkedIn Content -->
              <div class="p-4 rounded-lg border border-slate-700/50 float-animation" style="background: rgba(17, 24, 39, 0.8);">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-white text-xs font-bold">LinkedIn Content Agent</span>
                  <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-violet-500/15 text-violet-400 border border-violet-500/30">1 agent</span>
                </div>
                <p class="text-slate-400 text-[10px] leading-relaxed mb-3">Generates LinkedIn posts with images and Slack alerts</p>
                <div class="flex items-center gap-2">
                  <div class="flex gap-1">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center text-[8px] font-bold" style="background: rgba(167, 139, 250, 0.2); color: #a78bfa;">L</div>
                  </div>
                  <span class="text-[9px] text-slate-500 border border-slate-700/50 rounded px-1.5 py-0.5">Freepik MCP</span>
                  <span class="text-[9px] text-slate-500 border border-slate-700/50 rounded px-1.5 py-0.5">Slack MCP</span>
                </div>
              </div>
              <!-- Team card 2: Survey Moderator -->
              <div class="p-4 rounded-lg border border-slate-700/50 float-animation float-animation-delay" style="background: rgba(17, 24, 39, 0.8);">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-white text-xs font-bold">Survey Moderator</span>
                  <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500/15 text-amber-400 border border-amber-500/30">1 agent</span>
                </div>
                <p class="text-slate-400 text-[10px] leading-relaxed mb-3">Moderates survey responses and exports Excel reports</p>
                <div class="flex items-center gap-2">
                  <div class="flex gap-1">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center text-[8px] font-bold" style="background: rgba(251, 191, 36, 0.2); color: #fbbf24;">L</div>
                  </div>
                  <span class="text-[9px] text-slate-500 border border-slate-700/50 rounded px-1.5 py-0.5">PostgreSQL MCP</span>
                </div>
              </div>
              <!-- Team card 3: QA Engineer -->
              <div class="p-4 rounded-lg border border-slate-700/50 float-animation" style="background: rgba(17, 24, 39, 0.8); animation-delay: -1s;">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-white text-xs font-bold">AI QA Engineer</span>
                  <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-green-500/15 text-green-400 border border-green-500/30">1 agent</span>
                </div>
                <p class="text-slate-400 text-[10px] leading-relaxed mb-3">Reviews code on every Merge Request automatically</p>
                <div class="flex items-center gap-2">
                  <div class="flex gap-1">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center text-[8px] font-bold" style="background: rgba(34, 197, 94, 0.2); color: #4ade80;">L</div>
                  </div>
                  <span class="text-[9px] text-slate-500 border border-slate-700/50 rounded px-1.5 py-0.5">GitLab MCP</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Reflection glow -->
      <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-3/4 h-16 rounded-full opacity-30 blur-2xl pointer-events-none" style="background: linear-gradient(90deg, #3b82f6, #8b5cf6);"></div>
    </div>

    <!-- Bottom badge strip -->
    <div class="flex flex-wrap items-center justify-center gap-3 mt-16">
      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium text-slate-400 border border-slate-700/60 bg-slate-900/50">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>
        </svg>
        {t('hero.badgeOpenSource')}
      </span>
      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium text-slate-400 border border-slate-700/60 bg-slate-900/50">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
        </svg>
        {t('hero.badgeDocker')}
      </span>
      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium text-slate-400 border border-slate-700/60 bg-slate-900/50">
        <span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
        {t('hero.badgeAny')}
      </span>
    </div>

    <!-- Decorative gradient line -->
    <div class="absolute bottom-0 left-0 right-0 h-px" style="background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.5) 30%, rgba(139, 92, 246, 0.5) 70%, transparent 100%);"></div>
  </div>
</section>

<script define:vars={{ lang }}>
  const phrases = lang === 'es'
    ? ['Equipos de Ingenieria', 'Equipos de Marketing', 'Equipos de Datos', 'Equipos de Soporte', 'Cualquier Equipo']
    : ['Engineering Teams', 'Marketing Teams', 'Data Analysis Teams', 'Support Teams', 'Any Team You Need'];

  const el = document.getElementById('hero-typed');
  if (el) {
    let phraseIdx = 0;
    let charIdx = 0;
    let deleting = false;
    const typeSpeed = 80;
    const deleteSpeed = 40;
    const pauseEnd = 2000;
    const pauseStart = 300;

    function tick() {
      const current = phrases[phraseIdx];
      if (!deleting) {
        el.textContent = current.slice(0, charIdx + 1);
        charIdx++;
        if (charIdx === current.length) {
          setTimeout(() => { deleting = true; tick(); }, pauseEnd);
          return;
        }
        setTimeout(tick, typeSpeed);
      } else {
        el.textContent = current.slice(0, charIdx - 1);
        charIdx--;
        if (charIdx === 0) {
          deleting = false;
          phraseIdx = (phraseIdx + 1) % phrases.length;
          setTimeout(tick, pauseStart);
          return;
        }
        setTimeout(tick, deleteSpeed);
      }
    }
    setTimeout(tick, 600);
  }
</script>