// ===========================================================================
// Home-page sections + About / Contact page bodies.
// Exposes window.Sections.* — consumed by app.jsx.
// ===========================================================================
(function () {
  const { useState } = React;
  const DS = window.DinaSFineArtsDesignSystem_85612a;
  const { Button, Badge, FeatureCard, TestimonialCard, Avatar, Input, Textarea, Select } = DS;
  const { Icons, Reveal, useParallax } = window;
  const { ArtCard, SectionHead } = window;
  const D = window.DINA;
  const getPaintings = () => window.DINA.artworks.filter((a) => a.category === "Paintings");
  const getPottery = () => window.DINA.artworks.filter((a) => a.category === "Pottery");
  const getHome = () => (window.DINA && window.DINA.home) || {};
  // Resolve a list of artwork IDs to artwork objects; fall back if none resolve.
  const byIds = (ids, fallback) => {
    const all = window.DINA.artworks;
    const map = {};
    all.forEach((a) => { map[a.id] = a; });
    const picked = (ids || []).map((id) => map[id]).filter(Boolean);
    return picked.length ? picked : fallback;
  };

  // ---------------------------------------------------------------- HERO ----
  function Hero({ layout, onOpen, go }) {
    const p = useParallax(0.06, 40);
    const paintings = getPaintings();
    const h = getHome();
    // Each of the 3 hero tiles is resolved POSITIONALLY: a custom uploaded photo
    // (home.heroImages[i]) wins; otherwise we show the chosen inventory piece
    // (home.heroIds[i]); otherwise a sensible default. Custom photos are not
    // products — they just display, with no click-through to a detail page.
    const all = window.DINA.artworks;
    const map = {};
    all.forEach((a) => { map[a.id] = a; });
    const heroDefaults = ["hymn-to-the-sun", "painted-door", "festival-face"];
    const fallbackArt = (i) => map[(h.heroIds || [])[i]] || map[heroDefaults[i]] || paintings[i] || paintings[0] || {};
    const customs = h.heroImages || [];
    const zooms = h.heroZoom || [];
    const positions = h.heroPos || [];
    const slot = (i) => {
      const url = customs[i];
      if (url) return { image: url, art: null, title: window.DINA.brand || "", zoom: zooms[i] || 1, pos: positions[i] || { x: 0, y: 0 } };
      const a = fallbackArt(i);
      return { image: a.image, art: a, title: a.title, zoom: 1, pos: { x: 0, y: 0 } };
    };
    const lead = slot(0);          // the large feature
    const side = [slot(1), slot(2)];

    const cta = React.createElement("div", { key: "cta", style: { display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "32px" } }, [
      React.createElement(Button, { key: "a", size: "lg", onClick: () => go("gallery") }, "Explore the work"),
      React.createElement(Button, { key: "b", size: "lg", variant: "secondary", onClick: () => go("commission") }, "Commission a piece"),
    ]);

    const heading = (cls) => React.createElement("h1", {
      key: "heading", className: "display " + cls, style: { fontSize: "clamp(44px, 6vw, var(--fs-display-xl))" },
    }, [
      React.createElement("span", { key: "t1" }, "Art made by hand, "),
      React.createElement("br", { key: "br" }),
      React.createElement("span", { key: "t2" }, "made to be "),
      React.createElement("em", { key: "em", style: { fontStyle: "normal", color: "var(--accent)" } }, "lived with"),
      React.createElement("span", { key: "t3" }, "."),
    ]);

    const sub = (cls) => React.createElement("p", { key: "sub", className: "lead " + cls, style: { marginTop: "22px", maxWidth: "30ch", color: "var(--body)" } },
      "Original paintings and hand-thrown pottery from the studio of Dina Mohamed \u2014 each piece one of one.");

    // ---- A. split (headline left, art collage right) ----
    if (layout === "split") {
      return React.createElement("header", { className: "wrap", style: { paddingTop: "72px", paddingBottom: "40px" } },
        React.createElement("div", { className: "rgrid", style: { display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: "56px", alignItems: "center" } }, [
          React.createElement("div", { key: "l" }, [
            React.createElement("p", { key: "e", className: "eyebrow hero-rise" }, "Dina Mohamed \u00b7 Painter & Ceramicist"),
            heading("hero-rise"),
            sub("hero-rise"),
            cta,
            React.createElement("div", { key: "s", className: "hero-rise", style: { display: "flex", gap: "32px", marginTop: "44px" } },
              [["1 of 1", "Every piece original"], ["2", "Disciplines, one hand"], ["Worldwide", "Shipping arranged"]].map(([n, l], i) =>
                React.createElement("div", { key: i }, [
                  React.createElement("div", { key: "n", style: { fontFamily: "var(--font-display)", fontSize: "26px", color: "var(--ink)", letterSpacing: "-0.5px" } }, n),
                  React.createElement("div", { key: "l", style: { fontSize: "13px", color: "var(--muted)", marginTop: "2px" } }, l),
                ]))),
          ]),
          React.createElement("div", { key: "r", ref: p, style: { display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "auto auto", gap: "16px" } }, [
            React.createElement(HeroTile, { key: "0", tile: lead, onOpen, span: true }),
            React.createElement(HeroTile, { key: "1", tile: side[0], onOpen }),
            React.createElement(HeroTile, { key: "2", tile: side[1], onOpen }),
          ]),
        ]));
    }

    // ---- B. centered (headline centered above a 3-up art band) ----
    if (layout === "centered") {
      return React.createElement("header", { className: "wrap", style: { paddingTop: "76px", paddingBottom: "20px", textAlign: "center" } }, [
        React.createElement("p", { key: "e", className: "eyebrow hero-rise", style: { color: "var(--accent)" } }, "Dina Mohamed \u00b7 Painter & Ceramicist"),
        React.createElement("div", { key: "h", style: { display: "flex", flexDirection: "column", alignItems: "center" } }, [heading("hero-rise"), sub("hero-rise")]),
        React.createElement("div", { key: "c", className: "hero-rise", style: { display: "flex", justifyContent: "center" } }, cta),
        React.createElement("div", { key: "band", ref: p, className: "rgrid3", style: { display: "grid", gridTemplateColumns: "1fr 1.25fr 1fr", gap: "18px", marginTop: "56px", alignItems: "center" } }, [
          React.createElement(HeroTile, { key: "0", tile: side[0], onOpen, tall: true }),
          React.createElement(HeroTile, { key: "1", tile: lead, onOpen }),
          React.createElement(HeroTile, { key: "2", tile: side[1], onOpen, tall: true }),
        ]),
      ]);
    }

    // ---- C. full-bleed (large showpiece with overlaid text) ----
    return React.createElement("header", { style: { position: "relative", minHeight: "min(86vh, 760px)", display: "flex", alignItems: "flex-end", overflow: "hidden" } }, [
      React.createElement("div", { key: "bg", ref: p, style: { position: "absolute", inset: "-8% 0", zIndex: 0 } },
        React.createElement("img", { src: lead.image, alt: lead.title, style: { width: "100%", height: "116%", objectFit: "cover" } })),
      React.createElement("div", { key: "scrim", style: { position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(180deg, rgba(20,20,18,.12) 0%, rgba(20,20,18,.20) 45%, rgba(20,20,18,.72) 100%)" } }),
      React.createElement("div", { key: "c", className: "wrap hero-rise", style: { position: "relative", zIndex: 2, paddingBottom: "64px", paddingTop: "120px", color: "#fff" } }, [
        React.createElement("p", { key: "e", className: "eyebrow", style: { color: "#fff", opacity: .85 } }, "Dina Mohamed \u00b7 Painter & Ceramicist"),
        React.createElement("h1", { key: "h", className: "display", style: { color: "#fff", fontSize: "clamp(44px, 6.5vw, 76px)", maxWidth: "16ch" } },
          [React.createElement("span", { key: "t1" }, "Art made by hand, made to be "), React.createElement("em", { key: "e", style: { fontStyle: "normal", color: "var(--accent)", filter: "brightness(1.25)" } }, "lived with"), React.createElement("span", { key: "t2" }, ".")]),
        React.createElement("p", { key: "s", className: "lead", style: { color: "rgba(255,255,255,.9)", marginTop: "18px", maxWidth: "44ch" } },
          "Original paintings and hand-thrown pottery \u2014 each piece one of one."),
        React.createElement("div", { key: "cta", style: { display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "30px" } }, [
          React.createElement(Button, { key: "a", size: "lg", variant: "onColor", onClick: () => go("gallery") }, "Explore the work"),
          React.createElement(Button, { key: "b", size: "lg", variant: "onColor", style: { background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,.55)" }, onClick: () => go("commission") }, "Commission a piece"),
        ]),
      ]),
    ]);
  }

  function HeroTile({ tile, onOpen, span, tall }) {
    const t = tile || {};
    const baseStyle = {
      padding: 0, border: "1px solid var(--hairline)", overflow: "hidden",
      borderRadius: "var(--radius-xl)", gridColumn: span ? "1 / -1" : "auto",
      aspectRatio: span ? "16 / 10" : (tall ? "3 / 4" : "1 / 1"), background: "var(--surface-strong)",
    };
    // Custom uploaded photos show in full (contain) so nothing gets cropped, and
    // are scaled + repositioned by the per-photo settings from the admin; curated
    // inventory pieces fill the tile (cover).
    const fit = t.art ? "cover" : "contain";
    const z = t.zoom || 1;
    const px = (t.pos && t.pos.x) || 0;
    const py = (t.pos && t.pos.y) || 0;
    const xform = (z === 1 && px === 0 && py === 0) ? "none" : "translate(" + px + "%, " + py + "%) scale(" + z + ")";
    const media = React.createElement("div", { className: "artcard__media", style: { width: "100%", height: "100%" } },
      React.createElement("img", { src: t.image, alt: t.title || "", loading: "lazy", style: { width: "100%", height: "100%", objectFit: fit, transform: xform, transformOrigin: "center" } }));
    // A custom photo (no linked piece) just displays — not clickable, not a product.
    if (!t.art) {
      return React.createElement("div", { className: "artcard", style: { ...baseStyle, cursor: "default" } }, media);
    }
    return React.createElement("button", {
      onClick: () => onOpen(t.art), className: "artcard", style: { ...baseStyle, cursor: "pointer" },
    }, media);
  }

  // -------------------------------------------------------- FEATURED WORK ----
  function FeaturedWork({ onOpen, onInquire, go }) {
    const paintings = getPaintings();
    const feat = byIds(getHome().featuredIds, [paintings[0], paintings[1], paintings[3]].filter(Boolean));
    return React.createElement("section", { className: "wrap band" }, [
      React.createElement(Reveal, { key: "head" },
        React.createElement(SectionHead, {
          eyebrow: "Selected works", title: "Paintings from the studio",
          sub: "Symbol, surface and slow colour \u2014 hieroglyph, calligraphy and folk geometry, layered by hand.",
          action: "See the full gallery", onAction: () => go("gallery"),
        })),
      React.createElement("div", { key: "grid", className: "home-row cols-3" },
        feat.map((a, i) => React.createElement(ArtCard, { key: a.id, art: a, onOpen, onInquire, delay: (i % 3) * 90 }))),
    ]);
  }

  // ----------------------------------------------------------- COLLECTIONS ----
  function Collections({ go }) {
    return React.createElement("section", { className: "wrap band" }, [
      React.createElement(Reveal, { key: "h" }, React.createElement(SectionHead, { eyebrow: "Bodies of work", title: "Three threads", align: "left" })),
      React.createElement("div", { key: "g", className: "grid grid-3" },
        D.collections.map((c, i) => React.createElement(Reveal, { key: c.id, variant: "scale", delay: i * 100 },
          React.createElement(FeatureCard, {
            tone: c.tone, eyebrow: "Collection", title: c.title, body: c.blurb,
            action: React.createElement(Button, {
              variant: c.tone === "ochre" ? "primary" : "onColor", size: "sm",
              onClick: () => go("gallery", c.filter),
            }, "View " + (c.filter === "Pottery" ? "the clay" : "the work")),
            style: { height: "100%", minHeight: "260px" },
          })))),
    ]);
  }

  // ------------------------------------------------------- COMMISSION BAND ----
  function CommissionBand({ onCommission }) {
    const p = useParallax(0.05, 30);
    const pottery = getPottery();
    return React.createElement("section", { className: "band", style: { paddingBottom: "96px" } },
      React.createElement("div", { className: "wrap" },
        React.createElement(Reveal, { variant: "scale" },
          React.createElement("div", {
            className: "rgrid-comm",
            style: {
              position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl)",
              background: "var(--teal)", color: "#fff", display: "grid",
              gridTemplateColumns: "1.1fr .9fr", alignItems: "center", minHeight: "360px",
            },
          }, [
            React.createElement("div", { key: "t", style: { padding: "clamp(36px,5vw,64px)" } }, [
              React.createElement("p", { key: "e", className: "eyebrow", style: { color: "var(--mint)" } }, "Commissions"),
              React.createElement("h2", { key: "h", className: "display", style: { color: "#fff", fontSize: "var(--fs-display-md)", maxWidth: "16ch" } }, "Bring a piece to life for your space"),
              React.createElement("p", { key: "b", className: "lead", style: { color: "rgba(255,255,255,.86)", marginTop: "16px", maxWidth: "42ch" } }, "Tell me your room, your light and your palette \u2014 and I\u2019ll make something that belongs there. Paintings or a set of vessels, start to finish in the studio."),
              React.createElement("div", { key: "c", style: { marginTop: "28px" } }, React.createElement(Button, { variant: "onColor", size: "lg", onClick: onCommission }, "Start a commission")),
            ]),
            React.createElement("div", { key: "img", ref: p, style: { position: "relative", alignSelf: "stretch", overflow: "hidden" } },
              React.createElement("img", { src: ((pottery[3] || pottery[0] || {}).image), alt: "Commissioned vessel", style: { position: "absolute", inset: "-8% 0", width: "100%", height: "116%", objectFit: "cover" } })),
          ]))));
  }

  // -------------------------------------------------------- POTTERY STRIP ----
  function PotteryStrip({ onOpen, onInquire, go }) {
    const pottery = getPottery();
    const show = byIds(getHome().potteryIds, pottery.slice(0, 8));
    return React.createElement("section", { className: "band", style: { background: "var(--surface-soft)", paddingTop: "0" } },
      React.createElement("div", { className: "wrap", style: { paddingTop: "96px", paddingBottom: "96px" } }, [
        React.createElement(Reveal, { key: "h" }, React.createElement(SectionHead, {
          eyebrow: "The clay studio", title: "Hand-thrown pottery",
          sub: "Small batches of stoneware \u2014 glazed, fired and finished by hand, made to be used every day.",
          action: "Shop the pottery", onAction: () => go("gallery", "Pottery"),
        })),
        React.createElement("div", { key: "g", className: "home-row" },
          show.map((a, i) => React.createElement(ArtCard, { key: a.id, art: a, onOpen, onInquire, delay: (i % 4) * 80 }))),
      ]));
  }

  // --------------------------------------------------------- ABOUT TEASER ----
  function AboutTeaser({ go }) {
    const pottery = getPottery();
    const h = getHome();
    const aboutArt = byIds([h.aboutId], [pottery.find((x) => x.id === "studio-cat") || pottery[0]].filter(Boolean))[0] || {};
    const studioImg = h.aboutImage || aboutArt.image;
    return React.createElement("section", { className: "wrap band", style: { paddingBottom: "96px" } },
      React.createElement("div", { className: "rgrid", style: { display: "grid", gridTemplateColumns: ".9fr 1.1fr", gap: "56px", alignItems: "center" } }, [
        React.createElement(Reveal, { key: "img", variant: "scale" },
          React.createElement("div", { style: { borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4/5", background: "var(--surface-strong)" } },
            React.createElement("img", { src: studioImg, alt: "In the studio", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }))),
        React.createElement(Reveal, { key: "t", delay: 80 }, React.createElement("div", null, [
          React.createElement("p", { key: "e", className: "eyebrow" }, "The studio"),
          React.createElement("h2", { key: "h", className: "display", style: { fontSize: "var(--fs-display-md)" } }, D.about.lead),
          React.createElement("p", { key: "b", className: "lead", style: { color: "var(--body)", marginTop: "18px" } }, D.about.body[0]),
          React.createElement("p", { key: "b2", className: "lead", style: { color: "var(--muted)", marginTop: "14px", fontSize: "var(--fs-body-md)" } }, D.about.body[2]),
          React.createElement("div", { key: "c", style: { marginTop: "26px" } }, React.createElement(Button, { variant: "secondary", size: "lg", onClick: () => go("about") }, "More about Dina")),
        ])),
      ]));
  }

  // ---------------------------------------------------------- TESTIMONIALS ----
  function Testimonials() {
    return React.createElement("section", { className: "band", style: { background: "var(--surface-soft)", paddingTop: "0" } },
      React.createElement("div", { className: "wrap", style: { paddingTop: "96px", paddingBottom: "96px" } }, [
        React.createElement(Reveal, { key: "h" }, React.createElement(SectionHead, { eyebrow: "From collectors", title: "Lived with, every day", align: "center" })),
        React.createElement("div", { key: "g", className: "grid grid-3" },
          D.testimonials.map((t, i) => React.createElement(Reveal, { key: i, variant: "scale", delay: i * 100 },
            React.createElement(TestimonialCard, { quote: t.quote, name: t.name, role: t.role })))),
      ]));
  }

  window.Sections = { Hero, FeaturedWork, Collections, CommissionBand, PotteryStrip, AboutTeaser, Testimonials };
})();