
// ═══════════════════════════════════════════════════════════════════════════
// PAYBACK INTERNATIONAL — Landing Page
// ═══════════════════════════════════════════════════════════════════════════
//
// HOW TO EDIT (look for these markers in this file):
//   [EDIT: HERO]      → hero slideshow images, focus labels, headline, tagline
//   [EDIT: TICKER]    → scrolling client ticker names
//   [EDIT: WORK]      → work grid items (photos, titles, years, tags)
//   [EDIT: SERVICES]  → the three service columns
//   [EDIT: MANIFESTO] → The Haus copy
//   [EDIT: CLIENTS]   → the 8 client grid tiles
//   [EDIT: CONTACT]   → address, email, phone, status pill
//   [EDIT: FOOTER]    → footer columns and legal line
//   [EDIT: STATUS]    → bottom status bar text
//
// TO REPLACE A PHOTO:
//   1. Upload your new image into the /media folder (any name, e.g. "new-bike.jpg")
//   2. Find the matching `src:` entry below and point it to your filename
//   3. Save, refresh.
//
// ═══════════════════════════════════════════════════════════════════════════

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "holo",
  "background": "jet",
  "displayFont": "michroma",
  "pattern": "hex",
  "showCursor": true
}/*EDITMODE-END*/;

// ---------- Theme application ----------
function ThemeBridge({ tweaks }) {
  useEffect(() => {
    const root = document.documentElement;
    const body = document.body;

    // Backgrounds
    const bgMap = {
      jet:    { bg: "#070707", bg2: "#0c0c0c", fg: "#e7e5dd", fgDim: "#6e6c66", line: "rgba(231,229,221,0.10)", lineStrong: "rgba(231,229,221,0.24)" },
      ink:    { bg: "#0f0d09", bg2: "#15130f", fg: "#e7e2d4", fgDim: "#75716a", line: "rgba(231,226,212,0.10)", lineStrong: "rgba(231,226,212,0.24)" },
      paper:  { bg: "#ece8de", bg2: "#e0dccf", fg: "#0a0a0a", fgDim: "#5a5852", line: "rgba(10,10,10,0.16)", lineStrong: "rgba(10,10,10,0.34)" },
    };
    const palette = bgMap[tweaks.background] || bgMap.jet;
    Object.entries(palette).forEach(([k, v]) => {
      root.style.setProperty(`--${k === 'bg2' ? 'bg-2' : k === 'fgDim' ? 'fg-dim' : k === 'lineStrong' ? 'line-strong' : k}`, v);
    });

    // Accent
    const accentColorMap = {
      mono:   "var(--fg)",
      holo:   "#f3f1ea", // gradient handled via .holo-text class
      red:    "#e63946",
      blue:   "#2e6cff",
    };
    root.style.setProperty("--accent", accentColorMap[tweaks.accent] || accentColorMap.mono);
    body.dataset.accent = tweaks.accent;

    // Display font
    const fontMap = {
      michroma:'"Michroma", "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif',
      archivo: '"Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif',
      anton:   '"Anton", "Archivo Black", sans-serif',
      helv:    '"Helvetica Neue", Helvetica, Arial, sans-serif',
    };
    root.style.setProperty("--display", fontMap[tweaks.displayFont] || fontMap.michroma);

    // Pattern
    root.style.setProperty("--hex-opacity", tweaks.background === 'paper' ? "0.08" : "0.06");
  }, [tweaks]);
  return null;
}

// ---------- Reveal on scroll ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// ---------- Crop-mark wrapper ----------
function Crop({ children, className = "", style }) {
  return (
    <div className={`crop ${className}`} style={style}>
      <span className="crop-tr"></span>
      <span className="crop-br"></span>
      {children}
    </div>
  );
}

