// sections.jsx — page sections

const { motion: m, AnimatePresence: AP, useScroll: uScroll, useTransform: uTransform, useInView: uInView } = window.framerMotion || window.Motion || {};

// ─── Nav ────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState("home");

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    const ids = ["home", "services", "expertise", "specializations", "contact"];
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: "-40% 0px -50% 0px" });
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  const links = [
    { id: "services", label: "Services" },
    { id: "expertise", label: "Expertise" },
    { id: "specializations", label: "Specializations" },
    { id: "contact", label: "Contact" },
  ];

  return (
    <m.nav
      className={`nav ${scrolled ? "nav--scrolled" : ""}`}
      initial={{ y: -40, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.8, ease: "easeOut" }}
    >
      <div className="nav-inner">
        <a href="#home" className="brand">
          <LogoMark size={26}/>
          <span className="brand-name">
            <span>Griffin<span className="brand-accent">Mind</span></span>
            <span>Labs</span>
          </span>
        </a>
        <ul className="nav-links">
          {links.map((l) => (
            <li key={l.id}>
              <a href={`#${l.id}`} className={active === l.id ? "active" : ""}>
                <span className="nav-dot-slot">
                  {active === l.id ? (
                    <m.span className="nav-dot"
                            initial={{ opacity: 0, scale: 0.5 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.2 }}/>
                  ) : null}
                </span>
                <span>{l.label}</span>
              </a>
            </li>
          ))}
        </ul>
        <a href="#contact" className="nav-cta">
          <span>Start a project</span>
          <IconArrow/>
        </a>
      </div>
    </m.nav>
  );
}

// ─── Hero: Variant A — Kinetic wordmark ────────────────────────────
function HeroKinetic() {
  const { scrollY } = uScroll();
  const y1 = uTransform(scrollY, [0, 600], [0, 120]);
  const o1 = uTransform(scrollY, [0, 500], [1, 0]);

  return (
    <section id="home" className="hero hero--kinetic">
      <Aurora/>
      <m.div className="hero-kinetic-inner" style={{ y: y1, opacity: o1 }}>
        <Reveal y={8}>
          <div className="eyebrow">
            <span className="eyebrow-dot"/>
            Software Development Consulting · Victoria, BC
          </div>
        </Reveal>

        <h1 className="display">
          <span className="display-row">
            <SplitText text="Griffin" delay={0.2}/>
            <span className="brand-accent"><SplitText text="Mind" delay={0.2 + 7 * 0.03}/></span>
          </span>
          <span className="display-row display-row--lab">
            <SplitText text="Labs" delay={0.7} stagger={0.05}/>
            <m.span className="display-caret"
                    animate={{ opacity: [1, 0, 1] }}
                    transition={{ duration: 1.2, repeat: Infinity }}/>
          </span>
        </h1>

        <Reveal delay={1.2}>
          <p className="hero-lede prose">
            Transforming ambitious ideas into powerful digital realities. We architect
            cutting-edge solutions at the edge of blockchain, mobile, and web.
          </p>
        </Reveal>

        <Reveal delay={1.35}>
          <div className="cta-row">
            <MagneticLink href="#contact" primary>
              Start your project <IconArrow/>
            </MagneticLink>
            <MagneticLink href="#services">Explore services</MagneticLink>
          </div>
        </Reveal>
      </m.div>

      <m.div className="hero-scroll"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 2, duration: 1 }}>
        <span>Scroll</span>
        <m.i animate={{ y: [0, 8, 0] }} transition={{ duration: 1.8, repeat: Infinity }}/>
      </m.div>
    </section>
  );
}

// ─── Hero: Variant B — Split ───────────────────────────────────────
function HeroSplit() {
  return (
    <section id="home" className="hero hero--split">
      <div className="hero-split-grid">
        <div className="hero-split-copy">
          <Reveal y={8}>
            <div className="eyebrow">
              <span className="eyebrow-dot"/>
              Elite Software Development
            </div>
          </Reveal>
          <h1 className="display display--compact">
            <SplitText text="We build" delay={0.2}/><br/>
            <span className="display-row--serif"><SplitText text="systems" delay={0.5}/></span>
            <SplitText text=" that" delay={0.75} stagger={0.04}/><br/>
            <SplitText text="outlast trends." delay={1} stagger={0.04}/>
          </h1>
          <Reveal delay={1.4}>
            <p className="hero-lede prose">
              End-to-end product engineering for blockchain, mobile, and web. Architected
              for scale. Crafted for the people who use it.
            </p>
          </Reveal>
          <Reveal delay={1.55}>
            <div className="cta-row">
              <MagneticLink href="#contact" primary>Start your project <IconArrow/></MagneticLink>
              <MagneticLink href="#services">Explore services</MagneticLink>
            </div>
          </Reveal>
        </div>
        <div className="hero-split-visual">
          <MeshVisual/>
        </div>
      </div>
    </section>
  );
}

