const { useState, useEffect, useRef } = React;

/* =================== NAV =================== */
function Nav() {
  const [open, setOpen] = useState(false);
  const [pinned, setPinned] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const closeTimer = useRef(null);
  const menuRef = useRef(null);

  useEffect(() => {
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setPinned(false);
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const handleMouseEnter = () => {clearTimeout(closeTimer.current);setOpen(true);};
  const handleMouseLeave = () => {if (!pinned) closeTimer.current = setTimeout(() => setOpen(false), 200);};
  const handleButtonClick = () => {const next = !pinned;setPinned(next);setOpen(next);};

  return (
    <header className="nav">
      <a className="brand" href="index.html" aria-label="Quantum Design home">
        <img src="assets/qd-logo.png" alt="Quantum Design" />
      </a>
      <nav className="nav-links">
        <a href="index.html">Home</a>
        <a href="#" className="active">About</a>
        <div
          ref={menuRef}
          className={"has-menu" + (open ? " open" : "")}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}>
          <button className="menu-trigger" onClick={handleButtonClick}>
            Services
            <svg width="10" height="10" viewBox="0 0 10 10"><path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" /></svg>
          </button>
          <div className="menu">
            <a href="web-design.html">
              <div className="menu-icon" style={{ background: "var(--accent)" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 10h18" /></svg>
              </div>
              <div>
                <div className="menu-title">Web Design</div>
                <div className="menu-sub">Custom builds that convert</div>
              </div>
            </a>
            <a href="marketing.html">
              <div className="menu-icon" style={{ backgroundColor: "rgb(184, 225, 246)" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8" /><path d="M21 7v5h-5" /></svg>
              </div>
              <div>
                <div className="menu-title">Marketing &amp; SEO</div>
                <div className="menu-sub">Google + Meta ads, SEO</div>
              </div>
            </a>
            <div className="menu-foot">
              <a href="index.html#pricing" className="menu-foot-link">See packages &amp; pricing →</a>
            </div>
          </div>
        </div>
        <a href="portfolio.html">Portfolio</a>
        <a href="contact.html">Contact</a>
      </nav>
      <a href="contact.html" className="nav-icon-btn" aria-label="Contact us">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 6 9-6" />
        </svg>
      </a>
      <MobileNavToggle onClick={() => setMobileOpen(true)} />
      <MobileNavMenu open={mobileOpen} onClose={() => setMobileOpen(false)} active="about" />
    </header>);
}

/* =================== HERO (Who We Are) =================== */
function AboutHero() {
  return (
    <section className="abh-hero">
      <div className="abh-hero-inner">
        <div className="abh-hero-eyebrow"><span className="abh-eyebrow-dot"></span> About Us</div>
        <h1 className="abh-hero-h1">Who <em>we are.</em></h1>
        <p className="abh-hero-sub">
          A small team of designers, developers, and marketers committed to delivering exceptional results for small businesses and service pros.
        </p>
      </div>
    </section>);
}

/* =================== SPLIT (Experience Marketing) =================== */
function ExperienceSplit() {
  return (
    <section className="abh-split" style={{ color: "rgb(31, 169, 240)" }}>
      <div className="abh-split-inner">
        <div className="abh-split-head">
          <div className="abh-hero-eyebrow"><span className="abh-eyebrow-dot"></span> About Us</div>
          <h2 className="abh-h2">
            Design and marketing that <em style={{ color: "rgb(31, 169, 240)" }}>drives results.</em>
          </h2>
        </div>
      </div>
    </section>);
}

/* =================== EXPERTISE =================== */
function Expertise() {
  return (
    <section className="abh-expertise">
      <div className="abh-expertise-inner">
        <div className="abh-expertise-eyebrow">
          <span className="eyebrow-dot" style={{ backgroundColor: "rgb(31, 169, 240)" }}></span> Expertise
        </div>
        <h2 className="abh-h2 abh-h2-wide">
          Why choose Quantum for your <em>marketing</em> needs.
        </h2>
        <p className="abh-lede abh-lede-center">
          At Quantum, we offer a comprehensive range of marketing services tailored to your needs. Our dedicated team is committed to delivering outstanding results, no matter the project size.
        </p>
        <div className="abh-expertise-grid">
          <div className="abh-expertise-card">
            <div className="abh-expertise-num">01</div>
            <h3>All-in-One</h3>
            <p>From SEO to web development to branding, we cover every aspect of growing your business online — so you only need one partner.</p>
          </div>
          <div className="abh-expertise-card">
            <div className="abh-expertise-num">02</div>
            <h3>Tailored Solutions</h3>
            <p>We customise our services to fit your unique business goals. No templates, no copy-paste strategies, no generic packages.</p>
          </div>
        </div>
      </div>
    </section>);
}

/* =================== FOUNDER SECTION =================== */
function Founder() {
  return (
    <section className="abh-founder">
      <div className="abh-founder-inner">

        <div className="abh-founder-card">
          <div className="abh-founder-photo" style={{ background: "url(assets/quantum-studio.jpg) center / cover no-repeat" }}></div>
          <div className="abh-founder-body">
            <div className="abh-founder-role">Founder · Quantum Design</div>
            <div className="abh-founder-divider"></div>
            <p>
              Quantum Design was built on eight years of hands-on experience designing websites for real businesses — most of them found through word of mouth, which says a lot about how we work. When your clients come from referrals, every project has to earn the next one.
            </p>
            <p>
              We design websites that do more than look good. Every site we build is crafted to bring in customers, backed by marketing and SEO that gets your business found. Whether you're a one-person operation or an established company, we take the same approach: understand your business, build something that works, and stick around to keep it working.
            </p>
            <p>
              No agencies-within-agencies, no account managers passing you around. When you work with Quantum Design, you work directly with the person building your site — and that makes all the difference.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* =================== CTA =================== */
function ProjectCTA() {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    const rotY = (px - 0.5) * 8;
    const rotX = (0.5 - py) * 6;
    el.style.transition = "transform 80ms linear";
    el.style.transform = `perspective(1200px) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg) translateY(-4px)`;
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.transition = "transform 500ms cubic-bezier(.22,1.4,.36,1)";
    el.style.transform = "perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0)";
  };
  return (
    <section id="contact" className="cta">
      <div className="cta-card" ref={ref} onMouseMove={onMove} onMouseLeave={onLeave} style={{ transformStyle: "preserve-3d", willChange: "transform" }}>
        <div className="cta-grid">
          <div>
            <div className="eyebrow eyebrow-light"><span className="eyebrow-dot"></span> Let's talk</div>
            <h2 className="cta-h2" style={{ fontSize: "64px" }}>
              Got a project in mind?<br />No calls needed.<br />
              <span className="cta-accent">Just say hello.</span>
            </h2>
            <div className="cta-actions">
              <a href="contact.html" className="btn-primary btn-primary-light">Contact Us</a>
            </div>
          </div>
          <div className="cta-right">
            <div className="cta-stat"><div className="cta-stat-v">48h</div><div className="cta-stat-l">Reply window</div></div>
            <div className="cta-stat"><div className="cta-stat-v">Flexible</div><div className="cta-stat-l">Retainer options</div></div>
            <div className="cta-stat"><div className="cta-stat-v">Flat</div><div className="cta-stat-l">Transparent fees</div></div>
            <div className="cta-stat"><div className="cta-stat-v">2026</div><div className="cta-stat-l">Booking now</div></div>
          </div>
        </div>
      </div>
    </section>);}

/* =================== FOOTER =================== */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="brand">
            <img src="assets/qd-logo.png" alt="Quantum Design" style={{ width: "40px", height: "40px" }} />
            <span>Quantum Design</span>
          </div>
          <p className="footer-tag">Design and Marketing for businesses that want to grow.</p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="footer-h" style={{ color: "rgb(31, 169, 240)" }}>Services</div>
            <a href="web-design.html">Web Design</a>
            <a href="marketing.html">Marketing &amp; SEO</a>
          </div>
          <div>
            <div className="footer-h" style={{ color: "rgb(31, 169, 240)" }}>The Studio</div>
            <a href="about.html">About</a>
            <a href="index.html#services">Services</a>
            <a href="portfolio.html">Portfolio</a>
            <a href="contact.html">Contact</a>
          </div>
          <div>
            <div className="footer-h" style={{ color: "rgb(31, 169, 240)" }}>SAY HELLO</div>
            <a href="mailto:quantumdesignnz@gmail.com">QuantumDesignNZ@gmail.com</a>
            <a href="https://www.facebook.com/quantumdesignnz" target="_blank" rel="noopener noreferrer">Facebook</a>
            <a href="https://www.instagram.com/quantumdesign.co.nz" target="_blank" rel="noopener noreferrer">Instagram</a>
          </div>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2025-2026 Quantum Design</span>
        <span></span>
      </div>
    </footer>);
}

/* =================== APP =================== */
function AboutApp() {
  return (
    <div>
      <Nav />
      <ExperienceSplit />
      <Founder />
      <ProjectCTA />
      <Footer />
    </div>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<AboutApp />);