<template>
  <div class="landing">
    <!-- Nav -->
    <header class="nav">
      <div class="nav-inner">
        <div class="logo-wrap">
          <span class="material-symbols-outlined" style="color:#d95c41;font-size:24px">terminal</span>
          <span class="logo-text">FDSA</span>
        </div>
        <div class="nav-links">
          <a href="/modules/m1-foundations">Course</a>
          <a href="/labs/l1-first-agent">Labs</a>
          <a href="/skills">Skills</a>
          <a href="/blog">Blog</a>
          <a href="/buy" class="nav-cta">Enroll</a>
        </div>
      </div>
    </header>

    <main>
      <!-- Hero -->
      <section class="hero-sec">
        <div class="hero-grid"></div>
        <div class="hero-glow"></div>
        <div class="hero-inner">
          <div class="hero-pill"><span class="pill-dot"></span>NOW ENROLLING</div>
          <h1>Agentic Engineering</h1>
          <p class="hero-sub">65 lessons, 13 labs, 20 skill kits. Build, deploy, and maintain production-grade AI agent systems.</p>
          <div class="hero-actions">
            <a href="/buy" class="btn-p btn-primary">Enroll Now — $97</a>
            <a href="/modules/m1-foundations" class="btn-p btn-ghost">View Curriculum</a>
          </div>
        </div>
        <div class="term-widget">
          <div class="term-dots"><span class="td r"></span><span class="td y"></span><span class="td g"></span></div>
          <div class="term-l c">INITIALIZING AGENT_PLANNER...</div>
          <div class="term-l">FETCHING LLM CONTEXT: DONE</div>
          <div class="term-l a">EXECUTING: search("agentic patterns")</div>
          <div class="term-l">ANALYZING RESULT_SET: SUCCESS</div>
          <div class="term-bar"><div class="term-fill"></div></div>
        </div>
      </section>

      <!-- Features -->
      <section class="sec">
        <div class="sec-label">Core Capabilities</div>
        <div class="feat-grid">
          <div class="gc" v-for="f in features" :key="f.t">
            <div class="gci"><span class="material-symbols-outlined">{{ f.icon }}</span></div>
            <h3 class="gc-t">{{ f.t }}</h3>
            <p class="gc-d">{{ f.d }}</p>
          </div>
        </div>
      </section>

      <!-- Bento Curriculum -->
      <section class="sec">
        <div class="sec-label">Engineering Curriculum</div>
        <h2 class="sec-title">8 Modules. 65 Lessons. Zero Fluff.</h2>
        <div class="bento">
          <div v-for="(m, i) in modules" :key="i" class="bi" :class="m.s">
            <div class="bi-n">{{ m.n }}</div>
            <div class="bi-ic"><span class="material-symbols-outlined">{{ m.ic }}</span></div>
            <h4 class="bi-t">{{ m.t }}</h4>
            <p class="bi-d">{{ m.d }}</p>
            <div class="bi-tags"><span v-for="t in m.tg" :key="t">{{ t }}</span></div>
            <div v-if="m.p" class="bi-bar"><div class="bi-fill" :style="{width:m.p}"></div></div>
          </div>
        </div>
      </section>

      <!-- Pricing -->
      <section class="sec pricing-sec">
        <div class="pc gc">
          <span class="material-symbols-outlined" style="font-size:36px;color:#d95c41;margin-bottom:8px">verified</span>
          <h2 style="font-size:24px;font-weight:700;margin-bottom:4px">Full Course Access</h2>
          <p style="color:#888;font-size:14px;margin-bottom:20px">Lifetime updates included</p>
          <div style="font-size:48px;font-weight:800;color:#d95c41;margin-bottom:24px">$97</div>
          <ul class="pu">
            <li v-for="item in perks" :key="item"><span class="material-symbols-outlined" style="font-size:18px;color:#d95c41">check_circle</span>{{ item }}</li>
          </ul>
          <a href="/buy" class="btn-p btn-primary" style="width:100%;text-align:center">Enroll Now</a>
          <div class="pg">30-Day Guarantee</div>
        </div>
      </section>
    </main>

    <footer class="ft">
      <div class="ft-inner">
        <div class="ft-l">FDSA</div>
        <div class="ft-links">
          <a href="/troubleshooting">FAQ</a>
          <a href="/certificate">Certificate</a>
          <a href="/buy">Pricing</a>
        </div>
        <div class="ft-c">FDSA Agency — Agentic Engineering Course</div>
      </div>
    </footer>

    <nav class="bn">
      <a href="/" class="bn-i active"><span class="material-symbols-outlined">home</span><span>Home</span></a>
      <a href="/modules/m1-foundations" class="bn-i"><span class="material-symbols-outlined">school</span><span>Modules</span></a>
      <a href="/labs/l1-first-agent" class="bn-i"><span class="material-symbols-outlined">terminal</span><span>Labs</span></a>
      <a href="/buy" class="bn-i"><span class="material-symbols-outlined">payments</span><span>Pricing</span></a>
    </nav>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const features = [
  { icon: 'settings_suggest', t: 'Agent Harness', d: 'Own your harness. 6-level security ladder, verifier pattern, hooks.' },
  { icon: 'speed', t: 'Software Factory', d: 'Systems that build systems. Agent chains, teams, mental models.' },
  { icon: 'psychology', t: 'Extensible Software', d: 'Pluggable, composable. Beyond MCP, tool design, CI/CD.' },
  { icon: 'all_inclusive', t: 'Always-On Agents', d: 'Autoresearch, heartbeat execution, meta-agents. Run 24/7.' },
  { icon: 'terminal', t: 'Agentic Access', d: 'API-first design, deployment modes, service connectors.' },
  { icon: 'forum', t: 'Tokenomics', d: 'Cascade routing, pass@k evals, 3x cost rule, optimization.' },
]

