/* home.jsx — homepage sections for martinharrison.portfolio */
const { Button: HBtn, Card: HCard, Badge: HBadge, GradientSpotlightCard: HGrad } = window.DesignSystem_33e611;

/* ---------------- Hero ---------------- */
function HomeHero() {
  const portraitRef = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const el = portraitRef.current;
    if (!el) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      if (window.innerWidth <= 760) { el.style.removeProperty("--parallax"); return; }
      // classic slow parallax: portrait shifts down at a fraction of the scroll,
      // so it moves slower than the page as you scroll.
      const y = window.scrollY || 0;
      el.style.setProperty("--parallax", (y * 0.22).toFixed(1) + "px");
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <section style={{ position: "relative", overflow: "hidden", display: "flex", alignItems: "center", minHeight: "clamp(540px, 78vh, 780px)", paddingTop: "clamp(32px, 5vw, 64px)", paddingBottom: "clamp(40px, 6vw, 80px)" }}>
      {/* Portrait — right-anchored background, fades into the canvas */}
      <div className="hero-portrait" aria-hidden="true" ref={portraitRef}>
        <image-slot id="hero-portrait" shape="rect" fit="cover" src="site/designer-portrait.jpg" placeholder="Drop a portrait"></image-slot>
        <div className="hero-portrait-hint">
          <span style={{ fontSize: 22, opacity: 0.5 }}>◇</span>
          <span style={{ font: "var(--type-caption)", letterSpacing: "var(--ls-caption)" }}>Drop Martin's portrait</span>
        </div>
      </div>

      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <Reveal>
          <Eyebrow>Senior Product Designer · Bangalore, India</Eyebrow>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="fluid-xxl" style={{ marginTop: "var(--space-lg)", maxWidth: "16ch" }}>
            Turning complex systems into products people trust.
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="subhead muted" style={{ maxWidth: "52ch", margin: "clamp(28px, 4vw, 48px) 0 0" }}>
            14+ years shaping enterprise, GRC, and platform software — the kind of products where clarity isn't a nicety, it's the entire job. Strategy through pixels, systems that scale, outcomes you can measure.
          </p>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- Credibility band ---------------- */
function CredBand() {
  return (
    <section style={{ borderTop: "1px solid var(--color-hairline-soft)", borderBottom: "1px solid var(--color-hairline-soft)", padding: "clamp(36px, 5vw, 56px) 0" }}>
      <div className="wrap">
        <div className="grid g4" style={{ gap: "var(--space-xl)" }}>
          {STATS.map((s, i) =>
          <Reveal key={s.label} delay={i * 80}>
              <div>
                <div className="fluid-lg" style={{ fontFeatureSettings: "var(--feat-tnum)" }}>{s.value}</div>
                <div className="muted" style={{ marginTop: 10, font: "var(--type-body-sm)", letterSpacing: "var(--ls-body-sm)", maxWidth: "22ch" }}>{s.label}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Featured work (staggered gallery) ---------------- */
function WorkCard({ p, aspect }) {
  return (
    <Reveal>
      <a href={"Project.html?id=" + p.id} className="lift work-card">
        <ProjectCover project={p} aspect={aspect} hideLabel radius="0" />
        <div className="work-meta">
          <div className="work-row">
            <h3 className="work-title" style={{ height: "26px" }}>{p.name}</h3>
            <span className="work-year">{p.year}</span>
          </div>
          <p className="work-desc" style={{ fontFamily: "\"Inter Variable\"", fontSize: "15px" }}>{p.summary}</p>
        </div>
      </a>
    </Reveal>);

}
function FeaturedWork() {
  const featured = PROJECTS.slice(0, 5);
  const leftAspect = ["4 / 5", "5 / 6", "3 / 4"];
  const rightAspect = ["4 / 5", "4 / 5"];
  const left = featured.filter((_, i) => i % 2 === 0);
  const right = featured.filter((_, i) => i % 2 === 1);
  return (
    <section className="section" id="work" style={{ color: "rgba(255, 255, 255, 0.925)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "var(--space-lg)", marginBottom: "clamp(36px, 5vw, 64px)" }}>
          <Reveal>
            <h2 className="fluid-xl">Selected work</h2>
          </Reveal>
          <Reveal delay={120}>
            <a className="arrow-link" href="Work.html">All case studies <span className="ar">→</span></a>
          </Reveal>
        </div>
        <div className="work-masonry">
          <div className="work-col">
            {left.map((p, i) => <WorkCard key={p.id} p={p} aspect={leftAspect[i % leftAspect.length]} />)}
          </div>
          <div className="work-col work-col-offset">
            {right.map((p, i) => <WorkCard key={p.id} p={p} aspect={rightAspect[i % rightAspect.length]} />)}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- Services grid ---------------- */
function Services() {
  return (
    <section className="section" id="services" style={{ background: "var(--color-surface-1)" }}>
      <div className="wrap">
        <Reveal>
          <div className="svc-header" style={{ marginBottom: "clamp(32px, 4vw, 56px)" }}>
            <Eyebrow>What I do</Eyebrow>
            <h2 className="fluid-xl" style={{ textWrap: "balance" }}>Five ways I help teams ship better products.</h2>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="svc-grid">
            {SERVICES.map((s) =>
            <div key={s.n} className="svc-cell">
                <span className="svc-num">{s.n}</span>
                <h3 className="svc-name">{s.name}</h3>
                <p className="svc-blurb">{s.blurb}</p>
              </div>
            )}
            <div className="svc-cell svc-cell-cta">
              <span className="svc-num">06</span>
              <h3 className="svc-name">Not sure which you need?</h3>
              <p className="svc-blurb">Tell me the problem and I'll point you to the right engagement — or invent one that fits.</p>
              <a className="arrow-link" href="Contact.html" style={{ marginTop: "auto" }}>Let's talk <span className="ar">→</span></a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- Workspace / studio band ---------------- */
function StudioBand() {
  return (
    <section className="section studio-band">
      <div className="wrap">
        <Reveal>
          <figure className="studio-figure">
            <img src="site/design-studio-workspace.jpg" alt="Martin's home studio — a warm, plant-filled desk setup with a single monitor" loading="lazy" />
            <figcaption className="studio-overlay">
              <Eyebrow>The studio</Eyebrow>
              <h2 className="fluid-lg" style={{ marginTop: "var(--space-md)", textWrap: "balance" }}>Where the work happens.</h2>
              <p className="body-lg" style={{ marginTop: "var(--space-lg)", maxWidth: "34ch" }}>
                A quiet corner in Bangalore — warm light, a few too many plants, and a single screen. Most of what I ship starts here.
              </p>
            </figcaption>
          </figure>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- Social proof ---------------- */
function SocialProof() {
  const [idx, setIdx] = React.useState(0);
  const count = TESTIMONIALS.length;
  const t = TESTIMONIALS[idx];
  const go = (d) => setIdx((i) => (i + d + count) % count);
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <Eyebrow>Testimonials</Eyebrow>
        </Reveal>
        {CLIENT_LOGOS.length > 0 && (
        <Reveal delay={60}>
          <div className="logo-row" style={{ margin: "var(--space-xl) 0 clamp(40px,5vw,64px)" }}>
            {CLIENT_LOGOS.map((l, i) =>
            <span key={i} style={{ font: "var(--type-display-md)", letterSpacing: "var(--ls-display-md)", color: "var(--color-ink-muted)", opacity: 0.7, whiteSpace: "nowrap" }}>{l}</span>
            )}
          </div>
        </Reveal>
        )}
        <Reveal delay={60}>
          <div style={{ marginTop: "clamp(48px, 7vw, 96px)" }}>
            <HCard surface="surface-2" radius="xl" padding="clamp(28px, 3.5vw, 56px)" style={{ display: "flex", flexDirection: "column", gap: "clamp(28px, 4vw, 48px)", borderRadius: "0" }}>
              <p className="fluid-md" style={{ margin: 0, textWrap: "pretty", maxWidth: "44ch" }}>“{t.quote}”</p>
              <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "var(--space-lg)", flexWrap: "wrap" }}>
                <div>
                  <div style={{ font: "var(--type-body-lg)", letterSpacing: "var(--ls-body-lg)" }}>{t.name}</div>
                  <div className="muted" style={{ marginTop: 4, font: "var(--type-body-sm)", letterSpacing: "var(--ls-body-sm)" }}>{t.role}</div>
                </div>
                <div className="tcarousel-nav">
                  <span className="tcarousel-count">{String(idx + 1).padStart(2, "0")} / {String(count).padStart(2, "0")}</span>
                  <button type="button" className="tcarousel-arrow" aria-label="Previous testimonial" onClick={() => go(-1)}>←</button>
                  <button type="button" className="tcarousel-arrow" aria-label="Next testimonial" onClick={() => go(1)}>→</button>
                </div>
              </div>
            </HCard>
          </div>
        </Reveal>
      </div>
    </section>);

}

function HomeApp() {
  return (
    <React.Fragment>
      <Nav active="Home" />
      <main>
        <HomeHero />
        <CredBand />
        <FeaturedWork />
        <Services />
        <StudioBand />
        <SocialProof />
        <CTABand actions={false} />
      </main>
      <SiteFooter />
    </React.Fragment>);

}
ReactDOM.createRoot(document.getElementById("root")).render(<HomeApp />);