// ---------- Cursor blob ----------
function CursorBlob({ enabled }) {
  const ref = React.useRef(null);
  const target = React.useRef({ x: 0, y: 0 });
  const pos = React.useRef({ x: 0, y: 0 });
  React.useEffect(() => {
    if (!enabled) return;
    const onMove = (e) => { target.current.x = e.clientX; target.current.y = e.clientY; };
    const onOver = (e) => {
      const el = ref.current;
      if (!el) return;
      const t = e.target;
      const hoverable = t.closest("a,button,.work-card,.client,.btn,input,textarea,select,label");
      el.classList.toggle("hover", !!hoverable);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseover", onOver);
    let raf;
    const loop = () => {
      pos.current.x += (target.current.x - pos.current.x) * 0.2;
      pos.current.y += (target.current.y - pos.current.y) * 0.2;
      if (ref.current) {
        ref.current.style.transform = `translate(${pos.current.x - 10}px, ${pos.current.y - 10}px)`;
      }
      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseover", onOver);
      cancelAnimationFrame(raf);
    };
  }, [enabled]);
  if (!enabled) return null;
  return <div ref={ref} className="cursor-blob"></div>;
}

// ---------- Top nav ----------
function TopNav() {
  return (
    <nav className="top-nav">
      <a href="#top" className="brand">
        <img src="media/logo-light.png" alt="Payback International" />
      </a>
      <div className="links">
        <a href="#work">Work</a>
        <a href="#services">Services</a>
        <a href="#manifesto">The Haus</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
      </div>
      <a href="https://www.instagram.com/payback.intl/" target="_blank" rel="noopener" style={{fontFamily:"var(--mono)",fontSize:10,letterSpacing:".22em",textTransform:"uppercase"}}>
        @payback.intl ↗
      </a>
    </nav>
  );
}

// ---------- Hero ----------
// [EDIT: HERO] — slideshow frames. To swap a photo: change the `src:` to your file in /media.
// To change the headline / tagline, scroll down to the JSX in this same function.
const HERO_FRAMES = [
  { src: "media/hero-03-bike-front.jpeg",   focus: "Holo Supermoto · Stealth Profile" },
  { src: "media/work-10-gungo-sm.jpg",  focus: "Gurellia Supermoto · Side Profile" },
  
];
const FRAME_DUR_MS = 6000;

function Hero({ accent }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setIdx((i) => (i + 1) % HERO_FRAMES.length);
    }, FRAME_DUR_MS);
    return () => clearInterval(id);
  }, []);
  const currentFocus = HERO_FRAMES[idx].focus;

  return (
    <header id="top" className="hero">
      <div className="hero-fileline">
        <span>FILE/01 · <span className="focus" key={idx}>{currentFocus}</span></span>
        <span>2024 — 26 · SLOWMO REEL</span>
      </div>

      <div className="hero-stage">
        <div className="hero-slides">
          {HERO_FRAMES.map((f, i) => (
            <div key={f.src} className={"hero-slide" + (i === idx ? " active" : "")}
                 style={{"--kb-dur": `${FRAME_DUR_MS + 4000}ms`}}>
              <img src={f.src} alt="" loading={i < 3 ? "eager" : "lazy"} />
            </div>
          ))}
          <div className="hero-vignette"></div>
          <div className="hero-grain"></div>
          <div className="hero-scanlines"></div>
        </div>

        <div className="hero-corners">
          <span className="tr"></span><span className="br"></span>
        </div>

        <div className="hero-overlay">
        
          <div className="hero-tagline">Custom Vehicle Graphics · Apparel · Identity</div>
          <h1 className="hero-h">A design-led force,<br/>shaping visual culture.</h1>
        </div>

        <div className="hero-frames">
          {HERO_FRAMES.map((_, i) => (
            <span key={i} className={"tick" + (i === idx ? " active" : "")}
                  style={{"--frame-dur": `${FRAME_DUR_MS}ms`}}></span>
          ))}
        </div>
      </div>

      <div className="hero-meta">
        <div className="sub">
          Vehicle graphics, apparel and identity for OEMs, race teams, influencers, motovloggers and private builds. All Done in-house.
        </div>
        <div style={{display:"flex",gap:10,flexWrap:"wrap"}}>
          <a href="#work" className="btn primary"><span className="dot"></span>View the Reel</a>
          <a href="#contact" className="btn">Start a Project →</a>
        </div>
      </div>
    </header>
  );
}