const modules = [
  { n:'01', ic:'psychology', t:'Foundations', d:'What agents are, harness vs model, decision frameworks.', tg:['LLM + Tools + Loop','Agent Loop','Trust'], p:'100%', s:'w8' },
  { n:'02', ic:'handyman', t:'Architecture', d:'Tools, context, memory, skills, codebase patterns.', tg:['4 Pillars','Tools','Memory'], s:'w4' },
  { n:'03', ic:'shield', t:'Safety & Security', d:'6-level ladder, hooks, verifier pattern, defense-in-depth.', tg:['L0-L5','Verifier','ACIP'], s:'w4' },
  { n:'04', ic:'hub', t:'Orchestration', d:'Multi-agent patterns, P-threads, P2P, CEO Board.', tg:['Teams','Chains','P2P'], s:'w8' },
  { n:'05', ic:'rocket_launch', t:'Production', d:'CI/CD, shadow deploys, observability, rollback.', tg:['Deploy','Monitor','Rollback'], s:'w6' },
  { n:'06', ic:'analytics', t:'Economics', d:'Model pricing, cascade routing, pass@k, cost optimization.', tg:['100x Range','3x Rule','Evals'], s:'w6' },
  { n:'07', ic:'architecture', t:'Advanced', d:'Autoresearch, meta-agents, beyond MCP, always-on.', tg:['Self-Improving','Meta-Agents'], s:'w4' },
  { n:'08', ic:'trophy', t:'Capstone', d:'Build a production-grade multi-agent system.', tg:['Brand Monitor','CEO Board','Pipeline'], s:'w8 hl' },
]

const perks = [
  '65 lessons across 8 modules',
  '13 scaffolded labs with solutions',
  '56 quiz questions with answer keys',
  '20 production-ready skill files (7 kits)',
  'Lifetime access + future updates',
]

// Scroll reveal animations
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('revealed')
      }
    })
  }, { threshold: 0.1 })

  // Observe sections (skip hero — always visible)
  document.querySelectorAll('.sec').forEach(el => {
    el.classList.add('reveal')
    observer.observe(el)
  })

  // Observe individual bento items with stagger
  document.querySelectorAll('.bi').forEach((el, i) => {
    el.style.transitionDelay = (i * 0.05) + 's'
    el.classList.add('reveal')
    observer.observe(el)
  })

  // Observe feature cards with stagger
  document.querySelectorAll('.feat-grid .gc').forEach((el, i) => {
    el.style.transitionDelay = (i * 0.08) + 's'
    el.classList.add('reveal')
    observer.observe(el)
  })
})
</script>

