/* global React, Header, Footer, Placeholder, UntitledEmbed, useRoute, I, useToast, PRESS, CLIENTS, SERVICES, CATALOG, MEDIA */
const { useState, useEffect, useRef } = React;

/* Helper: render a Placeholder from a MEDIA-manifest slot.            */
function MediaSlot({ slot, code, style, className, label }) {
  if (!slot || !slot.file) {
    return <Placeholder label={label || "image"} code={code} style={style} className={className} />;
  }
  const props = { label: label || slot.role, code, style, className };
  if (slot.kind === "video") return <Placeholder {...props} video={slot.file} poster={slot.poster} />;
  return <Placeholder {...props} src={slot.file} />;
}

function Home() {
  const { goto } = useRoute();
  const featured = CATALOG.slice(0, 3);
  const M = window.MEDIA.home;
  // Pulls media for each service card directly by SERVICES key (photography / video / web).
  const serviceSlots = M.services;
  return (
    <main className="fade">
      {/* HERO */}
      <section className="hero">
        <div className="hero-img">
          <MediaSlot slot={M.hero} code="EV-HERO-01" label="hero · studio" style={{ width: "100%", height: "100%", border: 0 }} />
        </div>
        <div className="hero-vignette" />
        <div className="hero-grain" />
        <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 56, paddingBottom: 48 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span className="eyebrow eyebrow-gold">Vol. XI · MMXXVI</span>
            <span style={{ width: 36, height: 1, background: "var(--gold)" }} />
            <span className="eyebrow">A studio of image, sound & craft</span>
          </div>
          <div className="fade-up" style={{ animationDelay: "120ms" }}>
            <h1 className="display" style={{ margin: 0, maxWidth: 1180 }}>
              Brands worth <em>looking at</em><br/>twice.
            </h1>
            <p className="pretty" style={{ marginTop: 28, maxWidth: 540, color: "var(--text-1)", fontSize: 17, lineHeight: 1.55 }}>
              Eleven Views is a boutique design studio working across photography, film, web, and small-batch goods.
              We build remotely as a team and travel for the shoot, quietly making work that earns a second look.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn btn-gold btn-lg" onClick={() => goto("booking")}>Book the studio <I name="arrow" size={16} /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => goto("store")}>Browse the store</button>
            </div>
          </div>
        </div>
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 24, display: "flex", justifyContent: "center", pointerEvents: "none" }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--text-2)", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 24, height: 1, background: "var(--text-3)" }} /> Scroll <span style={{ width: 24, height: 1, background: "var(--text-3)" }} />
          </div>
        </div>
      </section>

      {/* DOORS, four houses (Studio · Intelligence · Goods · Network) */}
      <section className="studio-index">
        <div className="container">
          <div className="studio-index-row">
            <div className="studio-index-mast">
              <span className="mono studio-index-mast-num">§ Doors</span>
              <div>
                <div className="mono studio-index-mast-label">Four ways</div>
                <div className="serif-it studio-index-mast-sub">to work with us, choose the door that fits your project.</div>
              </div>
            </div>
            <ul className="studio-index-tiles">
              {[
                { num: "01", label: "Studio",       val: "Image · film · web, one team",       to: ["services"] },
                { num: "02", label: "Intelligence", val: "Tools the studio uses, and you can",  to: ["intelligence"] },
                { num: "03", label: "Goods",        val: "Editions, music, objects",            to: ["store"] },
                { num: "04", label: "Network",      val: "The portal, press, the people",       to: ["portal"] },
              ].map((t) => (
                <li key={t.num}>
                  <a onClick={() => goto(...t.to)} className="studio-index-tile">
                    <span className="mono studio-index-tile-num">{t.num}</span>
                    <span className="serif studio-index-tile-label">{t.label}</span>
                    <span className="mono studio-index-tile-val">{t.val}</span>
                    <I name="arrow" size={13} stroke="currentColor" className="studio-index-tile-arrow" />
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 56 }}>
            <div>
              <span className="eyebrow eyebrow-gold">§ Practice</span>
              <h2 className="serif balance" style={{ fontSize: "clamp(38px, 4.6vw, 64px)", lineHeight: 1.02, margin: "16px 0 0" }}>
                A studio without walls.<br/>Three crafts, one practice.
              </h2>
            </div>
            <p className="pretty" style={{ color: "var(--text-1)", fontSize: 16, maxWidth: 520, justifySelf: "end" }}>
              A boutique studio led by Simeon Reid, working across image, film, and web. We design and build remote-first, and bring a trusted bench of crew to your location for capture. One operator on the work, start to finish. No agency overhead.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {Object.values(SERVICES).map((s, i) => (
              <article key={s.key} onClick={() => goto("service", { key: s.key })}
                style={{ cursor: "pointer", border: "1px solid var(--border)", padding: 28, borderRadius: 12, background: "linear-gradient(180deg, #0e0e0e, #0a0a0a)", display: "flex", flexDirection: "column", gap: 18, transition: "border-color 200ms, transform 200ms" }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.transform = ""; }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                  <span className="num">No. {String(i + 1).padStart(2, "0")}</span>
                  <I name={s.icon} size={22} stroke="var(--gold)" />
                </div>
                <MediaSlot slot={serviceSlots?.[s.key]} label={s.name.toLowerCase()} style={{ aspectRatio: "4/3", width: "100%" }} />
                <div>
                  <h3 className="serif" style={{ fontSize: 28, margin: "0 0 8px" }}>{s.name}</h3>
                  <p style={{ color: "var(--text-2)", fontSize: 13.5, margin: 0, minHeight: 40 }}>{s.tagline}</p>
                </div>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {s.descriptors.map((d) => <span className="chip" key={d}>{d}</span>)}
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4 }}>
                  <span className="lk" style={{ fontSize: 13 }}>Inquire</span>
                  <I name="arrow" size={16} stroke="var(--gold)" />
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED WORK SPLIT */}
      <section className="section-tight" style={{ background: "#080808" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "stretch" }}>
            <div style={{ minWidth: 0 }}>
              {(() => {
                // Featured film on home is *always* Yolanda Rivera's look reel —
                // matches the headline "Three shoots in a day, one creative direction".
                const featured = window.WORK?.find(w => w.id === "yolanda-rivera-look") || window.WORK?.[0];
                const firstVideo = featured?.gallery?.find(g => g.kind === "video");
                const cover = featured?.cover || {};
                const aspect = "16/10";
                if (firstVideo) {
                  return <Placeholder
                    label={`${featured.title.toLowerCase()}`}
                    code={cover.code || "EV-FLM"}
                    variant={cover.v || "warm"}
                    video={firstVideo.src}
                    poster={cover.poster}
                    focal={cover.focal || "center 35%"}
                    style={{ aspectRatio: aspect, width: "100%" }} />;
                }
                if (cover.image) {
                  return <Placeholder label="film · selected work" code={cover.code || "EV-FLM"} variant={cover.v || "warm"} src={cover.image} focal={cover.focal || "center 35%"} style={{ aspectRatio: aspect, width: "100%" }} />;
                }
                return <MediaSlot slot={M.featuredFilm} label="film · selected work" code="EV-FLM-022" style={{ aspectRatio: aspect, width: "100%" }} />;
              })()}
            </div>
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "20px 0", minWidth: 0 }}>
              <span className="eyebrow eyebrow-gold">§ Selected work</span>
              <h3 className="serif balance" style={{ fontSize: "clamp(32px, 3.4vw, 48px)", lineHeight: 1.05, margin: "16px 0 22px" }}>
                Three shoots in a day, <br/>one creative direction.
              </h3>
              <p className="pretty" style={{ color: "var(--text-1)", fontSize: 15.5, lineHeight: 1.65, maxWidth: 480 }}>
                A look shoot built around three concepts in a single day. One operator, one model, three sets that read like one editorial. The studio's shorthand for what a focused day on set can produce.
              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
                <button className="btn btn-line" onClick={() => goto("project", { id: "yolanda-rivera-look" })}><I name="play" size={14} /> Watch the cut</button>
                <button className="btn btn-ghost" onClick={() => goto("work")}>All work</button>
              </div>
              <div style={{ display: "flex", gap: 36, marginTop: 40 }}>
                <div><div className="serif" style={{ fontSize: 32 }}>03</div><div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 4 }}>Concepts, 1 day</div></div>
                <div style={{ width: 1, background: "var(--border)" }} />
                <div><div className="serif" style={{ fontSize: 32 }}>1d</div><div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 4 }}>On set</div></div>
                <div style={{ width: 1, background: "var(--border)" }} />
                <div><div className="serif" style={{ fontSize: 32 }}>Look</div><div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 4 }}>Editorial / brand</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STORE STRIP */}
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32 }}>
            <div>
              <span className="eyebrow eyebrow-gold">§ The store</span>
              <h2 className="serif" style={{ fontSize: "clamp(34px, 4vw, 56px)", lineHeight: 1.02, margin: "16px 0 0" }}>
                Editions from the studio.
              </h2>
            </div>
            <button className="btn btn-line" onClick={() => goto("store")}>All goods <I name="arrow" size={14} /></button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(featured.length, 3)}, 1fr)`, gap: 24 }}>
            {featured.map((p, i) => (
              <div key={p.id} className="product" onClick={() => goto("pdp", { id: p.id })} style={{ cursor: "pointer" }}>
                <div className="product-art">
                  {p.cover ? (
                    <Placeholder label={p.name.toLowerCase()} variant={p.imgVariant} code={p.code} src={p.cover} focal={p.focal} fit="cover" />
                  ) : p.video ? (
                    <Placeholder label={p.name.toLowerCase()} variant={p.imgVariant} code={p.code} video={p.video} poster={p.poster} focal={p.focal} />
                  ) : (
                    <Placeholder label={p.name.toLowerCase()} variant={p.imgVariant} code={p.code} />
                  )}
                  <div style={{ position: "absolute", top: 12, left: 12 }}>
                    <span className="num" style={{ background: "rgba(0,0,0,0.55)", padding: "4px 6px", borderRadius: 3 }}>No. {String(i + 1).padStart(2, "0")}</span>
                  </div>
                  {p.badge && (
                    <div style={{ position: "absolute", top: 12, right: 12 }}>
                      <span className="num" style={{ background: "var(--gold)", color: "#000", padding: "4px 8px", borderRadius: 3, fontWeight: 600 }}>{p.badge}</span>
                    </div>
                  )}
                </div>
                <div>
                  <div className="product-cat">{p.cat}{p.artist ? ` · ${p.artist}` : ""}</div>
                  <div className="product-meta">
                    <span className="product-name">{p.name}</span>
                    <span className="product-price">${p.price}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LISTEN. Pretty Girls Have Wild Stories embedded player */}
      {(() => {
        const album = CATALOG.find((p) => p.id === "ev-003");
        if (!album?.untitledId) return null;
        return (
          <section className="section-tight" style={{ background: "#080808", borderTop: "1px solid var(--border-1)", borderBottom: "1px solid var(--border-1)" }}>
            <div className="container">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center" }}>
                <div>
                  <span className="eyebrow eyebrow-gold">§ Listen</span>
                  <h3 className="serif balance" style={{ fontSize: "clamp(34px, 4vw, 52px)", lineHeight: 1.05, margin: "16px 0 18px" }}>
                    {album.name}<br/>
                    <em style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>by Simeon Views.</em>
                  </h3>
                  <p className="pretty" style={{ color: "var(--text-1)", fontSize: 15.5, lineHeight: 1.65, maxWidth: 460, margin: 0 }}>
                    Three songs, made between sessions and released without a campaign. Stream below, or pick up the digital files in the store.
                  </p>
                  <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
                    <a className="btn btn-line" href={`https://untitled.stream/embed/${album.untitledId}`} target="_blank" rel="noopener noreferrer">
                      Open on Untitled <I name="ext" size={14} />
                    </a>
                    <button className="btn btn-gold" onClick={() => goto("pdp", { id: album.id })}>Buy the album <I name="arrow" size={14} /></button>
                  </div>
                </div>
                <div style={{ minWidth: 0 }}>
                  <UntitledEmbed id={album.untitledId} height={344} radius={14} />
                </div>
              </div>
            </div>
          </section>
        );
      })()}

      {/* PRESS, hidden until real press lands */}
      {PRESS.length > 0 && (
        <section style={{ padding: "56px 0", borderTop: "1px solid var(--border-1)", borderBottom: "1px solid var(--border-1)" }}>
          <div className="container">
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 24, flexWrap: "wrap" }}>
              <span className="eyebrow">As seen in</span>
              {PRESS.map((p, i) => (
                <span key={p} className="serif-it" style={{ fontSize: 22, color: "var(--text-2)" }}>{p}{i < PRESS.length - 1 && <span style={{ color: "var(--gold)", margin: "0 16px" }}>·</span>}</span>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* QUOTE / FOOTER CTA */}
      <section className="section">
        <div className="container" style={{ textAlign: "center", maxWidth: 920, margin: "0 auto" }}>
          <I name="spark" size={20} stroke="var(--gold)" style={{ marginBottom: 24 }} />
          <p className="serif balance" style={{ fontSize: "clamp(28px, 3.4vw, 44px)", lineHeight: 1.18, fontStyle: "italic", margin: 0 }}>
            One day. One camera. The film a family keeps for the rest of their lives.
          </p>
          <p className="mono" style={{ marginTop: 32, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--text-2)" }}>
            Eleven Views · Birthday-party recaps, booked by deposit
          </p>
          <div style={{ marginTop: 56, display: "flex", justifyContent: "center", gap: 12 }}>
            <button className="btn btn-gold btn-lg" onClick={() => goto("booking")}>Start a project <I name="arrow" size={16} /></button>
            <button className="btn btn-ghost btn-lg" onClick={() => goto("contact")}>Say hello</button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;