// ---------- Client marquee ticker ----------
// [EDIT: TICKER] — the scrolling client/keyword strip below the hero.
function ClientTicker() {
  const items = [
    "Autologue",
    "Bombay Custom Works",
    "Castrol",
    "Classic Legends Pvt Ltd",
    "Team RACR",
    "3M Car Care",
    "YC Design",
    "Harjee Motorsports",
  ];
  return (
    <div style={{borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)",padding:"22px 0",overflow:"hidden"}}>
      <div className="marquee">
        <div className="marquee-track" style={{"--scroll-dur":"48s",fontFamily:"var(--mono)",fontSize:13,letterSpacing:".24em",textTransform:"uppercase",color:"var(--fg-dim)"}}>
          {[...items, ...items].map((it, i) => (
            <span key={i} style={{display:"inline-flex",alignItems:"center",gap:64}}>
              <span>◆</span><span>{it}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- Work ----------
// [EDIT: WORK] — the 7-card work grid. Each item has src, title, year, tag.
// To add an item: append to this array and add a matching {col,row} entry in the layout array inside Work().

const WORK = [
  { src: "media/work-10-gungo-sm.jpg",   title: "Supermoto / Guerilla 450", year: "2026", tag: "Full Wrap" },
  { src: "media/work-08-honeycomb.webp", title: "Mahindra Thar / Circuit X", year: "2025", tag: "Pre Cuts" },
  { src: "media/work-03-supermoto.webp", title: "Supermoto / Holo Shard", year: "2025", tag: "Full Wrap" },
  { src: "media/work-04-enduro.webp",    title: "Enduro / Iridescent Mesh", year: "2026", tag: "Full Wrap" },
  { src: "media/work-06-mx.webp",        title: "Honey Comb Pattern", year: "2026", tag: "Material R&D" },
  { src: "media/work-02-detail.webp",    title: "Tail / Embossed Mark", year: "2026", tag: "Custom Stamp" },
  { src: "media/work-05-tail.webp",      title: "Perf Layer / Detail", year: "2026", tag: "Close-up" },
  { src: "media/work-07-thar.webp",      title: "MX 250 / Race Kit 05", year: "2026", tag: "SUV Wrap" },
  { src: "media/work-09-gungo-sm.jpg",   title: "Supermoto / Guerilla 450", year: "2026", tag: "Iso View" },
  { src: "media/work-11-gungo-sm.jpg",   title: "Supermoto / Guerilla 450", year: "2026", tag: "BCW 07" },
  { src: "media/work-11-SUD-XP.webp",    title: "Xpulse / Payback", year: "2025", tag: "Side View" },
  { src: "media/work-12-redbull- adv390.jpeg", title: "RedBull / KTM 390 ADV", year: "2026", tag: "Custom Stamp" },
];

function Lightbox({ idx, onClose, onPrev, onNext }) {
  const item = WORK[idx];
  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", handler);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", handler);
      document.body.style.overflow = "";
    };
  }, [idx]);
  return (
    <div className="lightbox-overlay" onClick={onClose}>
      <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
        <button className="lightbox-close" onClick={onClose}>✕</button>
        <button className="lightbox-prev" onClick={onPrev}>←</button>
        <div className="lightbox-img-wrap">
          <img src={item.src} alt={item.title} />
        </div>
        <button className="lightbox-next" onClick={onNext}>→</button>
        <div className="lightbox-footer">
          <span className="lightbox-title">{item.title}</span>
          <span className="lightbox-meta">{item.tag} · {item.year}</span>
          <span className="lightbox-count">{String(idx+1).padStart(2,"0")} / {String(WORK.length).padStart(2,"0")}</span>
        </div>
      </div>
    </div>
  );
}
function WorkCard({ item, idx, span, onOpen }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current) {
      ref.current.addEventListener('click', () => onOpen(idx));
    }
  }, []);
  return (
    <article
      ref={ref}
      className={"work-card reveal" + (item.cutout ? " cutout" : "")}
      style={{gridColumn:`span ${span.col}`, gridRow:`span ${span.row}`, cursor:"pointer"}}
    >
      <div className="label">
        <span>{String(idx + 1).padStart(2,"0")}/{String(WORK.length).padStart(2,"0")}</span>
        <span>{item.year}</span>
      </div>
      <div className="img">
        <img src={item.src} alt={item.title} loading="lazy" />
      </div>
      <div className="footer">
        <h3>{item.title}</h3>
        <div className="tag">{item.tag}</div>
      </div>
    </article>
  );
}
function Work({ onOpen }) {
  const layout = [
    { col: 7, row: 1 },
    { col: 5, row: 1 },
    { col: 4, row: 1 },
    { col: 4, row: 1 },
    { col: 4, row: 1 },
    { col: 6, row: 1 },
    { col: 6, row: 1 },
    { col: 8, row: 1 },
    { col: 4, row: 1 },
    { col: 3, row: 1 },
    { col: 3, row: 1 },
    { col: 6, row: 1 },
  ];
  return (
    <section id="work">
      <div className="section-head">
        <div>
          <div className="eyebrow"><span className="num">02</span> / Selected Work <span className="line"></span></div>
          <h2 className="section-title" style={{marginTop:14}}>The Reel · 2024 – 26.</h2>
        </div>
        <div className="section-sub">
          Liveries, full wraps, custom material work and race kits — plotted, prototyped and printed in-house, applied by hand panel by panel.
        </div>
      </div>
      <div className="work-grid">
        {WORK.map((item, i) => (
          <WorkCard key={i} item={item} idx={i} span={layout[i]} onOpen={onOpen} />
        ))}
      </div>
      <div style={{marginTop:32,display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:16}}>
        <div className="eyebrow"><span>End of selection · Archive 240+ builds</span></div>
        <a href="#contact" className="btn">Request the Full Archive →</a>
      </div>
    </section>
  );
}

