const { useState, useEffect, useRef } = React;

/* =================== NAV (shared shape with About) =================== */
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 onEnter = () => {clearTimeout(closeTimer.current);setOpen(true);};
  const onLeave = () => {if (!pinned) closeTimer.current = setTimeout(() => setOpen(false), 200);};
  const onClick = () => {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="about.html">About</a>
        <div ref={menuRef} className={"has-menu" + (open ? " open" : "")} onMouseEnter={onEnter} onMouseLeave={onLeave}>
          <button className="menu-trigger" onClick={onClick}>
            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="#" className="active">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="portfolio" />
    </header>);
}



/* =================== DEVICE MOCKUPS =================== */
function Laptop({ img, placeholder }) {
  return (
    <div className="pf-laptop">
      <div className="pf-laptop-screen" style={{ backgroundColor: "rgb(0, 0, 0)" }}>
        <div className="pf-laptop-bezel">
          {img ?
          <img src={img} alt="" className="pf-laptop-img" /> :
          <div className="mock-placeholder pl-laptop" style={{ background: placeholder.bg }}>
              <div className="ph-top">
                <span className="ph-dot"></span>
                <span className="ph-dot"></span>
                <span className="ph-dot"></span>
                <span className="ph-pill">{placeholder.tag}</span>
              </div>
              <div className="ph-h">{placeholder.title}</div>
              <div className="ph-foot">
                <span>{placeholder.domain}</span>
                <span>{placeholder.year}</span>
              </div>
            </div>
          }
        </div>
      </div>
      <div className="pf-laptop-base"></div>
    </div>);
}

function Phones({ img, placeholder }) {
  return (
    <div className="pf-phone-wrap">
      <div className="pf-phone pf-phone-tilt-l">
        <div className="pf-phone-screen">
          <div className="pf-phone-notch"></div>
          {img ?
          <img src={img} alt="" className="pf-phone-img" /> :
          <div className="mock-placeholder" style={{ background: placeholder.bg }}>
              <div className="ph-top">
                <span className="ph-pill">{placeholder.tag}</span>
              </div>
              <div className="ph-h">{placeholder.title}</div>
              <div className="ph-foot">
                <span>{placeholder.domain}</span>
              </div>
            </div>
          }
        </div>
      </div>
      <div className="pf-phone pf-phone-tilt-r">
        <div className="pf-phone-screen">
          <div className="pf-phone-notch"></div>
          <div className="mock-placeholder" style={{ background: placeholder?.bg2 || "linear-gradient(160deg, #0f1c2e 0%, #1FA9F0 100%)" }}>
            <div className="ph-top">
              <span className="ph-pill">Mobile</span>
            </div>
            <div className="ph-h">{placeholder?.title2 || "Made for thumbs"}</div>
            <div className="ph-foot">
              <span>Responsive</span>
            </div>
          </div>
        </div>
      </div>
    </div>);
}

/* Combo: laptop main + small phone overlapping bottom-right */
function LaptopPhone({ img, phoneImg, placeholder }) {
  const comboRef = React.useRef(null);
  const laptopRef = React.useRef(null);
  const phoneRef = React.useRef(null);

  React.useEffect(() => {
    const el = comboRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / (r.width / 2);
      const dy = (e.clientY - cy) / (r.height / 2);
      if (laptopRef.current) {
        laptopRef.current.style.transition = "transform 120ms linear";
        laptopRef.current.style.transform = `translateX(${dx * 6}px) translateY(${dy * 4}px)`;
      }
      if (phoneRef.current) {
        phoneRef.current.style.transition = "transform 120ms linear";
        phoneRef.current.style.transform = `translateX(${dx * 10}px) translateY(${dy * 7}px)`;
      }
    };
    const onLeave = () => {
      if (laptopRef.current) {
        laptopRef.current.style.transition = "transform 600ms cubic-bezier(.22,1.4,.36,1)";
        laptopRef.current.style.transform = "";
      }
      if (phoneRef.current) {
        phoneRef.current.style.transition = "transform 600ms cubic-bezier(.22,1.4,.36,1)";
        phoneRef.current.style.transform = "";
      }
    };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {el.removeEventListener("mousemove", onMove);el.removeEventListener("mouseleave", onLeave);};
  }, []);

  return (
    <div className="pf-combo" ref={comboRef}>
      <div className="pf-combo-laptop" ref={laptopRef}>
        <Laptop img={img} placeholder={placeholder} />
      </div>
      <div className="pf-combo-phone" ref={phoneRef}>
        <div className="pf-phone">
          <div className="pf-phone-screen">
            <div className="pf-phone-notch"></div>
            {phoneImg ?
            <img src={phoneImg} alt="" className="pf-phone-img" /> :
            placeholder?.logo ?
            <div className="mock-placeholder" style={{ background: placeholder?.bg2 || "#000", display: "grid", placeItems: "center", padding: "20%" }}>
                <img src={placeholder.logo} alt="" style={{ width: "100%", height: "auto", objectFit: "contain", display: "block" }} />
              </div> :
            <div className="mock-placeholder" style={{ background: placeholder?.bg2 || "linear-gradient(160deg, #0f1c2e 0%, #1FA9F0 100%)" }}>
                <div className="ph-top">
                  <span className="ph-pill">Mobile</span>
                </div>
                <div className="ph-h">{placeholder?.title2 || "Made for thumbs"}</div>
                <div className="ph-foot"><span>Responsive</span></div>
              </div>
            }
          </div>
        </div>
      </div>
    </div>);
}

