const { useState: useStateP } = React;

function Projects() {
  const [filter, setFilter] = useStateP("All");
  const filters = ["All", "Hospitality", "Corporate", "Healthcare", "Education", "Mirrors", "Residential"];
  const filtered = PROJECTS.filter(p => filter === "All" || p.category.includes(filter));

  return (
    <div className="fade-in">
      <section style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container-wide">
          <Eyebrow>Case Studies</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 132px)", marginTop: 28, lineHeight: 1 }}>
            Selected<br/><em>Projects.</em>
          </h1>
          <p style={{ marginTop: 32, fontSize: 19, maxWidth: 720, color: "var(--ink-body)" }}>
            Sixteen projects spanning hospitality, corporate, healthcare, and education — domestic and international. Each one custom-tailored to the client's vision and space.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 48 }}>
        <div className="container-wide">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, paddingBottom: 24, borderBottom: "1px solid var(--hairline)" }}>
            {filters.map(f => (
              <button key={f} onClick={() => setFilter(f)} style={{
                background: filter === f ? "var(--ink)" : "transparent",
                color: filter === f ? "#fff" : "var(--ink-body)",
                border: "1px solid " + (filter === f ? "var(--ink)" : "var(--hairline)"),
                padding: "8px 16px", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase",
                cursor: "pointer", transition: "all 0.2s", fontFamily: "var(--font-body)",
              }}>{f}{f === "All" && ` (${PROJECTS.length})`}</button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="proj-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {filtered.map((p, i) => (
              <Link key={p.slug} to={`/projects/${p.slug}`} style={{ display: "block", cursor: "pointer", gridColumn: p.featured && i < 2 && filter === "All" ? "span 1" : "auto" }}
                onMouseEnter={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1.04)"; }}
                onMouseLeave={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1)"; }}>
                <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--hairline)", marginBottom: 16, position: "relative" }}>
                  <img src={PROJECT_THUMBS[p.slug]} alt={p.title} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.7s ease" }} />
                  {p.featured && <div style={{ position: "absolute", top: 16, left: 16, background: "var(--gold)", color: "#fff", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", padding: "6px 12px" }}>Featured</div>}
                </div>
                <Eyebrow>{p.category}</Eyebrow>
                <h3 className="display" style={{ fontStyle: "italic", fontSize: 28, marginTop: 6, marginBottom: 4 }}>{p.title}</h3>
                {p.location && <div style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--muted)" }}>{p.location}</div>}
              </Link>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .proj-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 520px) { .proj-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      <CTASection title={<>Looking for something <em>specific?</em></>} body="Tell us about your space, your sector, and your timeline." ctaLabel="Start a Project" ctaTo="/new-project" />
    </div>
  );
}

// Featured case study: Hard Rock Cafe
function HardRock() {
  return (
    <div className="fade-in">
      {/* Full-bleed hero */}
      <section style={{ position: "relative" }}>
        <div style={{ height: "70vh", overflow: "hidden" }}>
          <img src={HARDROCK_IMAGES[3]} alt="Hard Rock Cafe project" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.5))" }} />
        </div>
        <div className="container-wide" style={{ position: "absolute", bottom: 56, left: 0, right: 0, color: "#fff" }}>
          <Eyebrow style={{ color: "rgba(255,255,255,0.7)" }}>Case Study · Corporate · Hospitality</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 9vw, 144px)", color: "#fff", marginTop: 16, fontStyle: "italic", lineHeight: 1 }}>
            Hard Rock Cafe.
          </h1>
        </div>
      </section>

      {/* Metadata + description */}
      <section className="section">
        <div className="container-wide">
          <div className="cs-meta" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div>
              <CSField label="Client" value="Hard Rock Cafe" />
              <CSField label="Project" value="Corporate · Hospitality" />
              <CSField label="Location" value="Worldwide" highlight />
              <CSField label="Scale" value="Hundreds of locations" />
              <CSField label="Services" value="Framing · Production · Logistics" />
            </div>
            <div>
              <p style={{ fontSize: 20, lineHeight: 1.7, color: "var(--ink)", marginBottom: 24, fontFamily: "var(--font-display)", fontStyle: "italic" }}>
                Art Dallas's first big account.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 20 }}>
                Through this work we learned what it means to handle large quantities of pieces — all different, for different locations. Pulling together technology and organizational expertise to deliver complex, high-end framing on a budget.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.85 }}>
                Framing and handling valuable material has since become a specialty at Art Dallas.
              </p>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .cs-meta { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ paddingBottom: 120 }}>
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
            <Eyebrow>Project Gallery</Eyebrow>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{HARDROCK_IMAGES.length} images</span>
          </div>
          <Gallery images={HARDROCK_IMAGES} columns={4} />
        </div>
      </section>

      <RelatedProjects exclude="hard-rock-cafe" />
    </div>
  );
}