// ─── Hero: Variant C — Cinematic ───────────────────────────────────
function HeroCinematic() {
  return (
    <section id="home" className="hero hero--cinematic">
      <Aurora/>
      <div className="hero-cinema-inner">
        <Reveal y={10}>
          <div className="eyebrow eyebrow--centered">
            <span className="eyebrow-dot"/>
            Elite Software Development · est. Victoria BC
          </div>
        </Reveal>
        <h1 className="display display--cinema">
          <SplitText text="Ambitious ideas," delay={0.2} stagger={0.025}/><br/>
          <span className="display-row--serif"><SplitText text="engineered into reality." delay={0.7} stagger={0.025}/></span>
        </h1>
        <Reveal delay={1.3}>
          <p className="hero-lede prose hero-lede--center">
            A small studio of senior engineers. We take on a few projects a year and
            ship them with the care of owners, not contractors.
          </p>
        </Reveal>
        <Reveal delay={1.45}>
          <div className="cta-row cta-row--center">
            <MagneticLink href="#contact" primary>Start your project <IconArrow/></MagneticLink>
            <MagneticLink href="#services">Explore services</MagneticLink>
          </div>
        </Reveal>
      </div>
      <div className="hero-cinema-marquee">
        <Marquee items={["Rust", "TypeScript", "React", "React Native", "Expo", "Next.js", "tRPC", "PostgreSQL", "AWS", "GCP", "Solidity", "Solana"]} speed={60}/>
      </div>
    </section>
  );
}

// ─── Services ──────────────────────────────────────────────────────
const SERVICES = [
  { icon: IconStack,  title: "Full-Stack Development", body: "End-to-end application development with modern architectures, scalable backends, and intuitive frontends." },
  { icon: IconChain,  title: "Blockchain Solutions",   body: "Smart contracts, DeFi protocols, and Web3 integration — built with security and efficiency at the core." },
  { icon: IconPhone,  title: "Mobile Applications",    body: "Native and cross-platform apps that captivate users, powered by React Native and Expo." },
  { icon: IconCloud,  title: "Cloud Infrastructure",   body: "Robust, scalable cloud architectures on AWS and GCP, with DevOps excellence and automated CI/CD." },
  { icon: IconGrid,   title: "Modern Web Design",      body: "Stunning, responsive sites that combine aesthetic excellence with performance and SEO." },
  { icon: IconShield, title: "Security & Auditing",    body: "Comprehensive audits, penetration testing, and best-practice implementation to protect your assets." },
];

function ServicesLegacy() {
  return (
    <section id="services" className="section section--services">
      <div className="container">
        <div className="section-head">
          <Reveal><div className="eyebrow"><span className="eyebrow-dot"/>01 · Services</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="section-title">
              Comprehensive solutions,<br/>
              <span className="section-title--serif">tailored to your needs.</span>
            </h2>
          </Reveal>
        </div>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.title} {...s} index={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ icon: Icon, title, body, index }) {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState({ x: 50, y: 50 });

  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    setPos({
      x: ((e.clientX - r.left) / r.width) * 100,
      y: ((e.clientY - r.top) / r.height) * 100,
    });
  };

  return (
    <Reveal delay={index * 0.08}>
      <m.div
        ref={ref}
        className="service-card"
        onMouseMove={onMove}
        style={{ "--mx": `${pos.x}%`, "--my": `${pos.y}%` }}
        whileHover={{ y: -4 }}
        transition={{ type: "spring", stiffness: 260, damping: 24 }}
      >
        <div className="service-card-bg"/>
        <div className="service-card-num">0{index + 1}</div>
        <div className="service-card-icon"><Icon/></div>
        <h3>{title}</h3>
        <p>{body}</p>
        <div className="service-card-arrow"><IconArrow/></div>
      </m.div>
    </Reveal>
  );
}

// ─── Expertise ─────────────────────────────────────────────────────
const TECH = [
  "Rust", "TypeScript", "React", "React Native", "Expo", "Next.js",
  "Node.js", "Express", "tRPC", "PostgreSQL", "Redis", "GraphQL",
  "AWS", "Google Cloud", "Docker", "Kubernetes", "Solidity", "Solana",
];

