// sections.jsx — About, Branding, Banners, Creatives, Moodboard, Closing

function About() {
  return (
    <section className="about" id="about" data-screen-label="02 About">
      <div className="container">
        <div className="eyebrow reveal">About</div>
        <div className="about-grid" style={{ marginTop: 40 }}>
          <div>
            <WordsReveal as="p" className="large">
              Pixel pusher. Brand whisperer. Tiny bit of a perfectionist.
            </WordsReveal>
            <p className="large reveal" style={{ marginTop: 18, color: "var(--muted)" }}>
              Brands come in confused. They leave looking <em>iconic.</em>
            </p>
          </div>
          <div className="reveal">
            <p style={{ color: "var(--muted)", fontSize: 16, marginBottom: 28 }}>
              I rearrange pixels until they behave. Six years deep in branding, posters,
              packaging and the kind of social work that actually makes people stop scrolling.
              I also edit reels — but more on that later.
            </p>
            <div className="chips">
              <span className="chip accent" data-cursor="">Branding</span>
              <span className="chip">Logo &amp; Identity</span>
              <span className="chip">Packaging</span>
              <span className="chip">Posters &amp; Print</span>
              <span className="chip">Social Creative</span>
              <span className="chip">Ad Campaigns</span>
              <span className="chip">Moodboarding</span>
              <span className="chip">Reels &amp; Motion</span>
              <span className="chip">Art Direction</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Branding (editorial 1-up reveals) ----- */
const BRANDING = [
  { img: "assets/branding/branding-1.png", num: "01 / Identity", title: "Hot enough to be a heatmap.", body: "Identity work that doesn't ask for permission. Logos, marks, and the supporting cast that holds a brand together." },
  { img: "assets/branding/branding-2.png", num: "02 / System", title: "Rules. Mostly.", body: "Type, color, grids, components — the unsexy spine that makes everything else look effortless." },
  { img: "assets/branding/branding-3.png", num: "03 / Voice", title: "Looks like a brand. Sounds like a person.", body: "Brand books, mnemonics, tone notes — the bits that decide whether your brand has a personality or a personality crisis." },
];

function Branding() {
  return (
    <section className="branding" id="work" data-screen-label="03 Branding">
      <div className="container">
        <div className="sec-head">
          <div className="lead">
            <div className="eyebrow reveal">Work / 01 — Branding</div>
            <WordsReveal as="h2" className="reveal" delay={100}>Brands, but make them iconic.</WordsReveal>
            <p className="reveal">Identity systems for clients who'd rather not be forgotten.</p>
          </div>
          <span className="mono reveal" style={{ color: "var(--muted)" }}>03 projects</span>
        </div>
        {BRANDING.map((b, i) => (
          <div className={`branding-row reveal ${i % 2 ? "alt" : ""}`} key={i}>
            <div className="copy">
              <span className="num">{b.num}</span>
              <h3>{b.title}</h3>
              <p style={{ marginTop: 14 }}>{b.body}</p>
            </div>
            <div className="image-frame" data-cursor="view"
                 data-lb={b.img} data-lb-type="image" data-lb-caption={b.title}>
              <span className="tag">{`/ ${String(i + 1).padStart(2, "0")}`}</span>
              <img src={b.img} alt={b.title} loading="lazy" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ----- Banners (cinematic 16:9 stacked) ----- */
const BANNERS = [
  { img: "assets/banners/banner-1.jpg", label: "Banner 01 — Campaign hero" },
  { img: "assets/banners/banner-2.jpg", label: "Banner 02 — Festive lead" },
  { img: "assets/banners/banner-3.jpg", label: "Banner 03 — Product reveal" },
  { img: "assets/banners/banner-4.jpg", label: "Banner 04 — Launch frame" },
];

function Banners() {
  return (
    <section className="banners" id="banners" data-screen-label="04 Banners">
      <div className="container">
        <div className="sec-head">
          <div className="lead">
            <div className="eyebrow reveal">Work / 02 — Banners</div>
            <WordsReveal as="h2" className="reveal" delay={100}>Cinema, but cropped.</WordsReveal>
            <p className="reveal" style={{ color: "rgba(243,239,230,0.65)" }}>
              Web banners and hero frames that have a personality at every aspect ratio.
            </p>
          </div>
          <span className="mono reveal" style={{ color: "rgba(243,239,230,0.6)" }}>04 frames</span>
        </div>
        <div className="banner-stack">
          {BANNERS.map((b, i) => (
            <div className="banner reveal" key={i} data-cursor="view"
                 data-lb={b.img} data-lb-type="image" data-lb-caption={b.label}>
              <img src={b.img} alt={b.label} loading="lazy" />
              <div className="b-label">
                <span>{b.label}</span>
                <span>16 : 9</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Creatives (bento) ----- */
const CREATIVES = [
  { src: "assets/creatives/c-art1.jpg",   span: "col-span-6 row-span-5", label: "Hero" },
  { src: "assets/creatives/c-jumpsuit.mp4", span: "col-span-3 row-span-5", label: "Motion", video: true },
  { src: "assets/creatives/c-art2.jpg",   span: "col-span-3 row-span-3", label: "Print" },
  { src: "assets/creatives/c-art3.jpg",   span: "col-span-3 row-span-3", label: "Festive" },
  { src: "assets/creatives/c-striped.mp4",span: "col-span-3 row-span-4", label: "Motion", video: true },
  { src: "assets/creatives/c-art4.jpg",   span: "col-span-3 row-span-4", label: "Campaign" },
  { src: "assets/creatives/c-art5.jpg",   span: "col-span-3 row-span-4", label: "Print" },
  { src: "assets/creatives/c-mahalaya.jpg", span: "col-span-3 row-span-3", label: "Festive" },
  { src: "assets/creatives/c-lokkhi.jpg",  span: "col-span-3 row-span-3", label: "Festive" },
  { src: "assets/creatives/c-art8.jpg",    span: "col-span-3 row-span-3", label: "Editorial" },
  { src: "assets/creatives/c-puja-wish.jpg", span: "col-span-3 row-span-3", label: "Greeting" },
  { src: "assets/creatives/c-ora.jpg",     span: "col-span-6 row-span-4", label: "Ad set" },
  { src: "assets/creatives/c-art2a.jpg",   span: "col-span-3 row-span-4", label: "Series" },
  { src: "assets/creatives/c-ads1.jpg",    span: "col-span-3 row-span-4", label: "Ads" },
  { src: "assets/creatives/c1.png",        span: "col-span-4 row-span-3", label: "Poster" },
  { src: "assets/creatives/c2.jpg",        span: "col-span-4 row-span-3", label: "Editorial" },
  { src: "assets/creatives/c2.png",        span: "col-span-4 row-span-3", label: "Editorial" },
  { src: "assets/creatives/c-moodbroad.jpg", span: "col-span-6 row-span-4", label: "Direction" },
];

function spanStyle(spanStr) {
  // map "col-span-6 row-span-4" to inline gridColumn / gridRow span
  const m = { gridColumn: "span 4", gridRow: "span 3" };
  const cs = /col-span-(\d+)/.exec(spanStr); if (cs) m.gridColumn = `span ${cs[1]}`;
  const rs = /row-span-(\d+)/.exec(spanStr); if (rs) m.gridRow = `span ${rs[1]}`;
  return m;
}

function Creatives() {
  return (
    <section className="creatives" id="campaigns" data-screen-label="05 Creatives">
      <div className="container">
        <div className="sec-head">
          <div className="lead">
            <div className="eyebrow reveal">Work / 03 — Creatives for ad campaigns</div>
            <WordsReveal as="h2" className="reveal" delay={100}>Stop-scroll on demand.</WordsReveal>
            <p className="reveal">Campaign creative — print, performance, festive, the works.</p>
          </div>
          <span className="mono reveal" style={{ color: "var(--muted)" }}>{CREATIVES.length} pieces &middot; 2 motion</span>
        </div>
        <div className="bento reveal">
          {CREATIVES.map((c, i) => (
            <div className="bento-item" key={i} style={spanStyle(c.span)}
                 data-cursor={c.video ? "play" : "view"}
                 data-lb={c.src} data-lb-type={c.video ? "video" : "image"}
                 data-lb-caption={c.label}>
              {c.video ? (
                <video src={c.src} muted loop playsInline autoPlay preload="auto" />
              ) : (
                <img src={c.src} alt={c.label} loading="lazy" />
              )}
              <span className="badge">{c.label}</span>
              {c.video && <span className="play">▶ Motion</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Moodboard (corkboard) ----- */
const MOODBOARDS = [
  { src: "assets/moodboard/m1.jpg",  cap: "Brand · warm editorial" },
  { src: "assets/moodboard/m2.jpg",  cap: "Festive · golden hour" },
  { src: "assets/moodboard/m3.jpg",  cap: "Festive · ritual" },
  { src: "assets/moodboard/m4.jpg",  cap: "Editorial · soft" },
  { src: "assets/moodboard/m5.jpg",  cap: "Brand · still life" },
  { src: "assets/moodboard/m6.jpg",  cap: "Direction · type-first" },
  { src: "assets/moodboard/m7.jpg",  cap: "Direction · palette" },
  { src: "assets/moodboard/m8.jpg",  cap: "Mother's Day · tender" },
  { src: "assets/moodboard/m9.jpg",  cap: "Brand refresh · new" },
  { src: "assets/moodboard/m10.jpg", cap: "Nirmala · texture study" },
  { src: "assets/moodboard/m11.jpg", cap: "Recent · feed reference" },
];

function Moodboard() {
  // Deterministic but visually scattered positions
  const positions = [
    { left: "3%",  top: "2%",   rot: -4,  z: 3 },
    { left: "22%", top: "10%",  rot: 3,   z: 5 },
    { left: "44%", top: "1%",   rot: -2,  z: 4 },
    { left: "65%", top: "8%",   rot: 5,   z: 2 },
    { left: "82%", top: "3%",   rot: -3,  z: 3 },
    { left: "8%",  top: "32%",  rot: 4,   z: 6 },
    { left: "30%", top: "38%",  rot: -5,  z: 4 },
    { left: "55%", top: "35%",  rot: 2,   z: 5 },
    { left: "78%", top: "40%",  rot: -4,  z: 3 },
    { left: "18%", top: "62%",  rot: 3,   z: 4 },
    { left: "48%", top: "65%",  rot: -3,  z: 6 },
  ];
  return (
    <section id="moodboards" data-screen-label="06 Moodboards">
      <div className="container">
        <div className="sec-head">
          <div className="lead">
            <div className="eyebrow reveal">Work / 04 — Moodboards</div>
            <WordsReveal as="h2" className="reveal" delay={100}>Vibes, pinned.</WordsReveal>
            <p className="reveal">The bit clients sign off on before things get expensive.</p>
          </div>
          <span className="mono reveal" style={{ color: "var(--muted)" }}>{MOODBOARDS.length} boards</span>
        </div>

        <div className="moodboard-stage reveal">
          {MOODBOARDS.map((m, i) => {
            const p = positions[i % positions.length];
            return (
              <div className="pin-card" key={i}
                   style={{
                     left: p.left, top: p.top,
                     transform: `rotate(${p.rot}deg)`,
                     zIndex: p.z,
                     "--r": `${p.rot}deg`,
                   }}
                   data-cursor="lift"
                   data-lb={m.src} data-lb-type="image" data-lb-caption={m.cap}>
                <span className="pin"></span>
                <img src={m.src} alt={m.cap} loading="lazy" />
                <div className="cap">{m.cap}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.About = About;
window.Branding = Branding;
window.Banners = Banners;
window.Creatives = Creatives;
window.Moodboard = Moodboard;