// Featured case study: Mazagan
function Mazagan() {
  return (
    <div className="fade-in">
      <section style={{ position: "relative" }}>
        <div style={{ height: "75vh", overflow: "hidden" }}>
          <img src={MAZAGAN_IMAGES[0]} alt="Mazagan Beach Resort" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55))" }} />
        </div>
        <div className="container-wide" style={{ position: "absolute", bottom: 56, left: 0, right: 0, color: "#fff" }}>
          <Eyebrow style={{ color: "rgba(255,255,255,0.75)" }}>Case Study · Hospitality · Destination Resort</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 128px)", color: "#fff", marginTop: 16, fontStyle: "italic", lineHeight: 1 }}>
            Mazagan<br/>Beach Resort.
          </h1>
          <div style={{ marginTop: 24, fontSize: 14, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--gold)" }}>
            El Jadida, Morocco
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <div className="cs-meta" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div>
              <CSField label="Case Study" value="Hospitality" />
              <CSField label="Project" value="Mazagan Beach Resort" />
              <CSField label="Location" value="El Jadida, Morocco" highlight />
              <CSField label="Audience" value="International clientele" />
              <CSField label="Services" value="Art Consulting · Framing · Original Artwork · Logistics" />
            </div>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 20 }}>
                A tour of a hospitality art package featuring the designs and historic styles of Morocco presented in a contemporary way. Art Dallas coordinated an international list of artists to create tapestries, pottery, wood carvings and other commissioned art for a destination resort with an international clientele.
              </p>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .cs-meta { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <Eyebrow style={{ color: "var(--gold)" }}>The Goal</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 52px)", marginTop: 16, marginBottom: 32, maxWidth: 1000 }}>
            <em>Find patterns,</em> designs and historic styles of Morocco — and present them in a contemporary way.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.85, maxWidth: 880 }}>
            Create custom art, sculpture and mirrors to interpret traditional motifs; frame historic artifacts; and work with an international list of artists to create tapestries, pottery, and wood carvings for a destination resort serving an international clientele.
          </p>
        </div>
      </section>

      <section style={{ padding: "96px 0 120px" }}>
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
            <Eyebrow>Project Gallery</Eyebrow>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{MAZAGAN_IMAGES.length} images</span>
          </div>
          <Gallery images={MAZAGAN_IMAGES} columns={3} />
        </div>
      </section>

      <RelatedProjects exclude="mazagan-beach-resort" />
    </div>
  );
}

function CSField({ label, value, highlight }) {
  return (
    <div style={{ paddingBottom: 16, marginBottom: 16, borderBottom: "1px solid var(--hairline)" }}>
      <div className="eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ fontFamily: highlight ? "var(--font-display)" : "var(--font-body)", fontStyle: highlight ? "italic" : "normal", fontSize: highlight ? 24 : 15, color: highlight ? "var(--gold)" : "var(--ink)" }}>{value}</div>
    </div>
  );
}

function RelatedProjects({ exclude }) {
  const related = PROJECTS.filter(p => p.slug !== exclude).slice(0, 3);
  return (
    <section className="section" style={{ background: "var(--ink)", color: "#fff" }}>
      <div className="container-wide">
        <Eyebrow style={{ color: "var(--gold)" }}>Continue Exploring</Eyebrow>
        <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 52px)", color: "#fff", marginTop: 16, marginBottom: 48 }}>Other <em>projects.</em></h2>
        <div className="rel-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {related.map(p => (
            <Link key={p.slug} to={`/projects/${p.slug}`} style={{ display: "block" }}
              onMouseEnter={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1.04)"; }}
              onMouseLeave={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1)"; }}>
              <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "#0d0c0a", marginBottom: 16 }}>
                <img src={PROJECT_THUMBS[p.slug]} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.92)", transition: "transform 0.7s ease" }} />
              </div>
              <Eyebrow style={{ color: "rgba(255,255,255,0.5)" }}>{p.category}</Eyebrow>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 24, color: "#fff", marginTop: 6 }}>{p.title}</div>
            </Link>
          ))}
        </div>
        <div style={{ marginTop: 40 }}>
          <Link to="/projects"><span className="btn btn-ghost" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>All 16 projects</span></Link>
        </div>
        <style>{`
          @media (max-width: 880px) { .rel-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 520px) { .rel-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function GenericProject({ slug }) {
  const p = PROJECTS.find(x => x.slug === slug);
  if (!p) return <div style={{ padding: 96, textAlign: "center" }}>Project not found.</div>;
  // Placeholder galleries derived from specialty images for variety
  const gallery = [PROJECT_THUMBS[slug], FCF_IMAGES[1], FRENCH_MAT_IMAGES[0], FLOCK_IMAGES[2], FLASH_IMAGES[2], MAZAGAN_IMAGES[3]];

  return (
    <div className="fade-in">
      <section style={{ position: "relative" }}>
        <div style={{ height: "60vh", overflow: "hidden" }}>
          <img src={PROJECT_THUMBS[slug]} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5))" }} />
        </div>
        <div className="container-wide" style={{ position: "absolute", bottom: 48, left: 0, right: 0, color: "#fff" }}>
          <Eyebrow style={{ color: "rgba(255,255,255,0.7)" }}>{p.category}</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 104px)", color: "#fff", marginTop: 16, fontStyle: "italic", lineHeight: 1 }}>{p.title}.</h1>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <div className="cs-meta" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div>
              <CSField label="Project" value={p.title} />
              <CSField label="Category" value={p.category} />
              {p.location && <CSField label="Location" value={p.location} highlight />}
            </div>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 20, color: "var(--ink-body)" }}>
                A case study from Art Dallas's portfolio. We worked with the client's design team and ownership group to deliver a complete art program — concept through installation — coordinated entirely from our 55,000 sq. ft. Dallas studio.
              </p>
              <div style={{ marginTop: 24, padding: 20, background: "var(--bg)", border: "1px solid var(--hairline)", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", lineHeight: 1.7 }}>
                {`/* TODO: Fetch full content for this project from current site. Client meeting: confirm or update content + add additional images. */`}
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .cs-meta { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container-wide">
          <Eyebrow>Selected Imagery</Eyebrow>
          <div style={{ height: 16 }} />
          <Gallery images={gallery} columns={3} />
        </div>
      </section>

      <RelatedProjects exclude={slug} />
    </div>
  );
}

window.Projects = Projects;
window.HardRock = HardRock;
window.Mazagan = Mazagan;
window.GenericProject = GenericProject;