function Expertise() {
  return (
    <section id="expertise" className="section section--expertise">
      <div className="container">
        <div className="section-head">
          <Reveal><div className="eyebrow"><span className="eyebrow-dot"/>02 · Expertise</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="section-title">
              A toolkit of<br/>
              <span className="section-title--serif">proven technologies.</span>
            </h2>
          </Reveal>
        </div>
        <div className="tech-grid">
          {TECH.map((t, i) => (
            <TechChip key={t} label={t} index={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function TechChip({ label, index }) {
  const ref = React.useRef(null);
  const inView = uInView(ref, { once: true });
  return (
    <m.div
      ref={ref}
      className="tech-chip"
      initial={{ opacity: 0, y: 14 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ delay: index * 0.03, duration: 0.6, ease: [0.2, 0.8, 0.2, 1] }}
      whileHover={{ y: -3 }}
    >
      <span className="tech-chip-num">{String(index + 1).padStart(2, "0")}</span>
      <span className="tech-chip-label">{label}</span>
    </m.div>
  );
}

// ─── Specializations ───────────────────────────────────────────────
const SPECS = [
  { n: "01", title: "Blockchain Applications",    body: "DeFi protocols, NFT marketplaces, DAOs, and custom blockchain solutions built for security and scale." },
  { n: "02", title: "Smart Contract Development", body: "Audited, gas-optimized smart contracts on Ethereum, Solana, and other leading chains." },
  { n: "03", title: "Mobile Applications",        body: "High-performance native and cross-platform apps that delight users across iOS and Android." },
  { n: "04", title: "Web Platforms",              body: "Scalable SaaS platforms, e-commerce solutions, and enterprise web applications built to last." },
  { n: "05", title: "Infrastructure",             body: "Cloud-native architectures, microservices, containerization, and infrastructure as code." },
  { n: "06", title: "Full-Stack Solutions",       body: "Complete end-to-end development from database design to interface implementation." },
];

function Specializations() {
  return (
    <section id="specializations" className="section section--specs">
      <div className="container">
        <div className="section-head">
          <Reveal><div className="eyebrow"><span className="eyebrow-dot"/>03 · Specializations</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="section-title">
              Where innovation<br/>
              <span className="section-title--serif">meets expertise.</span>
            </h2>
          </Reveal>
        </div>
        <div className="spec-list">
          {SPECS.map((s, i) => (
            <SpecRow key={s.n} {...s} index={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function SpecRow({ n, title, body, index }) {
  const ref = React.useRef(null);
  const inView = uInView(ref, { once: true, margin: "-20% 0px" });
  return (
    <m.div
      ref={ref}
      className="spec-row"
      initial={{ opacity: 0, y: 30 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.8, delay: index * 0.05, ease: [0.2, 0.8, 0.2, 1] }}
    >
      <div className="spec-row-n">{n}</div>
      <div className="spec-row-title">
        <h3>{title}</h3>
      </div>
      <div className="spec-row-body">
        <p>{body}</p>
      </div>
      <div className="spec-row-arrow"><IconArrow/></div>
    </m.div>
  );
}

// ─── Contact ───────────────────────────────────────────────────────
function Contact() {
  return (
    <section id="contact" className="section section--contact">
      <Aurora/>
      <div className="container contact-inner">
        <Reveal><div className="eyebrow eyebrow--centered"><span className="eyebrow-dot"/>04 · Contact</div></Reveal>
        <Reveal delay={0.1}>
          <h2 className="section-title section-title--center">
            Let's build something<br/>
            <span className="section-title--serif">extraordinary.</span>
          </h2>
        </Reveal>
        <Reveal delay={0.2}>
          <p className="prose contact-lede">
            Ready to transform your vision into reality? A short note about what you're
            building goes a long way.
          </p>
        </Reveal>
        <Reveal delay={0.3}>
          <div className="contact-info">
            <a href="mailto:griffinmindlabs@protonmail.com" className="contact-item">
              <span className="contact-ico"><IconMail/></span>
              <span>griffinmindlabs@protonmail.com</span>
              <IconArrow/>
            </a>
            <div className="contact-item contact-item--static">
              <span className="contact-ico"><IconPin/></span>
              <span>Victoria, BC — working with clients worldwide</span>
            </div>
          </div>
        </Reveal>
        <Reveal delay={0.4}>
          <div className="cta-row cta-row--center">
            <MagneticLink href="mailto:griffinmindlabs@protonmail.com" primary>
              Get in touch <IconArrow/>
            </MagneticLink>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <LogoMark size={22} animate={false}/>
          <span>GriffinMind Labs Incorporated</span>
        </div>
        <div className="footer-meta">
          <span>© {year}</span>
          <span className="footer-sep">·</span>
          <span>Crafting the future of digital innovation</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, HeroKinetic, HeroSplit, HeroCinematic,
  Expertise, Specializations, Contact, Footer,
});