/* Sections: Team Agents, Impact, CTA, Footer */

const TEAM = [
  { name: 'Alex Morgan',   role: 'AI Architect',       avatar: 'A', c: '#22d3ee',
    tags: ['Strategy', 'AI Systems', 'Roadmaps'], status: 'Online · leading Nova' },
  { name: 'Maya Stone',    role: 'Frontend Lead',      avatar: 'M', c: '#5eead4',
    tags: ['React', 'Next.js', 'Design Systems'], status: 'Shipping Atlas Workspace' },
  { name: 'Ethan Carter',  role: 'Blockchain Engineer',avatar: 'E', c: '#7c5cff',
    tags: ['Solidity', 'L1 / L2', 'DeFi'], status: 'Auditing Orion contracts' },
  { name: 'Sofia Lane',    role: 'Product Designer',   avatar: 'S', c: '#fbbf24',
    tags: ['UX', 'Brand', 'Prototyping'], status: 'Designing Web4 Commerce' },
  { name: 'Lucas Rivera',  role: 'Backend / DevOps',   avatar: 'L', c: '#fb7185',
    tags: ['Node', 'AWS', 'K8s'], status: 'Scaling infrastructure' },
  { name: 'Nora Park',     role: 'Game Director',      avatar: 'N', c: '#a78bfa',
    tags: ['Unity', 'Multiplayer', 'Economy'], status: 'Leading GameHub' },
  { name: 'Diego Vega',    role: 'AI Research',        avatar: 'D', c: '#22d3ee',
    tags: ['Agents', 'RAG', 'LLMs'], status: 'Tuning Nova Assistant' },
  { name: 'Kara Lin',      role: 'Operations',         avatar: 'K', c: '#5eead4',
    tags: ['Delivery', 'Clients', 'Process'], status: 'On client review · 14m' },
];