/* =================== PROJECTS =================== */
function Projects() {
  const projects = [
  {
    num: "01",
    tag: "Construction · Kapiti",
    title: "SB Group Ltd",
    body: "A bold, trade-focused build for one of Kapiti's busiest construction outfits. We rebuilt their site around clarity and local SEO — and online enquiries jumped 65%.",
    services: ["Squarespace", "Mobile optimised", "SEO", "Google Business"],
    link: "https://sbgroup.co.nz",
    device: "combo",
    img: "assets/sbgroup-website.jpg",
    phoneImg: "assets/sb-group-mobile.jpg",
    placeholder: {
      bg: "linear-gradient(135deg, #1F2A36 0%, #3A4A5C 100%)",
      title: "Built to last.",
      tag: "Construction",
      domain: "sbgroup.co.nz",
      year: "2025",
      bg2: "#000000",
      title2: "Mobile-ready"
    }
  },
  {
    num: "02",
    tag: "Insulation · Kapiti",
    title: "Batt Specialists",
    body: "A clean, conversion-focused site for a specialist insulation team. Mobile-first design, simple quote flow, and clear service breakdowns. Online enquiries up 80% post-launch.",
    services: ["Squarespace", "Mobile optimised", "SEO", "Google Business"],
    link: "https://www.battspecialists.co.nz",
    device: "combo",
    img: "assets/batt-specialists.jpg",
    phoneImg: "assets/batt-specialists-mobile.jpg",
    placeholder: {
      bg: "linear-gradient(160deg, #1FA9F0 0%, #0f1c2e 100%)",
      title: "Insulation done right.",
      tag: "Trades",
      domain: "battspecialists.co.nz",
      bg2: "linear-gradient(160deg, #DBEEFF 0%, #1FA9F0 100%)",
      title2: "Quote in 60 seconds"
    }
  },
  {
    num: "03",
    tag: "Consulting · Wellington",
    title: "YOU Recruit",
    body: "A clean, professional site for a Wellington recruitment and career consultancy. We structured a broad service offering — recruitment, sports, Kolbe profiling and career transition — into a clear, easy-to-navigate layout built around a calm, trustworthy brand. Mobile-first throughout, with straightforward paths to enquiry so candidates and employers can quickly find the right service and get in touch.",
    services: ["Squarespace", "Mobile optimised", "SEO"],
    device: "combo",
    link: "https://www.yourecruit.co.nz",
    img: "assets/yourecruit-website.jpg",
    phoneImg: "assets/yourecruit-mobile.jpg",
    placeholder: {
      bg: "linear-gradient(135deg, #0f1c2e 0%, #2a3445 60%, #5a6877 100%)",
      title: "Slow mornings, fast coffee.",
      tag: "Café",
      domain: "oliveandsage.co",
      year: "2025",
      bg2: "linear-gradient(160deg, #5a6877 0%, #1FA9F0 100%)",
      title2: "Reserve a table"
    }
  }];


  return (
    <section className="pf-projects">
      <div className="pf-projects-inner">
        {projects.map((p, i) =>
        <article key={i} className={"pf-project" + (i % 2 === 1 ? " reverse" : "")}>
            <div className="pf-project-info">
              <h2 className="pf-project-title" style={{ color: "rgb(0, 0, 0)" }}>{p.title}</h2>
              <span className="pf-project-tag" style={{ color: "rgb(219, 238, 255)", backgroundColor: "rgb(31, 169, 240)" }}>{p.tag}</span>
              <p className="pf-project-body">{p.body}</p>
              <div className="pf-project-services">
                {p.services.map((s, j) => {
                const tagRef = React.useRef(null);
                const handleMove = (e) => {
                  const el = tagRef.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) * 12;
                  const rotX = (0.5 - py) * 10;
                  el.style.transition = "transform 80ms linear";
                  el.style.transform = `perspective(800px) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg) translateY(-2px)`;
                };
                const handleLeave = () => {
                  const el = tagRef.current;
                  if (!el) return;
                  el.style.transition = "transform 500ms cubic-bezier(.22,1.4,.36,1)";
                  el.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0)";
                };
                return <span
                  key={j}
                  ref={tagRef}
                  onMouseMove={handleMove}
                  onMouseLeave={handleLeave}
                  style={{ color: "rgb(31, 169, 240)", borderColor: "rgb(230, 238, 247)", transformStyle: "preserve-3d", willChange: "transform" }}>
                  {s}</span>;
              })}
              </div>
            </div>
            <div className="pf-project-mock">
              {(() => {
              const mock = p.device === "pf-laptop" ?
              <Laptop img={p.img} placeholder={p.placeholder} /> :
              p.device === "combo" ?
              <LaptopPhone img={p.img} phoneImg={p.phoneImg} placeholder={p.placeholder} /> :
              <Phones img={p.img} placeholder={p.placeholder} />;
              return p.link ?
              <a href={p.link} target="_blank" rel="noopener noreferrer" aria-label={"Visit " + p.title + " website"} style={{ display: "block", cursor: "pointer", textDecoration: "none", color: "inherit" }}>{mock}</a> :
              mock;
            })()}
            </div>
          </article>
        )}
      </div>
    </section>);
}

