/* global React, TextReveal, Marquee, Ph, Img, PHOTOS, Counter, SectionHead, StickyScroll */

const { useState: useS, useEffect: useE, useRef: useR } = React;

/* ============================================================
   HOME
============================================================ */
function Home({ setRoute }) {
  return (
    <main>
      <HeroSection setRoute={setRoute} />
      <ClientMarquee />
      <FeaturedProducts setRoute={setRoute} />
      <HowItWorks />
      <ServicesPreview setRoute={setRoute} />
      <DeliveryNetwork />
      <Testimonials />
    </main>
  );
}

function HeroSection({ setRoute }) {
  const heroRef = useR(null);
  useE(() => {
    const onMove = (e) => {
      if (!heroRef.current) return;
      const r = heroRef.current.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      heroRef.current.style.setProperty("--mx", `${x * 14}px`);
      heroRef.current.style.setProperty("--my", `${y * 14}px`);
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section className="hero" ref={heroRef}>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow reveal" style={{ marginBottom: 28 }}>Premium printing · since 2018</div>
            <h1>
              <TextReveal as="span">India's print engine,</TextReveal>
              <br />
              <TextReveal as="span" delay="2">delivered in</TextReveal>{" "}
              <span className="accent-word reveal" data-delay="3" style={{ display: "inline-block" }}>48 hours.</span>
            </h1>
            <p className="hero-sub reveal" data-delay="3">
              Business cards, banners, packaging, and bulk B2B runs — sent to a vetted nationwide press network and shipped to your doorstep. Premium. Reliable. Fast.
            </p>
            <div className="hero-cta reveal" data-delay="4">
              <a href="#" className="btn btn-primary" onClick={(e) => { e.preventDefault(); setRoute("services"); }}>
                Browse products
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
              <a href="#" className="btn btn-ghost" onClick={(e) => { e.preventDefault(); setRoute("contact"); }}>
                Request a callback
              </a>
            </div>

            <div className="hero-meta">
              <div className="hero-meta-item reveal" data-delay="3">
                <div className="num"><Counter to={1200} suffix="+" /></div>
                <div className="label">Vetted printers across India</div>
              </div>
              <div className="hero-meta-item reveal" data-delay="4">
                <div className="num"><Counter to={48} suffix="h" /></div>
                <div className="label">Average turnaround time</div>
              </div>
              <div className="hero-meta-item reveal" data-delay="4">
                <div className="num"><Counter to={4.9} /></div>
                <div className="label">Avg. rating, 12k+ orders</div>
              </div>
              <div className="hero-meta-item reveal" data-delay="5">
                <div className="num"><Counter to={28} /></div>
                <div className="label">States served, pan-India</div>
              </div>
            </div>
          </div>

          <div className="reveal" data-delay="2" style={{ transform: "translate(var(--mx,0), var(--my,0))", transition: "transform 0.4s var(--ease-out)" }}>
            <div className="press-visual">
              <PressVector />
              <div className="press-tag"><span className="dot" /> Live · Press #14 · Etawah</div>
              <div className="press-cmyk">
                <i title="Cyan" /><i title="Magenta" /><i title="Yellow" /><i title="Key" />
              </div>
              {/* Floating job ticket */}
              <div style={{
                position: "absolute", bottom: 16, right: 16, zIndex: 3,
                background: "rgba(255,255,255,0.96)", color: "#0a0a0a",
                borderRadius: 12, padding: "12px 16px", minWidth: 220,
                boxShadow: "0 10px 30px rgba(0,0,0,0.25)",
              }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "#6b6b6b" }}>JOB #PB-48207</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, marginTop: 4 }}>5,000 brochures</div>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 12, color: "#2a2a2a" }}>
                  <span>4-colour offset</span>
                  <span style={{ color: "var(--accent)", fontWeight: 600 }}>72% done</span>
                </div>
                <div style={{ height: 4, background: "#ececec", borderRadius: 2, marginTop: 6, overflow: "hidden" }}>
                  <div style={{ width: "72%", height: "100%", background: "var(--accent)", animation: "fillBar 3s var(--ease-out) infinite alternate" }} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sheet({ n }) {
  return (
    <div className={`sheet sheet-${n}`}>
      <div className="bar t" />
      <div className="bar" style={{ width: "85%" }} />
      <div className="bar" style={{ width: "70%" }} />
      <div className="bar a" />
      <div className="bar" style={{ width: "55%" }} />
      <div className="bar" style={{ width: "78%" }} />
      <div className="swatch"><i /><i /><i /><i /></div>
    </div>
  );
}

/* ----- Vector printing press illustration ----- */
function PressVector() {
  return (
    <svg
      viewBox="0 0 600 750"
      preserveAspectRatio="xMidYMid slice"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
      aria-hidden="true"
    >
      <defs>
        <linearGradient id="pvBg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="color-mix(in oklch, var(--accent) 18%, var(--bg-soft))" />
          <stop offset="100%" stopColor="var(--bg-soft)" />
        </linearGradient>
        <linearGradient id="pvShade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--ink)" stopOpacity="0" />
          <stop offset="100%" stopColor="var(--ink)" stopOpacity="0.18" />
        </linearGradient>
        <pattern id="pvDots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1" fill="var(--ink)" opacity="0.10" />
        </pattern>
        <pattern id="pvHalftone" width="6" height="6" patternUnits="userSpaceOnUse">
          <circle cx="3" cy="3" r="1.2" fill="var(--accent)" opacity="0.85" />
        </pattern>
      </defs>

      {/* Background */}
      <rect width="600" height="750" fill="url(#pvBg)" />
      <rect width="600" height="750" fill="url(#pvDots)" />

      {/* Top window: animated CMYK */}
      <g transform="translate(60,60)">
        <rect width="480" height="180" rx="14" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="2"/>
        <text x="20" y="30" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="2" fill="var(--ink-3)">CMYK · INK FLOW</text>

        {/* Animated halftone bars */}
        {[
          { x: 20, c: "oklch(0.70 0.16 220)", lbl: "C" },
          { x: 130, c: "oklch(0.62 0.24 340)", lbl: "M" },
          { x: 240, c: "oklch(0.85 0.18 95)", lbl: "Y" },
          { x: 350, c: "var(--ink)", lbl: "K" },
        ].map((c, i) => (
          <g key={i} transform={`translate(${c.x}, 50)`}>
            <rect width="110" height="110" rx="10" fill="var(--bg-soft)" stroke="var(--line)" />
            <rect x="10" y="10" width="90" height="90" rx="6" fill={c.c}>
              <animate
                attributeName="opacity"
                values="0.6;1;0.6"
                dur="2.4s"
                begin={`${i * 0.3}s`}
                repeatCount="indefinite"
              />
            </rect>
            <text x="55" y="62" fontFamily="Outfit, sans-serif" fontSize="32" fontWeight="600" textAnchor="middle" fill="white" style={{ mixBlendMode: "difference" }}>
              {c.lbl}
            </text>
          </g>
        ))}
      </g>

      {/* Press body */}
      <g transform="translate(60,280)">
        {/* Top hopper with rollers */}
        <rect x="0" y="0" width="480" height="60" rx="8" fill="var(--ink)" />
        <rect x="20" y="14" width="440" height="32" rx="16" fill="var(--bg-elev)" />

        {/* Rotating rollers */}
        {[60, 140, 220, 300, 380].map((cx, i) => (
          <g key={i} transform={`translate(${cx}, 30)`}>
            <circle r="14" fill="var(--bg-soft)" stroke="var(--ink)" strokeWidth="1.5" />
            <g style={{ transformOrigin: "0 0", animation: `pvSpin ${2 + i * 0.3}s linear infinite` }}>
              <line x1="-10" y1="0" x2="10" y2="0" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" />
              <line x1="0" y1="-10" x2="0" y2="10" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" />
            </g>
          </g>
        ))}

        {/* Main press chassis */}
        <rect x="20" y="70" width="440" height="240" rx="14" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="2" />
        <rect x="20" y="70" width="440" height="240" rx="14" fill="url(#pvShade)" />

        {/* Inner press window — halftone sheet */}
        <rect x="60" y="100" width="360" height="180" rx="10" fill="var(--ink)" />
        <rect x="68" y="108" width="344" height="164" rx="6" fill="var(--bg-elev)" />

        {/* Animated halftone print */}
        <g clipPath="url(#pvClipSheet)">
          <rect x="68" y="108" width="344" height="164" fill="url(#pvHalftone)">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite" />
          </rect>
        </g>
        <clipPath id="pvClipSheet">
          <rect x="68" y="108" width="344" height="164" rx="6" />
        </clipPath>

        {/* Type bars on sheet */}
        <g opacity="0.92">
          <rect x="86" y="128" width="120" height="14" rx="2" fill="var(--ink)" />
          <rect x="86" y="152" width="200" height="6" rx="2" fill="var(--ink-3)" />
          <rect x="86" y="166" width="180" height="6" rx="2" fill="var(--ink-3)" />
          <rect x="86" y="184" width="56" height="20" rx="3" fill="var(--accent)" />
          <rect x="156" y="184" width="120" height="20" rx="3" fill="var(--ink)" opacity="0.3" />
          <rect x="86" y="216" width="240" height="6" rx="2" fill="var(--ink-3)" />
          <rect x="86" y="230" width="180" height="6" rx="2" fill="var(--ink-3)" />
        </g>

        {/* Side control panel */}
        <rect x="36" y="220" width="20" height="80" rx="4" fill="var(--bg-soft)" />
        <circle cx="46" cy="234" r="4" fill="var(--accent)">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.2s" repeatCount="indefinite" />
        </circle>
        <circle cx="46" cy="252" r="4" fill="oklch(0.85 0.18 95)" />
        <circle cx="46" cy="270" r="4" fill="oklch(0.70 0.16 220)" />
        <circle cx="46" cy="288" r="4" fill="var(--ink-3)" />

        {/* Right control panel */}
        <rect x="424" y="220" width="20" height="80" rx="4" fill="var(--bg-soft)" />
        <rect x="429" y="226" width="10" height="40" rx="2" fill="var(--accent)" />
        <rect x="429" y="270" width="10" height="6" rx="1" fill="var(--ink-3)" />
        <rect x="429" y="280" width="10" height="14" rx="1" fill="var(--ink-3)" opacity="0.5" />

        {/* Legs */}
        <rect x="40" y="310" width="14" height="40" fill="var(--ink)" />
        <rect x="426" y="310" width="14" height="40" fill="var(--ink)" />

        {/* Paper output tray */}
        <rect x="40" y="350" width="400" height="20" rx="4" fill="var(--ink)" />
      </g>

      {/* Output sheets stacking */}
      <g transform="translate(60,650)">
        <rect width="480" height="60" rx="8" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="2" />
        {[10, 14, 18, 22, 26].map((y, i) => (
          <rect
            key={i}
            x={120 + i * 8}
            y={y - 4}
            width="240"
            height="6"
            rx="1"
            fill="var(--ink)"
            opacity={0.15 + i * 0.15}
          >
            <animate
              attributeName="y"
              from={-30}
              to={y - 4}
              dur="1.6s"
              begin={`${i * 0.4}s`}
              repeatCount="indefinite"
            />
          </rect>
        ))}
        <text x="20" y="38" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="2" fill="var(--ink-3)">OUTPUT TRAY</text>
        <text x="460" y="38" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="2" textAnchor="end" fill="var(--accent)" fontWeight="600">+3,612 / 5,000</text>
      </g>

      {/* Floating sheet between press and tray */}
      <g style={{ animation: "pvFall 3.6s linear infinite" }}>
        <rect x="220" y="620" width="160" height="22" rx="2" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="1.5" />
        <rect x="230" y="626" width="60" height="4" rx="1" fill="var(--ink)" />
        <rect x="230" y="634" width="100" height="3" rx="1" fill="var(--ink-3)" />
      </g>
    </svg>
  );
}

function ClientMarquee() {
  const items = [
    "Listed FMCG brands",
    "D2C startups",
    "Hospital chains",
    "Marketing agencies",
    "Retail chains",
    "Banks & NBFCs",
    "Edu-tech firms",
    "Event companies",
    "Real-estate groups",
    "Logistics partners",
  ];
  return <Marquee items={items} />;
}

/* ============================================================
   FEATURED PRODUCTS
============================================================ */
function FeaturedProducts({ setRoute }) {
  const items = [
    { title: "Business cards", note: "Premium finishes", size: "feature", img: "assets/products/gloss-card.png", tag: "Premium · 350gsm" },
    { title: "Flyers", note: "A5 · 4-colour", size: "", img: "assets/products/pamplate.png", tag: "A5 · 4-colour" },
    { title: "Brochures", note: "Tri-fold & bi-fold", size: "", img: "assets/products/medical.jpg", tag: "Tri-fold · Bi-fold" },
    { title: "Standee rollups", note: "6 ft · vinyl", size: "", img: "assets/products/rollup.jpg", tag: "6 ft · vinyl" },
    { title: "Sticker sets", note: "Die-cut · waterproof", size: "tall", img: "assets/products/stickers.webp", tag: "Die-cut · waterproof" },
    { title: "Stationery kits", note: "Letterheads · envelopes", size: "", img: "assets/products/envelop.png", tag: "Letterheads · envelopes" },
    { title: "Packaging", note: "Custom corrugated", size: "", img: "assets/products/sunpack.webp", tag: "Corrugated · custom" },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="01 — Catalog"
          title="Everything printable, one engine."
          sub="From a single card to a 50,000-unit packaging run. Order online, we route it to the right press, we ship it."
        />
        <div className="product-grid">
          {items.map((p, i) => (
            <ProductCard key={i} p={p} delay={(i % 3) + 1} setRoute={setRoute} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductCard({ p, delay, setRoute }) {
  return (
    <a
      href="#"
      onClick={(e) => { e.preventDefault(); setRoute("services"); window.scrollTo(0, 0); }}
      className={`product-card ${p.size} reveal`}
      data-delay={delay}
    >
      <div className="bg" style={{ position: "absolute", inset: 0 }}>
        <Img src={p.img} alt={p.title} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)" }} />
      </div>
      <div className="meta" style={{ color: "#fff" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <span className="tag" style={{ background: "rgba(255,255,255,0.95)", color: "#0a0a0a", padding: "6px 12px", borderRadius: "var(--radius-pill)", letterSpacing: "0.12em" }}>{p.tag}</span>
        </div>
        <div className="title-row">
          <div>
            <h3 style={{ color: "#fff" }}>{p.title}</h3>
            <div className="price" style={{ textAlign: "left", marginTop: 6, color: "rgba(255,255,255,0.85)" }}>{p.note} →</div>
          </div>
          <div className="arrow-circle" style={{ background: "#fff", color: "#0a0a0a" }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </div>
        </div>
      </div>
    </a>
  );
}

/* ============================================================
   STICKY SCROLL — How it works
============================================================ */
function HowItWorks() {
  const steps = [
    { title: "Upload your file", body: "Drag-drop your PDF, AI, or design. Our prepress engine flags bleeds, fonts, and colour profiles in seconds.", visual: "upload" },
    { title: "Smart routing", body: "We match your job to the right press based on stock, format, location, and current capacity. No middlemen.", visual: "route" },
    { title: "Press in motion", body: "Real-time updates from press to bindery. Watch your job move through 4-colour offset or HP Indigo digital.", visual: "press" },
    { title: "At your doorstep", body: "Same-city in 24 hours, pan-India in 48–72. Bulk B2B with white-label and split-delivery on request.", visual: "delivery" },
  ];

  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <SectionHead
          eyebrow="02 — How it works"
          title="Idea to doorstep in four steps."
          sub="One platform connects you to 1,200+ vetted presses. We handle quality control, logistics, and customer service end-to-end."
        />
        <StickyScroll
          steps={steps}
          render={(s, i, active) => <StickyVisual which={s.visual} active={active} idx={i} />}
        />
      </div>
    </section>
  );
}

function StickyVisual({ which, active, idx }) {
  if (which === "upload") {
    return (
      <div style={{ width: "100%", maxWidth: 380 }}>
        <div style={{ border: "2px dashed var(--line-strong)", borderRadius: 18, padding: 36, textAlign: "center", background: "var(--bg-elev)" }}>
          <div style={{ width: 56, height: 56, margin: "0 auto 16px", borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 17V5M5 12l7-7 7 7M5 21h14"/></svg>
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--ink)", fontSize: 18 }}>Drop your design.pdf</div>
          <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 8 }}>AI · PDF · PSD · TIFF · supported</div>
          <div style={{ marginTop: 20, padding: 12, background: "var(--bg-soft)", borderRadius: 8, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", textAlign: "left" }}>
            <div>✓ Bleed margins ok</div>
            <div>✓ CMYK profile detected</div>
            <div style={{ color: "var(--accent)" }}>! Font embedded — Helvetica</div>
          </div>
        </div>
      </div>
    );
  }
  if (which === "route") {
    return (
      <svg viewBox="0 0 320 280" style={{ width: "100%", maxWidth: 380 }}>
        <defs>
          <marker id="ah" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 z" fill="var(--accent)" /></marker>
        </defs>
        <rect x="120" y="20" width="80" height="60" rx="12" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="1.5" />
        <text x="160" y="55" fontFamily="JetBrains Mono" fontSize="11" textAnchor="middle" fill="var(--ink)">YOU</text>

        {[[40, 200], [160, 240], [280, 200]].map(([x, y], i) => (
          <g key={i}>
            <rect x={x - 40} y={y - 20} width="80" height="40" rx="10" fill={active ? "var(--accent-soft)" : "var(--bg-elev)"} stroke={active ? "var(--accent)" : "var(--line-strong)"} strokeWidth="1.5" />
            <text x={x} y={y + 4} fontFamily="JetBrains Mono" fontSize="10" textAnchor="middle" fill="var(--ink)">PRESS {i + 1}</text>
          </g>
        ))}

        <path d="M 160 80 Q 100 130, 40 180" fill="none" stroke="var(--accent)" strokeDasharray="4 4" strokeWidth="1.5" markerEnd="url(#ah)">
          <animate attributeName="stroke-dashoffset" from="0" to="-16" dur="1s" repeatCount="indefinite" />
        </path>
        <path d="M 160 80 L 160 220" fill="none" stroke="var(--ink)" strokeWidth="2" markerEnd="url(#ah)" />
        <path d="M 160 80 Q 220 130, 280 180" fill="none" stroke="var(--accent)" strokeDasharray="4 4" strokeWidth="1.5" markerEnd="url(#ah)">
          <animate attributeName="stroke-dashoffset" from="0" to="-16" dur="1s" repeatCount="indefinite" />
        </path>

        <circle cx="160" cy="150" r="6" fill="var(--accent)">
          <animate attributeName="r" values="6;9;6" dur="1.5s" repeatCount="indefinite" />
        </circle>
      </svg>
    );
  }
  if (which === "press") {
    return (
      <svg viewBox="0 0 320 220" style={{ width: "100%", maxWidth: 400 }}>
        <rect x="20" y="60" width="280" height="120" rx="14" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="1.5" />
        <rect x="40" y="80" width="60" height="80" rx="6" fill="var(--ink)" />
        <rect x="110" y="80" width="100" height="80" rx="6" fill="var(--bg-soft)" stroke="var(--line-strong)" />
        <rect x="220" y="80" width="60" height="80" rx="6" fill="var(--ink)" />

        {[0, 1, 2, 3].map((i) => (
          <g key={i}>
            <rect x={130 + i * 18} y={100} width="14" height="40" fill={["#3FB8C2", "#E8388B", "#F8D34B", "#1a1a1a"][i]} opacity={active ? 1 : 0.3}>
              <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" begin={`${i * 0.2}s`} repeatCount="indefinite" />
            </rect>
          </g>
        ))}

        <circle cx="60" cy="40" r="6" fill="var(--accent)">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.2s" repeatCount="indefinite" />
        </circle>
        <text x="80" y="44" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink-2)">PRINTING · 64% COMPLETE</text>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 320 240" style={{ width: "100%", maxWidth: 400 }}>
      <rect x="40" y="120" width="180" height="80" rx="8" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="1.5" />
      <rect x="60" y="100" width="40" height="20" fill="var(--bg-elev)" stroke="var(--ink)" strokeWidth="1.5" />
      <circle cx="80" cy="205" r="14" fill="var(--ink)" />
      <circle cx="80" cy="205" r="6" fill="var(--bg-elev)" />
      <circle cx="180" cy="205" r="14" fill="var(--ink)" />
      <circle cx="180" cy="205" r="6" fill="var(--bg-elev)" />
      <rect x="230" y="140" width="40" height="60" rx="4" fill="var(--accent)" />
      <text x="250" y="175" fontFamily="JetBrains Mono" fontSize="11" textAnchor="middle" fill="var(--accent-ink)" fontWeight="700">P</text>
      <line x1="40" y1="220" x2="290" y2="220" stroke="var(--line)" strokeWidth="2" strokeDasharray="6 6">
        <animate attributeName="stroke-dashoffset" from="0" to="-12" dur="0.8s" repeatCount="indefinite" />
      </line>
    </svg>
  );
}

/* ============================================================
   SERVICES PREVIEW (Home section)
============================================================ */
function ServicesPreview({ setRoute }) {
  const services = [
    {
      n: "01",
      title: "Bulk B2B printing",
      body: "Volume runs from 5,000 to 500,000 units. Dedicated account manager, milestone billing, white-label dispatch.",
      tags: ["Offset", "Digital", "White-label"],
    },
    {
      n: "02",
      title: "Marketing print",
      body: "Cards, flyers, brochures, standees — your in-house marketing team's print extension, with same-day proofs.",
      tags: ["48h SLA", "Hi-touch QC", "Proofs"],
    },
    {
      n: "03",
      title: "Vendor onboarding",
      body: "Own a press? Join the PrintBala network. Bring in nationwide demand on day one. We handle billing, QA, logistics.",
      tags: ["Press owners", "Verified", "Pan-India"],
    },
    {
      n: "04",
      title: "Custom packaging",
      body: "Corrugated boxes, mailers, retail packaging — fully customised dieline, finish, and unit-fill on request.",
      tags: ["Dieline", "Custom", "Retail-ready"],
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="03 — Services"
          title="Built for marketing teams, ops teams, and press owners."
          sub="Whether you need a 200-card run for tomorrow's meeting or a 200,000-unit packaging cycle, PrintBala scales to it."
        />
        <div className="services">
          {services.map((s, i) => (
            <a
              key={i}
              href="#"
              onClick={(e) => { e.preventDefault(); setRoute("services"); window.scrollTo(0, 0); }}
              className="service-card reveal"
              data-delay={(i % 2) + 1}
              style={{ textDecoration: "none" }}
            >
              <div className="service-num">{s.n} / 04</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="features">
                {s.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   DELIVERY NETWORK
============================================================ */
function DeliveryNetwork() {
  const cities = [
    { x: 30, y: 30, n: "Delhi" },
    { x: 22, y: 50, n: "Jaipur" },
    { x: 38, y: 28, n: "Lucknow" },
    { x: 43, y: 35, n: "Etawah" },
    { x: 28, y: 70, n: "Mumbai" },
    { x: 44, y: 60, n: "Hyderabad" },
    { x: 38, y: 78, n: "Bengaluru" },
    { x: 55, y: 78, n: "Chennai" },
    { x: 65, y: 50, n: "Kolkata" },
    { x: 50, y: 45, n: "Bhopal" },
    { x: 32, y: 42, n: "Agra" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <SectionHead
          eyebrow="04 — Coverage"
          title="A press is closer than you think."
          sub="With 1,200+ vetted partners across 28 states, we route to whichever press is fastest and cheapest for your job — not whichever is paying the most."
        />
        <div className="network reveal">
          <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <pattern id="grid" width="4" height="4" patternUnits="userSpaceOnUse">
                <path d="M 4 0 L 0 0 0 4" fill="none" stroke="var(--line)" strokeWidth="0.2" />
              </pattern>
            </defs>
            <rect width="100" height="100" fill="url(#grid)" />
            {/* very abstract India outline */}
            <path
              d="M22,22 L42,18 L58,16 L66,22 L70,32 L78,40 L70,52 L68,62 L60,72 L52,80 L46,86 L40,82 L36,76 L30,68 L24,60 L20,52 L18,42 L18,32 Z"
              fill="var(--bg-elev)"
              stroke="var(--line-strong)"
              strokeWidth="0.3"
            />
            {cities.map((c, i) => (
              <g key={i}>
                <line x1={c.x} y1={c.y} x2={43} y2={35} stroke="var(--accent)" strokeWidth="0.15" opacity="0.5" strokeDasharray="0.6 0.6">
                  <animate attributeName="stroke-dashoffset" from="0" to="-2.4" dur="2s" repeatCount="indefinite" />
                </line>
              </g>
            ))}
          </svg>
          {cities.map((c, i) => (
            <div key={i} className="city" style={{ left: `${c.x}%`, top: `${c.y}%`, animationDelay: `${i * 0.2}s` }}>
              <div className="lbl">{c.n}</div>
            </div>
          ))}
        </div>
        <div className="stats reveal" style={{ marginTop: 32 }}>
          <div className="stat"><div className="v"><Counter to={28} /></div><div className="l">States covered</div></div>
          <div className="stat"><div className="v"><Counter to={1200} suffix="+" /></div><div className="l">Vetted partners</div></div>
          <div className="stat"><div className="v"><Counter to={48} suffix="h" /></div><div className="l">Avg. delivery</div></div>
          <div className="stat"><div className="v"><Counter to={99} suffix="%" /></div><div className="l">On-time SLA</div></div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TESTIMONIALS
============================================================ */
function Testimonials() {
  const items = [
    { q: "PrintBala has become our default print partner. They turned around 12,000 booklets in 60 hours for our IPO roadshow.", a: "Anika R.", r: "Brand lead, FinTech startup" },
    { q: "Their quality control is what sold us. Two QC checks before dispatch means almost zero defects in our last six runs.", a: "Vivek P.", r: "Operations, Mumbai retail chain" },
    { q: "Joined as a press partner six months ago. Already filling 40% more capacity through PrintBala's order pipeline.", a: "Raghav S.", r: "Owner, Delhi press" },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="05 — Voices"
          title="Trusted by 12,000+ businesses."
          sub=""
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="testimonial-grid">
          {items.map((t, i) => (
            <div key={i} className="reveal" data-delay={i + 1} style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>
              <svg width="32" height="24" viewBox="0 0 32 24" fill="var(--accent)"><path d="M0 24V12C0 5 4 0 12 0v4c-4 0-7 3-7 7h7v13H0zm18 0V12c0-7 4-12 12-12v4c-4 0-7 3-7 7h7v13H18z"/></svg>
              <p style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 400, color: "var(--ink)", letterSpacing: "-0.01em", lineHeight: 1.4 }}>"{t.q}"</p>
              <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                <div style={{ fontWeight: 600, color: "var(--ink)" }}>{t.a}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>{t.r}</div>
              </div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES PAGE
============================================================ */
function Services({ setRoute }) {
  const [cat, setCat] = useS("all");
  const products = [
    { c: "card", t: "Business cards", img: "assets/products/gloss-card.png", p: "Premium · 350gsm" },
    { c: "card", t: "ID cards", img: "assets/products/idcard.webp", p: "PVC · printed both sides" },
    { c: "marketing", t: "A5 flyers", img: "assets/products/pamplate.png", p: "A5 · 4-colour" },
    { c: "marketing", t: "Tri-fold brochures", img: "assets/products/medical.jpg", p: "Tri-fold · matte" },
    { c: "marketing", t: "Pamphlets", img: "assets/features-1.png", p: "A4 · single fold" },
    { c: "signage", t: "Standee rollups", img: "assets/products/rollup.jpg", p: "6 ft · vinyl + stand" },
    { c: "signage", t: "Canopy banners", img: "assets/products/canopy.png", p: "Custom dieline" },
    { c: "signage", t: "Sun-pack boards", img: "assets/products/sunpack.webp", p: "Indoor & outdoor" },
    { c: "packaging", t: "Mailer boxes", img: "assets/hero-img-1.png", p: "Custom corrugated" },
    { c: "packaging", t: "Retail packaging", img: "assets/products/sample.jpg", p: "Branded · die-cut" },
    { c: "stationery", t: "Letterheads", img: "assets/products/digitalpaper.png", p: "100gsm · 4-colour" },
    { c: "stationery", t: "Envelopes", img: "assets/products/envelop.png", p: "Branded · DL/A4" },
    { c: "stationery", t: "Custom pens", img: "assets/products/pen.png", p: "Logo-printed" },
    { c: "stationery", t: "Sticker sheets", img: "assets/products/stickers.webp", p: "Die-cut · waterproof" },
  ];

  const cats = [
    { id: "all", label: "All" },
    { id: "card", label: "Cards" },
    { id: "marketing", label: "Marketing" },
    { id: "signage", label: "Signage" },
    { id: "packaging", label: "Packaging" },
    { id: "stationery", label: "Stationery" },
  ];

  const filtered = cat === "all" ? products : products.filter((p) => p.c === cat);

  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / Services</div>
          <TextReveal as="h1">Print anything. We've got the press.</TextReveal>
          <p className="lede reveal" data-delay="3">
            42 product templates, 1,200+ vetted presses, four finishing options on every job. Start from a category or upload your own dieline.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="career-filters reveal">
            {cats.map((c) => (
              <button key={c.id} className={`chip ${cat === c.id ? "active" : ""}`} onClick={() => setCat(c.id)}>
                {c.label}
              </button>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 16 }}>
            {filtered.map((p, i) => (
              <div key={p.t} className="reveal" data-delay={(i % 3) + 1} style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden", cursor: "pointer", transition: "transform 0.4s var(--ease-out)" }}
                onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-4px)"}
                onMouseLeave={(e) => e.currentTarget.style.transform = ""}
              >
                <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--bg-soft)" }}><Img src={p.img} alt={p.t} /></div>
                <div style={{ padding: 20 }}>
                  <h4 style={{ fontSize: 17, color: "var(--ink)", marginBottom: 4 }}>{p.t}</h4>
                  <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{p.p}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Request a callback"
            title="Tell us what you need. We'll call you within an hour."
            sub="B2B orders are quoted by our sales team after a quick chat. B2C orders are taken by phone — same number, same speed."
          />
          <CallbackFlow />
        </div>
      </section>
    </main>
  );
}

function CallbackFlow() {
  const [stage, setStage] = useS(0);
  const [data, setData] = useS({ product: "", qty: "", customer: "", name: "", phone: "" });
  const next = () => setStage((s) => s + 1);
  const prev = () => setStage((s) => Math.max(s - 1, 0));
  const set = (k, v) => setData({ ...data, [k]: v });

  const stages = [
    { label: "What do you need?", key: "product", opts: ["Business cards", "Flyers", "Brochures", "Standee / Banners", "Packaging", "Stationery", "Something else"] },
    { label: "Approximate quantity?", key: "qty", opts: ["Under 500", "500 – 5,000", "5,000 – 25,000", "25,000+", "Not sure yet"] },
    { label: "You're a…", key: "customer", opts: ["Business / agency (B2B)", "Individual (B2C)"] },
  ];

  return (
    <div className="reveal" style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "clamp(28px, 4vw, 56px)" }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 32 }}>
        {[0, 1, 2, 3].map((i) => (
          <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= stage ? "var(--accent)" : "var(--line)", transition: "background 0.3s" }} />
        ))}
      </div>

      {stage < 3 && (
        <div>
          <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 8 }}>Step {stage + 1} / 4</div>
          <h3 style={{ fontSize: 32, marginBottom: 28, color: "var(--ink)", letterSpacing: "-0.02em" }}>{stages[stage].label}</h3>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {stages[stage].opts.map((o) => (
              <button
                key={o}
                onClick={() => { set(stages[stage].key, o); setTimeout(next, 180); }}
                className="chip"
                style={{
                  padding: "14px 22px",
                  fontSize: 15,
                  background: data[stages[stage].key] === o ? "var(--accent)" : "var(--bg)",
                  color: data[stages[stage].key] === o ? "var(--accent-ink)" : "var(--ink)",
                  borderColor: data[stages[stage].key] === o ? "var(--accent)" : "var(--line)",
                }}
              >
                {o}
              </button>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 40 }}>
            <button className="btn btn-ghost" onClick={prev} disabled={stage === 0} style={{ opacity: stage === 0 ? 0.3 : 1 }}>← Back</button>
          </div>
        </div>
      )}

      {stage === 3 && (
        <div>
          <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 8 }}>Step 4 / 4</div>
          <h3 style={{ fontSize: 32, marginBottom: 28, color: "var(--ink)", letterSpacing: "-0.02em" }}>How do we reach you?</h3>
          <form
            onSubmit={(e) => { e.preventDefault(); setStage(4); }}
            style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, maxWidth: 560 }}
          >
            <div className="form-field" style={{ gridColumn: "span 2" }}>
              <label>Your name</label>
              <input type="text" value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="Anika Rao" required />
            </div>
            <div className="form-field" style={{ gridColumn: "span 2" }}>
              <label>Phone number</label>
              <input type="tel" value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+91 98xxx xxxxx" required />
            </div>
            <div style={{ gridColumn: "span 2", display: "flex", justifyContent: "space-between", marginTop: 8 }}>
              <button type="button" className="btn btn-ghost" onClick={prev}>← Back</button>
              <button type="submit" className="btn btn-primary">
                Request callback
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
            </div>
          </form>
        </div>
      )}

      {stage === 4 && (
        <div>
          <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", marginBottom: 24 }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
          </div>
          <h3 style={{ fontSize: 40, color: "var(--ink)", letterSpacing: "-0.03em", marginBottom: 12 }}>We'll call you back.</h3>
          <p style={{ color: "var(--ink-3)", marginBottom: 24, maxWidth: 560 }}>
            Thanks {data.name?.split(" ")[0] || "—"}. Someone from our team will call <strong style={{ color: "var(--ink)" }}>{data.phone || "your number"}</strong> within the next hour to discuss <strong style={{ color: "var(--ink)" }}>{data.product?.toLowerCase() || "your job"}</strong> ({data.qty || "quantity tbd"}).
          </p>
          <p style={{ color: "var(--ink-3)", marginBottom: 28, fontSize: 14 }}>
            Office hours: Mon–Sat, 9:30am – 7pm IST. After hours, expect a call by 10am next working day.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href="tel:+919870012345" className="btn btn-primary">
              Or call us now · +91 98700 12345
            </a>
            <button className="btn btn-ghost" onClick={() => { setStage(0); setData({ product: "", qty: "", customer: "", name: "", phone: "" }); }}>Start over</button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   ABOUT
============================================================ */
function About() {
  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / About</div>
          <TextReveal as="h1">We're rebuilding India's print supply chain.</TextReveal>
          <p className="lede reveal" data-delay="3">
            PrintBala Print World Pvt. Ltd. was founded in Etawah, Uttar Pradesh in 2018 by a small team of press operators and product engineers — frustrated by how a ₹70,000 Cr industry still ran on phone calls and fax orders.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="split">
            <div className="reveal" style={{ aspectRatio: "4/5", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
              <Img src="assets/team/PratapSingh.png" alt="Founder at the press floor" position="center 25%" />
            </div>
            <div className="reveal" data-delay="2">
              <div className="eyebrow" style={{ marginBottom: 20 }}>The story</div>
              <h2>From a single press in Etawah to a network of 1,200.</h2>
              <p style={{ marginTop: 24, color: "var(--ink-3)", fontSize: 17, lineHeight: 1.7 }}>
                In 2018, our founders ran a single 4-colour offset press in Etawah. By 2021, we'd onboarded 60 partner presses in UP and Bihar. Today, PrintBala is a pan-India platform serving 12,000+ businesses, from Tier-3 retailers to publicly listed companies.
              </p>
              <p style={{ marginTop: 16, color: "var(--ink-3)", fontSize: 17, lineHeight: 1.7 }}>
                We invest in the printers. Not the middlemen. Every press partner in our network is trained, certified, and audited annually for quality, ethics, and safety.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Milestones"
            title="A short timeline."
            sub=""
          />
          <Timeline />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="In numbers"
            title="The print engine, today."
            sub=""
          />
          <div className="stats reveal">
            <div className="stat"><div className="v"><Counter to={12000} suffix="+" /></div><div className="l">Businesses served</div></div>
            <div className="stat"><div className="v"><Counter to={1200} suffix="+" /></div><div className="l">Press partners</div></div>
            <div className="stat"><div className="v"><Counter to={28} /></div><div className="l">States operated</div></div>
            <div className="stat"><div className="v"><Counter to={2.4} suffix="M" /></div><div className="l">Units printed (FY25)</div></div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Timeline() {
  const events = [
    { y: "2018", t: "Founded in Etawah, UP", b: "Single 4-colour offset press; team of 4." },
    { y: "2020", t: "Pan-UP press network", b: "60 verified partner presses across UP and Bihar." },
    { y: "2022", t: "First B2B contracts", b: "Onboarded our first 5 enterprise clients including a listed FMCG." },
    { y: "2024", t: "Pan-India coverage", b: "1,000 press partners across 28 states; same-day metro delivery." },
    { y: "2026", t: "The print engine", b: "12,000+ businesses, 2.4M units printed in FY25 alone." },
  ];
  return (
    <div style={{ position: "relative" }}>
      <div style={{ position: "absolute", left: 80, top: 0, bottom: 0, width: 1, background: "var(--line)" }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
        {events.map((e, i) => (
          <div key={i} className="reveal" data-delay={(i % 3) + 1} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 40, alignItems: "start", position: "relative" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 600, color: "var(--accent)", letterSpacing: "-0.02em" }}>{e.y}</div>
            <div style={{ position: "relative" }}>
              <div style={{ position: "absolute", left: -45, top: 16, width: 13, height: 13, borderRadius: "50%", background: "var(--bg)", border: "3px solid var(--accent)" }} />
              <h3 style={{ fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>{e.t}</h3>
              <p style={{ color: "var(--ink-3)", fontSize: 16, maxWidth: 600 }}>{e.b}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   VISION
============================================================ */
function Vision() {
  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / Vision</div>
          <TextReveal as="h1">Every Indian business deserves a world-class print.</TextReveal>
          <p className="lede reveal" data-delay="3">
            We believe the small-town stationer and the listed conglomerate deserve the same print quality, the same turnaround, the same fair pricing. That's the engine we're building.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Principles"
            title="Three things we will not compromise on."
            sub=""
          />
          <div className="values">
            {[
              { n: "01", t: "Quality first", b: "Two QC checks before dispatch on every job, regardless of order size. A single-card run gets the same scrutiny as a 50,000-unit packaging run." },
              { n: "02", t: "Fair to printers", b: "We earn from logistics and platform, never from squeezing partner press margins. Our partners are paid in 7 days, every time." },
              { n: "03", t: "Honest dealings", b: "No middleman markup. Quoted directly by our team after we understand your job. If we save on bulk, we pass it on." },
            ].map((v, i) => (
              <div key={v.n} className="value reveal" data-delay={i + 1}>
                <div className="v-num">{v.n} / 03</div>
                <h3>{v.t}</h3>
                <p>{v.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--ink)", color: "var(--bg)" }}>
        <div className="container">
          <div style={{ maxWidth: 900 }}>
            <div className="eyebrow reveal" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 20 }}>
              <span style={{ background: "rgba(255,255,255,0.3)" }} />
              <span>The 2030 plan</span>
            </div>
            <TextReveal as="h2" className="reveal" >
              By 2030, we will be the largest print-on-demand network on the planet — measured not by revenue, but by livelihoods.
            </TextReveal>
            <p className="reveal" data-delay="2" style={{ color: "rgba(255,255,255,0.7)", fontSize: 18, marginTop: 32, maxWidth: 700 }}>
              We plan to onboard 10,000 press partners across South Asia, train 25,000 press operators, and build the world's most-trusted print supply chain. Printbala isn't a startup — it's a generational infrastructure bet.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   TEAM
============================================================ */
function Team() {
  const team = [
    { n: "Pratap Singh", r: "Founder & CEO", img: "assets/team/PratapSingh.png" },
    { n: "Shivam Pal", r: "CTO", img: "assets/team/shivam.png" },
    { n: "Akash Kumar", r: "Printing Head", img: "assets/team/Akash.png" },
    { n: "Shiv Kumar", r: "Marketing Head", img: "assets/team/Shiv.png" },
    { n: "Bhanu Pratap", r: "Sales Executive", img: "assets/team/Bhanu.png" },
    { n: "Umesh", r: "Production Lead", img: "assets/team/Umesh.png" },
  ];
  return (
    <main>
      <header className="page-header">
        <div className="container">
          <div className="crumbs reveal">Home / Team</div>
          <TextReveal as="h1">The people behind the press.</TextReveal>
          <p className="lede reveal" data-delay="3">
            A team of press operators, designers, engineers, and operators — building India's most trusted print network from Etawah.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="team-grid">
            {team.map((m, i) => (
              <div key={m.n} className="team-card reveal" data-delay={(i % 4) + 1}>
                <div className="photo">
                  <div className="badge">{m.r.split(" ")[0]}</div>
                  <Img src={m.img} alt={m.n} position="center top" />
                </div>
                <div>
                  <h4>{m.n}</h4>
                  <div className="role">{m.r}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 80, textAlign: "center", padding: "60px 40px", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", background: "var(--bg-soft)" }} className="reveal">
            <h3 style={{ fontSize: 32, color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: 12 }}>Plus our press-floor team in Etawah.</h3>
            <p style={{ color: "var(--ink-3)", marginBottom: 24 }}>Press operators, QA inspectors, dispatch coordinators — the people who actually put ink on paper and ship your job.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  Home, Services, About, Vision, Team,
});