<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.landing {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: #0a0a0a; color: #e8e8e8;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  overflow-x: hidden;
}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.8);backdrop-filter:blur(16px);border-bottom:1px solid #1a1a1a}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px}
.logo-wrap{display:flex;align-items:center;gap:8px}
.logo-text{font-weight:800;font-size:20px;letter-spacing:-0.5px;color:#e8e8e8}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:#888;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#e8e8e8}
.nav-cta{background:#d95c41;color:#fff!important;padding:8px 20px;border-radius:6px;font-weight:600}
.nav-cta:hover{background:#c44a30!important}

/* Hero */
.hero-sec{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:140px 24px 80px;text-align:center;position:relative;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(217,92,65,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(217,92,65,0.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(217,92,65,0.08) 0%,transparent 60%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:680px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(217,92,65,0.1);border:1px solid rgba(217,92,65,0.3);padding:6px 16px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#d95c41;margin-bottom:24px}
.pill-dot{width:6px;height:6px;border-radius:50%;background:#d95c41;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-sec h1{font-size:56px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;color:#f0f0f0;margin-bottom:20px}
.hero-sub{font-size:18px;color:#888;line-height:1.6;margin-bottom:36px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-p{display:inline-block;padding:14px 32px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:all .2s}
.btn-primary{background:#d95c41;color:#fff}
.btn-primary:hover{background:#c44a30;transform:translateY(-1px)}
.btn-ghost{color:#e8e8e8;border:1px solid #222}
.btn-ghost:hover{border-color:#555}

/* Terminal */
.term-widget{margin-top:48px;max-width:480px;width:100%;background:rgba(17,17,17,0.9);backdrop-filter:blur(12px);border:1px solid #222;border-radius:12px;padding:20px;text-align:left;position:relative;overflow:hidden}
.term-widget::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#d95c41,transparent);opacity:.5}
.term-dots{display:flex;gap:8px;margin-bottom:16px}
.td{width:10px;height:10px;border-radius:50%}
.td.r{background:#ef4444}.td.y{background:#eab308}.td.g{background:#22c55e}
.term-l{font-family:'DM Mono',monospace;font-size:12px;color:#888;line-height:2}
.term-l.c{color:#d95c41}.term-l.a{color:#7bd0ff}
.term-bar{margin-top:12px;height:4px;background:#1a1a1a;border-radius:2px;overflow:hidden}
.term-fill{height:100%;width:66%;background:linear-gradient(90deg,#d95c41,#e87d2f);border-radius:2px;animation:prog 3s ease-in-out infinite}
@keyframes prog{0%{width:20%;opacity:.6}50%{width:75%;opacity:1}100%{width:20%;opacity:.6}}

/* Section */
.sec{max-width:1280px;margin:0 auto;padding:80px 24px}
.sec-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d95c41;text-align:center;margin-bottom:48px}
.sec-title{text-align:center;font-size:32px;font-weight:700;margin-bottom:48px;color:#f0f0f0}

/* Glass card */
.gc{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:28px 24px;transition:all .4s ease}
.gc:hover{border-color:rgba(217,92,65,0.3)}

/* Scroll reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}
.bi.reveal{opacity:0;transform:translateY(16px)}
.bi.reveal.revealed{opacity:1;transform:translateY(0)}
.feat-grid .gc.reveal{opacity:0;transform:translateY(16px)}
.feat-grid .gc.reveal.revealed{opacity:1;transform:translateY(0)}

/* Feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.03);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.feat-grid .gc{border:none;border-radius:0}
.gci{width:48px;height:48px;border-radius:10px;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.gci .material-symbols-outlined{color:#d95c41;font-size:24px}
.gc-t{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:8px}
.gc-d{font-size:13px;color:#888;line-height:1.6}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bi{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:24px;position:relative;overflow:hidden;transition:all .3s}
.bi:hover{border-color:rgba(217,92,65,0.3)}
.bi.hl{border-color:rgba(217,92,65,0.2)}
.w8{grid-column:span 8}.w6{grid-column:span 6}.w4{grid-column:span 4}
.bi-n{position:absolute;top:12px;right:16px;font-size:40px;font-weight:800;opacity:0.06;color:#fff;user-select:none}
.bi-ic{width:36px;height:36px;border-radius:8px;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.bi-ic .material-symbols-outlined{color:#d95c41;font-size:20px}
.bi-t{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:6px}
.bi-d{font-size:13px;color:#888;line-height:1.5;margin-bottom:12px}
.bi-tags{display:flex;flex-wrap:wrap;gap:6px}
.bi-tags span{font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:#666}
.bi-bar{margin-top:16px;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
.bi-fill{height:100%;background:linear-gradient(90deg,#d95c41,#e87d2f);border-radius:2px}

/* Pricing */
.pricing-sec{display:flex;justify-content:center}
.pc{max-width:420px;width:100%;text-align:center;padding:36px}
.pc:hover{box-shadow:0 0 30px rgba(217,92,65,0.08)}
.pu{list-style:none;text-align:left;margin-bottom:24px}
.pu li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:14px;color:#888}
.pu li:last-child{border-bottom:none}
.pg{font-size:11px;color:#555;margin-top:16px;letter-spacing:.05em;text-transform:uppercase}

/* Footer */
.ft{border-top:1px solid #1a1a1a;padding:32px 24px;text-align:center}
.ft-inner{max-width:1280px;margin:0 auto}
.ft-l{font-size:18px;font-weight:800;color:#f0f0f0;margin-bottom:16px}
.ft-links{display:flex;justify-content:center;gap:24px;margin-bottom:16px}
.ft-links a{color:#555;text-decoration:none;font-size:13px;transition:color .2s}
.ft-links a:hover{color:#888}
.ft-c{font-size:12px;color:#444}

/* Bottom nav */
.bn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.85);backdrop-filter:blur(16px);border-top:1px solid #1a1a1a;height:64px;padding:4px 16px 12px;justify-content:space-around;align-items:center}
.bn-i{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#555;font-size:10px;font-weight:600;transition:color .2s}
.bn-i.active{color:#d95c41}.bn-i:hover{color:#888}
.bn-i .material-symbols-outlined{font-size:22px}

@media (max-width:768px){
  .nav-links a:not(.nav-cta){display:none}
  .hero-sec h1{font-size:32px}
  .hero-sub{font-size:16px}
  .feat-grid{grid-template-columns:1fr}
  .w8,.w6,.w4{grid-column:span 12}
  .bn{display:flex}
  .landing{padding-bottom:64px}
  .sec{padding:48px 16px}
}
@media(min-width:769px)and(max-width:1024px){
  .w8{grid-column:span 12}
  .w6{grid-column:span 6}
  .w4{grid-column:span 6}
}
</style>