/* =================== TESTIMONIALS =================== */
function TestimonialCard({ x, index }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const xp = e.clientX - r.left;
    const yp = e.clientY - r.top;
    const px = xp / r.width;
    const py = yp / r.height;
    const rotY = (px - 0.5) * 8;
    const rotX = (0.5 - py) * 6;
    el.style.transition = "transform 80ms linear";
    el.style.transform = `perspective(900px) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg) translateY(-4px)`;
    el.style.setProperty("--mx", `${xp}px`);
    el.style.setProperty("--my", `${yp}px`);
  };
  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(900px) rotateX(0deg) rotateY(0deg) translateY(0)";
  };
  return (
    <figure
      ref={ref}
      className="t-card service-card-stagger"
      style={{ animationDelay: `${0.1 * index}s` }}
      onMouseMove={onMove}
      onMouseLeave={onLeave}>
      
      <span className="t-shimmer" aria-hidden="true"></span>
      <span className="t-glow" aria-hidden="true"></span>
      <div className="t-quote-mark" style={{ color: "#1FA9F0" }}>"</div>
      <blockquote>{x.quote}</blockquote>
      <figcaption>
        <div className="t-avatar" style={{ background: "#1FA9F0" }}>{x.initials}</div>
        <div>
          <div className="t-name-row">
            <div className="t-name">{x.name}</div>
            <span className="t-stars" aria-label="5 out of 5 stars">★★★★★</span>
          </div>
          <div className="t-role">{x.role}</div>
        </div>
      </figcaption>
    </figure>);

}

function Testimonials() {
  const testimonials = [
  { quote: "Quantum Design blew me away with their creativity and professionalism. My website has received so many compliments — it exceeded every expectation.", name: "Sarah M.", role: "Owner, Kapiti Bloom", initials: "SM" },
  { quote: "Online enquiries jumped 65% in three months. Best investment we've made in our business. They understood exactly what we needed.", name: "Steve B.", role: "Director, SB Group Ltd", initials: "SB" },
  { quote: "From concept to launch in two weeks. Clean, fast, and exactly on brand. Quantum Design just gets it — no back-and-forth needed.", name: "Mia K.", role: "Founder, Batt Specialists", initials: "MK" }];

  return (
    <section className="testimonials">
      <div className="section-head">
        <div className="eyebrow"><span className="eyebrow-dot" style={{ backgroundColor: "#1FA9F0" }}></span> Clients</div>
        <h2 className="section-h2">Real businesses. <em>Real results.</em></h2>
      </div>
      <div className="t-grid">
        {testimonials.map((x, i) => <TestimonialCard key={i} x={x} index={i} />)}
      </div>
    </section>);

}

/* =================== CTA =================== */
function CTA() {
  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 PFHero() {
  return (
    <section className="pf-hero">
      <div className="pf-hero-inner">
        <div className="pf-hero-eyebrow">Portfolio</div>
        <h1 className="pf-hero-h1">Work we've done <em>for clients.</em></h1>
      </div>
    </section>);
}

function PortfolioApp() {
  return (
    <div>
      <Nav />
      <PFHero />
      <Projects />
      <CTA />
      <Footer />
    </div>);
}

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