// ============== HOME (landing) ==============
function HomeScreen({ navigate }) {
  return (
    <main data-screen-label="Home (landing)">
      {/* ----- HERO · full-bleed 16:9 ----- */}
      <section className="hero-full" data-screen-label="Hero">
        <img
          className="hero-full-img"
          src="assets/hero-desert.png"
          alt="Sage abaya in motion across the dunes — DAMA Edition 014" />

        <div className="hero-full-overlay">
          <span className="hero-full-eyebrow">DAMA · {HERO.eyebrow}</span>
        </div>
      </section>

      {/* ----- COLLECTION · categories + subcategories ----- */}
      <section className="container" id="collection" data-screen-label="Collection">
        <div className="collection">
          <div className="collection-head">
            <div className="eyebrow-label">The collection</div>
            <h2 className="collection-title">
              Two formats,<br />
              <em>six fabrics.</em>
            </h2>
            <p className="collection-lead">
              DAMA arrives in two formats — Pashmina, and the Squared hijab. Each format,
              three fabrics. Every fabric, twelve daylight-graded colours.
            </p>
          </div>

          {CATEGORIES.map((cat, idx) =>
          <div className="cat-block" key={cat.id} data-screen-label={`Category · ${cat.title}`}>
              <div className={"cat-feature " + (idx % 2 === 1 ? "reverse" : "")}>
                <div className="cat-feature-image">
                  {cat.image ? (
                    <img
                      className="cat-feature-photo"
                      src={cat.image}
                      alt={cat.title + " — " + cat.tagline} />
                  ) : (
                    <Placeholder
                    color={cat.heroColor}
                    label={cat.title}
                    caption={cat.tagline}
                    style={{ height: "100%" }} />
                  )}
                </div>
                <div className="cat-feature-text">
                  <div className="eyebrow-label">Category · {String(idx + 1).padStart(2, "0")}</div>
                  <h3 className="cat-feature-title">{cat.title}</h3>
                  <p className="cat-feature-desc">{cat.description}</p>
                  <div className="cat-feature-tag">{cat.tagline}</div>
                </div>
              </div>

              <div className="sub-row">
                {cat.subs.map((subKey) => {
                const sub = SUBCATEGORIES[subKey];
                return (
                  <button
                    className="sub-card"
                    key={subKey}
                    onClick={() => navigate("product", subKey)}>
                      <div className="sub-card-frame">
                        {sub.image ? (
                          <img className="sub-card-photo" src={sub.image} alt={cat.title + " — " + sub.title} />
                        ) : (
                          <Placeholder
                          color={sub.palette[2]}
                          label={sub.title}
                          caption={`${PRODUCT_LOOKS[subKey].length} looks`} />
                        )}
                      </div>
                      <div className="sub-card-body">
                        <div className="sub-card-kicker">{cat.title}</div>
                        <div className="sub-card-title">{sub.title}</div>
                        <div className="sub-card-foot">
                          <span>{PRODUCT_LOOKS[subKey].length} looks</span>
                          <span className="link-tick">View <ArrowRight size={12} /></span>
                        </div>
                      </div>
                    </button>);

              })}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* ----- PRESS QUOTE ----- */}
      <section className="container" data-screen-label="Press quote">
        <hr className="rule" />
        <div className="press-quote">
          <div>
            <div className="stars">★ ★ ★ ★ ★</div>
          </div>
          <div>
            <blockquote>
              Quiet Luxury. Responsible by Choice.
            </blockquote>
            <cite>DAMA INDONESIA · 2026</cite>
          </div>
        </div>
      </section>

      {/* ----- STOCKISTS ----- */}
      <section className="container" id="stockists" data-screen-label="Stockists">
        <hr className="rule" />
        <div className="stockists">
          <div className="eyebrow-label">CONTACT US</div>
          <div className="stockists-grid">
            {STOCKISTS.map((s) =>
            <div className="stockist" key={s.city}>
                <h4>{s.city}</h4>
                {s.lines.map((l) => <div className="line" key={l}>{l}</div>)}
                <div className="tag">{s.tag}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      <Newsletter />
    </main>);

}

// ============== PRODUCT (Subcategory) PAGE ==============
function ProductScreen({ subKey, navigate }) {
  const sub = SUBCATEGORIES[subKey];
  const cat = CATEGORIES.find((c) => c.id === sub.category);
  const looks = PRODUCT_LOOKS[subKey];
  const siblings = cat.subs.filter((s) => s !== subKey);

  return (
    <main className="lookbook-page" data-screen-label={`Product · ${cat.title} · ${sub.title}`}>
      <div className="container">
        {/* breadcrumb */}
        <nav className="breadcrumb" aria-label="Breadcrumb">
          <button onClick={() => navigate("home")}>Home</button>
          <span className="sep">/</span>
          <button onClick={() => navigate("home", "collection")}>{cat.title}</button>
          <span className="sep">/</span>
          <span className="current">{sub.title}</span>
        </nav>

        <div className="lookbook-shell">
          {/* side tabs — sibling subcategories within this category */}
          <div className="season-tabs" role="tablist" aria-label="Subcategory">
            {cat.subs.map((s) => {
              const meta = SUBCATEGORIES[s];
              return (
                <button
                  key={s}
                  role="tab"
                  aria-selected={s === subKey}
                  className={s === subKey ? "active" : ""}
                  onClick={() => navigate("product", s)}>
                  {cat.title} — {meta.title}
                </button>);

            })}
          </div>

          <div className="lookbook-content">
            <div className="lookbook-head">{sub.eyebrow}</div>

            <div className="lookbook-hero">
              <h1>{sub.pageTitle}</h1>
              <div className="meta">
                <p className="meta-lead">{sub.description}</p>
                {sub.meta.map((r) =>
                <div className="row" key={r.k}>
                    <div className="k">{r.k}</div>
                    <div className="v">{r.v}</div>
                  </div>
                )}
              </div>
            </div>

            <div className="look-grid look-grid-3">
              {looks.map((l) =>
              <article className="look-card" key={l.n}>
                  <div className="frame">
                    <LookCarousel look={l} />
                  </div>
                  <div className="body">
                    <div className="title">{l.label} {l.n} — {l.name}</div>
                    <div className="foot">
                      <span>{l.cat}</span>
                      <span className="price-inline">{l.price}</span>
                    </div>
                  </div>
                </article>
              )}
            </div>

            {/* cross-sell: other subcategories within the same category */}
            <div className="cross-sell">
              <div className="eyebrow-label">Also in {cat.title}</div>
              <div className="cross-sell-row">
                {siblings.map((s) => {
                  const meta = SUBCATEGORIES[s];
                  return (
                    <button className="sub-card" key={s} onClick={() => navigate("product", s)}>
                      <div className="sub-card-frame">
                        {meta.image ? (
                          <img className="sub-card-photo" src={meta.image} alt={cat.title + " — " + meta.title} />
                        ) : (
                          <Placeholder color={meta.palette[3]} label={meta.title} caption={`${PRODUCT_LOOKS[s].length} looks`} />
                        )}
                      </div>
                      <div className="sub-card-body">
                        <div className="sub-card-kicker">{cat.title}</div>
                        <div className="sub-card-title">{meta.title}</div>
                        <div className="sub-card-foot">
                          <span>{PRODUCT_LOOKS[s].length} looks</span>
                          <span className="link-tick">View <ArrowRight size={12} /></span>
                        </div>
                      </div>
                    </button>);

                })}
              </div>
            </div>
          </div>
        </div>
      </div>

      <Newsletter />
    </main>);

}

// ============== LOOKBOOK (legacy editorial route, kept for footer link) ==============
function LookbookScreen() {
  const [season, setSeason] = React.useState("ss26");
  const meta = SEASON_META[season];
  const looks = LOOKS[season];

  return (
    <main className="lookbook-page" data-screen-label="Lookbook">
      <div className="container">
        <div className="lookbook-shell">
          <div className="season-tabs" role="tablist" aria-label="Seasons">
            {SEASONS.map((s) =>
            <button
              key={s.id}
              role="tab"
              aria-selected={season === s.id}
              className={season === s.id ? "active" : ""}
              onClick={() => setSeason(s.id)}>
                {s.label}
              </button>
            )}
          </div>

          <div className="lookbook-content">
            <div className="lookbook-head">{meta.eyebrow}</div>

            <div className="lookbook-hero">
              <h1>{meta.title}</h1>
              <div className="meta">
                {meta.meta.map((r) =>
                <div className="row" key={r.k}>
                    <div className="k">{r.k}</div>
                    <div className="v">{r.v}</div>
                  </div>
                )}
              </div>
            </div>

            <div className="look-grid">
              {looks.map((l) =>
              <article className="look-card" key={l.n}>
                  <div className="frame">
                    <LookCarousel look={l} />
                  </div>
                  <div className="body">
                    <div className="title">{l.label} {l.n} — {l.name}</div>
                    <p className="desc">{l.desc}</p>
                    <div className="foot">
                      <span>{l.cat}</span>
                      <span>{l.fabric}</span>
                    </div>
                  </div>
                </article>
              )}
            </div>
          </div>
        </div>
      </div>

      <Newsletter />
    </main>);

}

// ============== ABOUT US ==============
function AboutScreen({ navigate }) {
  return (
    <main data-screen-label="About Us">
      {/* Hero banner */}
      <section className="about-hero-banner" data-screen-label="About Hero">
        <video
          className="about-hero-img"
          src="assets/about-hero-video.mp4"
          autoPlay
          loop
          muted
          playsInline />
        <div className="about-hero-overlay">
          <span className="hero-full-eyebrow">About DAMA · Since 2018</span>
        </div>
      </section>

      {/* Main content */}
      <section className="container" id="atelier" data-screen-label="About content">
        <div className="atelier">
          <div className="atelier-text">
            <div className="eyebrow-label">{ATELIER.eyebrow}</div>
            <h2 className="atelier-headline">{ATELIER.headline}</h2>
            {ATELIER.body.map((p, i) => <p key={i}>{p.split("\n").map((line, j) => <React.Fragment key={j}>{j > 0 && <br />}{line}</React.Fragment>)}</p>)}
            <div className="atelier-stats">
              {ATELIER.stats.map((s, i) => (
                <div className="stat" key={i}>
                  <div className="num">{s.num}</div>
                  <div className="label">{s.label}</div>
                </div>
              ))}
            </div>
            <button className="link-arrow" style={{ marginTop: "40px" }} onClick={() => navigate("home", "collection")}>
              Explore the collection <ArrowRight size={14} />
            </button>
          </div>

          <div className="atelier-image">
            <img
              className="atelier-photo"
              src="assets/about-craft.png"
              alt="Hand-cutting featherweight voal with vintage shears, dried florals in the frame" />
            <span className="ph-caption">Studio DAMA, Kemang · Jakarta Selatan</span>
          </div>
        </div>
      </section>

      <Newsletter />
    </main>
  );
}

Object.assign(window, { HomeScreen, LookbookScreen, ProductScreen, AboutScreen });