// ---------- Feature plate ----------
function FeaturePlate() {
  return null;
}

// ---------- Services ----------
// [EDIT: SERVICES] — the three service columns. Edit `items` inside the function below.
function Services() {
  const items = [
    {
      n: "S/01", title: "Vehicle Graphics",
      desc: "Full wraps, race liveries, accent kits and custom-cut vinyl for two and four wheels. Designed for camera, built for the road.",
      rows: [
        ["Format", "Full / Partial / Kit"],
        ["Materials", "Cast Vinyl · PPF · Holo"],
        ["Turnaround", "5 – 14 Days"],
        ["Coverage", "Pan-India · The Haus + Mobile"],
      ],
    },
    {
      n: "S/02", title: "Apparel & Merch",
      desc: "Drop-cycle apparel, team gear and capsule merch — designed alongside the vehicle so the kit, the rider and the bike all speak the same language.",
      rows: [
        ["Output", "Tees · Hoodies · Caps · Patches"],
        ["Print", "DTF · Embroidery · Screen"],
        ["MOQ", "From 25 Units"],
        ["Lead Time", "10 – 21 Days"],
      ],
    },
    {
      n: "S/03", title: "Custom Identity",
      desc: "For OEMs and brands launching a model, riders launching a name. Logo systems, livery DNA, signage, photography direction — the full grammar.",
      rows: [
        ["Scope", "Identity · Livery · Launch"],
        ["Deliverable", "Brand Book + Asset Kit"],
        ["Clients", "OEMs · Teams · Riders"],
        ["Engagement", "Project / Retainer"],
      ],
    },
  ];

  return (
    <section id="services" style={{paddingTop:0}}>
      <div className="section-head" style={{padding:"96px 32px 0"}}>
        <div>
          <div className="eyebrow"><span className="num">03</span> / What We Make <span className="line"></span></div>
          <h2 className="section-title" style={{marginTop:16}}>Services<br/>&amp; Capabilities.</h2>
        </div>
      </div>
      <div className="services" style={{marginTop:48}}>
        {items.map((it, i) => (
          <div className="service reveal" key={i}>
            <div>
              <div className="num">{it.n}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
            <div className="list">
              {it.rows.map(([k, v], j) => (
                <div className="row" key={j}><span>{k}</span><span>{v}</span></div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Manifesto ----------
// [EDIT: MANIFESTO] — the the Haus copy. Edit the <p> contents below.
function Manifesto() {
  return (
    <section id="manifesto" className="manifesto hex-bg">
      <div className="eyebrow"><span className="num">04</span> / The Haus <span className="line"></span></div>
      <div style={{height:48}}></div>
      <div className="quote reveal">
        We&apos;re a design-led force <em style={{color:"var(--fg-dim)"}}>shaping visual culture</em> through motion, innovation and expression.
      </div>
      <div className="body">
        <div className="col reveal">
          <p><strong>Built in the real world, not the boardroom.</strong> Payback International started in Mumbai. We grew up around riders, mechanics and tuners — and the work still smells like that garage.</p>
          <p>We treat a bike like a canvas and a canvas like a product. Every wrap is engineered to survive Indian roads,sun and the camera on every rider&apos;s helmet cam.</p>
        </div>
        <div className="col reveal">
          <p><strong>Design is the loudest part.</strong> A livery has six seconds to land at 120 km/h. The shape language, the colour break, the placement of a single number — all of it has to read before the bike has passed.</p>
          <p>We work with OEMs, race teams, motovloggers and private builds. Same studio, same standard, every panel.</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Clients ----------
// [EDIT: CLIENTS] — the 8-tile client grid. Edit the `cells` array inside.
function Clients() {
  const cells = [
    { name: "Autologue",            sub: "Studio" },
    { name: "Bombay Custom Works",  sub: "Builder" },
    { name: "Castrol",              sub: "Lubricants" },
    { name: "Classic Legends",      sub: "OEM" },
    { name: "Team RACR",            sub: "Race Team" },
    { name: "3M Car Care",          sub: "Materials" },
    { name: "YC Design",            sub: "Garage / Builder" },
    { name: "Harjee Motorsports",   sub: "Race Team" },
  ];
  return (
    <section id="clients">
      <div className="section-head">
        <div>
          <div className="eyebrow"><span className="num">06</span> / Worked With <span className="line"></span></div>
          <h2 className="section-title" style={{marginTop:16}}>The Index.</h2>
        </div>
        <div style={{maxWidth:360,fontSize:13,lineHeight:1.7,color:"var(--fg-dim)",fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:".16em"}}>
          Brands, OEMs, race teams and the loudest helmets on Indian roads.
        </div>
      </div>
      <div className="clients">
        {cells.map((c, i) => (
          <div className="client reveal" key={i}>
            {c.name}
            <span className="sub">{c.sub}</span>
          </div>
        ))}
      </div>
    </section>
  );
}
// ---------- Contact ----------
// [EDIT: EMAILJS] — Replace the three placeholder strings below with your
// actual EmailJS credentials from https://dashboard.emailjs.com
//
//   EMAILJS_SERVICE_ID  — e.g. "service_abc123"
//   EMAILJS_TEMPLATE_ID — e.g. "template_xyz789"
//   EMAILJS_PUBLIC_KEY  — e.g. "user_AbCdEfGhIjKlMnOp"
//
// Your EmailJS template should use these variables:
//   {{from_name}}  {{from_email}}  {{project}}  {{vehicle}}  {{brief}}
//
// Install the SDK (pick one):
//   npm install @emailjs/browser
//   OR add to your HTML <head>:
//   <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>


const EMAILJS_SERVICE_ID  = "service_56a2mli";
const EMAILJS_TEMPLATE_ID = "template_sneor7x";
const EMAILJS_PUBLIC_KEY  = "6HQXk96sV1vgg_uId";

// [EDIT: CONTACT] — address, email, phone, booking status are inside the JSX of this function.
function Contact() {
  const [form, setForm] = useState({ name: "", email: "", project: "vehicle", vehicle: "", brief: "" });
  const [status, setStatus] = useState("idle");

  React.useEffect(() => {
    const interval = setInterval(() => {
      if (window.grecaptcha && document.getElementById('recaptcha-container') && !document.getElementById('recaptcha-container').hasChildNodes()) {
        window.grecaptcha.render('recaptcha-container', {
  sitekey: '6LePdPYsAAAAAEFM2Z4UWIPLEY5vByzEe0lC0o5m',
  theme: 'dark'
});
        clearInterval(interval);
      }
    }, 500);
    return () => clearInterval(interval);
  }, []);

  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.brief) {
      setStatus("missing");
      return;
    }
    setStatus("sending");

    emailjs.send(
      EMAILJS_SERVICE_ID,
      EMAILJS_TEMPLATE_ID,
      {
        from_name:  form.name,
        from_email: form.email,
        project:    form.project,
        vehicle:    form.vehicle || "—",
        brief:      form.brief,
        to_email:   "payback.universe@gmail.com",
      },
      EMAILJS_PUBLIC_KEY
    )
      .then(() => setStatus("ok"))
      .catch(() => setStatus("error"));
  };

  return (
    <section id="contact" className="contact">
      <div className="eyebrow"><span className="num">07</span> / Make Contact <span className="line"></span></div>
      <div style={{height:32}}></div>
      <div className="row">
        <div>
          <h2>Start<br/>A Project.</h2>
          <p style={{maxWidth:"42ch",fontSize:15,lineHeight:1.65,color:"var(--fg-dim)"}}>
            Drop the vehicle, the intent and a rough timeline. We&apos;ll come back within 48 hours with three directions and an honest quote.
          </p>

          <form className="form" onSubmit={submit} style={{marginTop:32}}>
            <div className="field"><label>Name</label><input type="text" placeholder="Your full name" value={form.name} onChange={update("name")} /></div>
            <div className="field"><label>Email</label><input type="email" placeholder="you@example.com" value={form.email} onChange={update("email")} /></div>
            <div className="field">
              <label>Project</label>
              <select value={form.project} onChange={update("project")}>
                <option value="vehicle">Vehicle Graphics</option>
                <option value="apparel">Apparel / Merch</option>
                <option value="identity">Brand Identity</option>
                <option value="oem">OEM Collaboration</option>
              </select>
            </div>
            <div className="field"><label>Vehicle / Model</label><input type="text" placeholder="e.g. KTM RC 390 · Thar · or N/A" value={form.vehicle} onChange={update("vehicle")} /></div>
            <div className="field" style={{gridTemplateColumns:"140px 1fr"}}>
              <label style={{alignSelf:"stretch",padding:"14px 18px"}}>Brief</label>
           <textarea placeholder="Tell us what you're building, who it's for, and when you need it." value={form.brief} onChange={update("brief")}></textarea>
            </div>
           <div id="recaptcha-container" data-theme="dark" style={{marginTop:16}}></div>
          </form>
          <div className="submit-row">
            <div className={"form-status " + (status==="ok"?"ok":"") + (status==="error"?" error":"")}>
              {status==="idle"    && "Status — Awaiting submission"}
              {status==="missing" && "Status — Fill the required fields"}
              {status==="sending" && "Status — Transmitting…"}
              {status==="ok"      && "Status — Received. We'll reply within 48h."}
              {status==="error"   && "Status — Something went wrong. Email us directly."}
            </div>
            <button className="btn primary" onClick={submit} disabled={status==="sending" || status==="ok"}>
              <span className="dot"></span>
              {status==="sending" ? "Transmitting…" : status==="ok" ? "Sent ✓" : "Transmit Brief"}
            </button>
          </div>
        </div>

        <aside className="info-card">
          <div className="block">
            <h4>Studio</h4>
            <p>Payback International<br/>Udyog Kshetra, 4<br/>Off Mulund – Goregaon Link Road<br/>Salpa Devi Pada, Mulund West<br/>Mumbai 400080, IN</p>
             <p style={{marginTop:8}}>
  <a href="https://maps.app.goo.gl/f6JNQvbcF2QB3HPY8" target="_blank" rel="noopener">Open in Maps ↗</a>
  &nbsp;·&nbsp;
  <a href="https://maps.app.goo.gl/f6JNQvbcF2QB3HPY8" target="_blank" rel="noopener">Google Business ↗</a>
</p>
          </div>
          <div className="block">
            <h4>Direct</h4>
            <p><a href="mailto:info@payback.international">info@payback.international</a><br/><a href="tel:+910000000000">+91 — on request</a></p>
          </div>
          <div className="block">
            <h4>Press / Collabs</h4>
            <p><a href="https://www.instagram.com/payback.intl/" target="_blank" rel="noopener">@payback.intl ↗</a></p>
          </div>
          <div className="block">
            <h4>Open For</h4>
            <p style={{fontFamily:"var(--mono)",fontSize:12,letterSpacing:".14em",textTransform:"uppercase"}}>
              Vehicle Builds · OEM Briefs<br/>Creator Collabs · Race Liveries
            </p>
          </div>
          <div className="block" style={{borderTop:"1px solid var(--line)",paddingTop:20}}>
            <h4>Currently</h4>
            <p style={{display:"flex",alignItems:"center",gap:10,fontFamily:"var(--mono)",fontSize:11,letterSpacing:".18em",textTransform:"uppercase"}}>
              <span style={{width:8,height:8,background:"#7fff9d",borderRadius:"50%",boxShadow:"0 0 8px #7fff9d"}}></span>
              Booking — Q3 2026
            </p>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ---------- Footer ----------
// [EDIT: FOOTER] — link columns and legal line.
function Footer({ accent }) {
  return (
    <footer>
      <div className="row">
        <div>
          <div className="wordmark">
            <img src="media/logo-light.png" alt="Payback International" />
          </div>
          <div style={{marginTop:18,fontFamily:"var(--mono)",fontSize:10,letterSpacing:".22em",textTransform:"uppercase",color:"var(--fg-dim)",maxWidth:"36ch",lineHeight:1.8}}>
            International design studio ·UK. Dubai. Mumbai
          </div>
        </div>
        <div className="col">
          <h5>Studio</h5>
          <a href="#work">Work</a>
          <a href="#services">Services</a>
          <a href="#manifesto">The Haus</a>
          <a href="#process">Process</a>
        </div>
        <div className="col">
          <h5>Connect</h5>
          <a href="https://www.instagram.com/payback.intl/" target="_blank" rel="noopener">Instagram ↗</a>
          <a href="mailto:info@payback.international">Email</a>
          <a href="#contact">Inquiry</a>
          </div>
      </div>
      <div className="legal">
        <span>© 2026 Payback International. All Rights Reserved.</span>
      </div>
    </footer>
  );
}

// ---------- Status bar (bottom) ----------
// [EDIT: STATUS] — the live status pill at the bottom of every page.
function StatusBar({ tweaks }) {
  const [t, setT] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const fmt = t.toUTCString().slice(17, 25);
  return (
    <div className="status-bar">
      <div className="seg"><span className="dotlive"></span> Studio · Live</div>
      <div className="seg" style={{gap:24}}>
        <span>MUMBAI 30°C</span>
        <span>IST {fmt}</span>
        <span>Q3 2026</span>
        <span style={{textTransform:"uppercase"}}>ACCENT/{tweaks.accent}</span>
      </div>
      <div className="seg">@payback.intl</div>
    </div>
  );
}

// ---------- Tweaks ----------
function PaybackTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent / Brand Color">
        <TweakSelect label="Accent" value={tweaks.accent} onChange={(v)=>setTweak("accent", v)} options={[
          {value:"mono",label:"Mono (logo-true)"},
          {value:"holo",label:"Holographic"},
          {value:"red",label:"Racing Red"},
          {value:"blue",label:"Electric Blue"},
        ]} />
      </TweakSection>
      <TweakSection label="Background">
        <TweakRadio label="Tone" value={tweaks.background} onChange={(v)=>setTweak("background", v)} options={[
          {value:"jet",label:"Jet"},
          {value:"ink",label:"Ink"},
          {value:"paper",label:"Paper"},
        ]} />
      </TweakSection>
      <TweakSection label="Typography">
        <TweakSelect label="Display" value={tweaks.displayFont} onChange={(v)=>setTweak("displayFont", v)} options={[
          {value:"michroma",label:"Michroma (default)"},
          {value:"archivo",label:"Archivo Black"},
          {value:"anton",label:"Anton"},
          {value:"helv",label:"Helvetica"},
        ]} />
      </TweakSection>
      <TweakSection label="Interaction">
        <TweakToggle label="Cursor blob" value={tweaks.showCursor} onChange={(v)=>setTweak("showCursor", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}


window.__lightboxIdx = null;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lightboxIdx, setLightboxIdx] = React.useState(null);

  React.useEffect(() => {
    window.__openLightbox = (idx) => setLightboxIdx(idx);
    window.__closeLightbox = () => setLightboxIdx(null);
  }, []);

  const prev = () => setLightboxIdx((i) => (i - 1 + WORK.length) % WORK.length);
  const next = () => setLightboxIdx((i) => (i + 1) % WORK.length);
  useReveal();
  return (
    <React.Fragment>
      <ThemeBridge tweaks={tweaks} />
      <CursorBlob enabled={tweaks.showCursor} />
      {lightboxIdx !== null && (
        <Lightbox
          idx={lightboxIdx}
          onClose={() => setLightboxIdx(null)}
          onPrev={prev}
          onNext={next}
        />
  )}
      <div className="accent-bg-on-primary">
        <TopNav />
        <Hero accent={tweaks.accent} />
        <ClientTicker />
        <FeaturePlate />
        <Work onOpen={setLightboxIdx} />
        <Services />
        <Manifesto />
        <Clients />
        <Contact />
        <Footer accent={tweaks.accent} />
        <div style={{height:32}}></div>
        <StatusBar tweaks={tweaks} />
      </div>
      <PaybackTweaks tweaks={tweaks} setTweak={setTweak} />
    </React.Fragment>
  );
}

document.addEventListener('click', function(e) {
  const card = e.target.closest('.work-card');
  if (card && window.__openLightbox) {
    const cards = Array.from(document.querySelectorAll('.work-card'));
    const idx = cards.indexOf(card);
    if (idx !== -1) window.__openLightbox(idx);
  }
});

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

// WhatsApp floating button
(function() {
  const btn = document.createElement('a');
  btn.href = 'https://wa.me/919321093779?text=Hi%2C%20I%27d%20like%20to%20discuss%20a%20project%20with%20Payback%20International.';
  btn.target = '_blank';
  btn.rel = 'noopener';
  btn.style.cssText = 'position:fixed;bottom:48px;right:24px;z-index:200;width:72px;height:72px;background:#1a1a1a;border:1px solid rgba(231,229,221,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s;text-decoration:none';
 btn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24"><defs><linearGradient id="holo" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#ff7ad9"/><stop offset="25%" style="stop-color:#ffd166"/><stop offset="50%" style="stop-color:#9cffb6"/><stop offset="75%" style="stop-color:#7fd1ff"/><stop offset="100%" style="stop-color:#c89cff"/></linearGradient></defs><path fill="url(#holo)" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>';
  btn.addEventListener('mouseenter', function() { btn.style.borderColor = '#e7e5dd'; });
  btn.addEventListener('mouseleave', function() { btn.style.borderColor = 'rgba(231,229,221,0.24)'; });
  document.body.appendChild(btn);
})();

// Vanilla JS lightbox — bypasses React state issues
(function() {
  let currentIdx = 0;

  function showLightbox(idx) {
    currentIdx = idx;
    const item = WORK[idx];
    document.getElementById('vl-img').src = item.src;
    document.getElementById('vl-img').alt = item.title;
    document.getElementById('vl-title').textContent = item.title;
    document.getElementById('vl-meta').textContent = item.tag + ' · ' + item.year;
    document.getElementById('vl-count').textContent = String(idx+1).padStart(2,'0') + ' / ' + String(WORK.length).padStart(2,'0');
    document.getElementById('vl-overlay').style.display = 'flex';
    document.body.style.overflow = 'hidden';
  }

  function hideLightbox() {
    document.getElementById('vl-overlay').style.display = 'none';
    document.body.style.overflow = '';
  }

  // Create lightbox DOM
  const overlay = document.createElement('div');
  overlay.id = 'vl-overlay';
  overlay.style.cssText = 'display:none;position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:99999;align-items:center;justify-content:center;flex-direction:column';
  overlay.innerHTML = `
    <button id="vl-close" style="position:fixed;top:20px;right:20px;background:#0c0c0c;border:1px solid rgba(231,229,221,0.24);color:#e7e5dd;font-size:18px;width:48px;height:48px;cursor:pointer;z-index:100000;display:flex;align-items:center;justify-content:center">✕</button>
    <button id="vl-prev" style="position:fixed;left:20px;top:50%;transform:translateY(-50%);background:#0c0c0c;border:1px solid rgba(231,229,221,0.24);color:#e7e5dd;font-size:22px;width:52px;height:52px;cursor:pointer;z-index:100000;display:flex;align-items:center;justify-content:center">←</button>
    <img id="vl-img" style="max-width:90vw;max-height:80vh;object-fit:contain;display:block" src="" alt="" />
    <button id="vl-next" style="position:fixed;right:20px;top:50%;transform:translateY(-50%);background:#0c0c0c;border:1px solid rgba(231,229,221,0.24);color:#e7e5dd;font-size:22px;width:52px;height:52px;cursor:pointer;z-index:100000;display:flex;align-items:center;justify-content:center">→</button>
    <div style="position:fixed;bottom:0;left:0;right:0;padding:20px 32px;display:flex;align-items:center;gap:24px;border-top:1px solid rgba(231,229,221,0.10);background:rgba(7,7,7,.95)">
      <span id="vl-title" style="font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e7e5dd"></span>
      <span id="vl-meta" style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6e6c66"></span>
      <span id="vl-count" style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:#6e6c66;margin-left:auto"></span>
    </div>
  `;
  document.body.appendChild(overlay);

  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) hideLightbox();
  });
  document.getElementById('vl-close').addEventListener('click', hideLightbox);
  document.getElementById('vl-prev').addEventListener('click', function() {
    showLightbox((currentIdx - 1 + WORK.length) % WORK.length);
  });
  document.getElementById('vl-next').addEventListener('click', function() {
    showLightbox((currentIdx + 1) % WORK.length);
  });

  document.addEventListener('keydown', function(e) {
    if (document.getElementById('vl-overlay').style.display === 'flex') {
      if (e.key === 'Escape') hideLightbox();
      if (e.key === 'ArrowLeft') showLightbox((currentIdx - 1 + WORK.length) % WORK.length);
      if (e.key === 'ArrowRight') showLightbox((currentIdx + 1) % WORK.length);
    }
  });

  document.addEventListener('click', function(e) {
    const card = e.target.closest('.work-card');
    if (card) {
      const cards = Array.from(document.querySelectorAll('.work-card'));
      const idx = cards.indexOf(card);
      if (idx !== -1) showLightbox(idx);
    }
  });
})();