const BoosterX = () => (
  <section id="booster-x" className="sec-boosterx">
    <div className="boosterx-bg">
      <div className="glow-orb bx-orb-1"/>
      <div className="glow-orb bx-orb-2"/>
    </div>
    <div className="container">
      <SectionHead
        eyebrow="OUR TEAM"
        title={<>People &amp; <em className="gradient-text">AI agents</em> building your projects.</>}
        lead="Our cross-functional team blends strategy, AI engineering, blockchain, design and operations. Every project is led by a senior partner and supported by Booster X — our internal AI execution layer."
      />
      <div className="team-grid">
        {TEAM.map(p => (
          <article key={p.name} className="team-card" style={{ '--c': p.c }}>
            <div className="team-card-portrait">
              <img
                src={`https://api.dicebear.com/9.x/personas/svg?seed=${encodeURIComponent(p.name)}&backgroundType=gradientLinear&backgroundColor=${p.c.slice(1)},0a1018&radius=20`}
                alt={p.name}
                width="96"
                height="96"
              />
              <span className="team-card-pulse"/>
            </div>
            <div>
              <h3 className="team-card-name">{p.name}</h3>
              <div className="team-card-role">{p.role}</div>
            </div>
            <div className="team-card-tags">
              {p.tags.map(t => <span key={t} className="team-card-tag">{t}</span>)}
            </div>
            <div className="team-card-status">
              <span className="dot"/>{p.status}
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Impact ---------- */
const impactMetrics = [
  { value: "50+", label: "Projects Delivered", icon: <IconLayers size={18}/> },
  { value: "30+", label: "Clients & Partners", icon: <IconUsers size={18}/> },
  { value: "5+", label: "Years Building", icon: <IconBolt size={18}/> },
  { value: "Global", label: "Remote Team", icon: <IconNetwork size={18}/> },
];

const Impact = () => (
  <section className="sec-impact">
    <div className="container">
      <div className="impact-head">
        <span className="eyebrow">BY THE NUMBERS</span>
        <h2 className="h-section">We are the execution layer for the <em className="gradient-text">next digital era.</em></h2>
      </div>
      <div className="impact-grid">
        {impactMetrics.map((m, i) => (
          <div key={i} className="impact-card panel">
            <div className="impact-icon">{m.icon}</div>
            <div className="impact-value h-display">{m.value}</div>
            <div className="impact-label">{m.label}</div>
            <div className="impact-line"/>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- CTA ---------- */
const CTASection = () => (
  <section id="contact" className="sec-cta">
    <div className="cta-bg">
      <div className="glow-orb cta-orb-1"/>
      <div className="glow-orb cta-orb-2"/>
      <div className="cta-grid"></div>
      <svg className="cta-rings" viewBox="0 0 1200 600" preserveAspectRatio="none">
        <defs>
          <linearGradient id="cta-ring" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#5eead4" stopOpacity="0"/>
            <stop offset="0.5" stopColor="#22d3ee" stopOpacity="0.6"/>
            <stop offset="1" stopColor="#5eead4" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <ellipse cx="600" cy="300" rx="500" ry="100" fill="none" stroke="url(#cta-ring)" strokeWidth="1"/>
        <ellipse cx="600" cy="300" rx="380" ry="80" fill="none" stroke="url(#cta-ring)" strokeWidth="1" opacity="0.7"/>
        <ellipse cx="600" cy="300" rx="260" ry="60" fill="none" stroke="url(#cta-ring)" strokeWidth="1" opacity="0.5"/>
      </svg>
    </div>
    <div className="container cta-inner">
      <span className="pill"><span className="pill-dot"/>LET'S BUILD THE FUTURE TOGETHER</span>
      <h2 className="h-display cta-headline">
        If you can <span className="gradient-text">think it,</span><br/>
        we can <span className="gradient-text">build it.</span>
      </h2>
      <p className="cta-sub">
        Tell us what you want to build. We'll help you turn it into a real product, platform or intelligent system.
      </p>
      <div className="hero-ctas">
        <a href="#" className="btn btn-primary">Start a Project <IconArrowRight size={14}/></a>
        <a href="#" className="btn btn-ghost">Contact Us <IconArrowUpRight size={14}/></a>
      </div>
      <div className="cta-foot">
        <div className="cta-foot-item">
          <span className="hero-chip-dot ok"/> Currently accepting new partnerships
        </div>
        <div className="cta-foot-item">
          <IconBolt size={13}/> Avg. response within 24 hours
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = () => (
  <footer className="site-footer">
    <div className="container site-footer-inner">
      <div className="footer-brand">
        <a href="#" className="site-brand">
          <Brandmark size={32}/>
          <div className="site-brand-text">
            <div className="site-brand-name">Booster Block</div>
            <div className="site-brand-sub">AI-Native Infrastructure</div>
          </div>
        </a>
        <p className="footer-desc">
          AI-native infrastructure studio building the systems of the next digital era.
        </p>
        <div className="footer-social">
          <a href="#" aria-label="X"><IconX size={14}/></a>
          <a href="#" aria-label="LinkedIn"><IconLinkedIn size={14}/></a>
          <a href="#" aria-label="GitHub"><IconGitHub size={14}/></a>
          <a href="#" aria-label="YouTube"><IconYouTube size={14}/></a>
        </div>
      </div>

      <div className="footer-cols">
        <div className="footer-col">
          <div className="footer-col-title">Company</div>
          <a href="#">About</a>
          <a href="#">Work</a>
          <a href="#">Careers</a>
          <a href="#">Contact</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-title">Solutions</div>
          <a href="#">AI Solutions</a>
          <a href="#">Blockchain</a>
          <a href="#">Digital Products</a>
          <a href="#">Infrastructure</a>
          <a href="#">Data Intelligence</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-title">Resources</div>
          <a href="#">Insights</a>
          <a href="#">Case Studies</a>
          <a href="#">Documentation</a>
          <a href="#">Brand Kit</a>
          <a href="#">Help Center</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-title">Get in touch</div>
          <a href="mailto:hello@boosterblock.io">hello@boosterblock.io</a>
          <a href="#">Schedule a call</a>
          <a href="#">Partner program</a>
        </div>
      </div>
    </div>

    <div className="footer-bottom container">
      <div>© 2026 Booster Block. All rights reserved.</div>
      <div className="footer-bottom-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#" className="footer-locale">EN · Global</a>
      </div>
    </div>

    <div className="footer-mega-mark" aria-hidden="true">BOOSTER · BLOCK</div>
  </footer>
);

Object.assign(window, { BoosterX, Impact, CTASection, Footer });