// pages-home.jsx — Home page
const { useState: useStateH, useEffect: useEffectH } = React;

function Home({ navigate }) {
  // hero rotating image — small confidence move
  const heroImages = [
    "media/project-district-one-villa.webp",
    "media/project-w-residence-palm.webp",
    "media/project-villa-36.webp",
    "media/project-citywalk-penthouse.webp",
  ];
  const [heroIdx, setHeroIdx] = useStateH(0);
  useEffectH(() => {
    const t = setInterval(() => setHeroIdx(i => (i + 1) % heroImages.length), 5400);
    return () => clearInterval(t);
  }, []);

  const featured = PROJECTS.filter(p => p.featured).slice(0, 4);

  return (
    <main data-screen-label="01 Home">
      {/* ---------- Hero ---------- */}
      <section className="hero" data-comment-anchor="hero">
        {heroImages.map((src, i) => (
          <div
            key={src}
            className="hero-bg"
            style={{
              backgroundImage: `url(${src})`,
              opacity: i === heroIdx ? 1 : 0,
              transition: "opacity 1.6s ease",
            }}
          />
        ))}
        <div className="hero-vignette" />
        <div className="hero-grain" />
        <div className="hero-aside">Bldg 1B · D3 · Dubai — Est. MMVII</div>
        <div className="hero-inner">
          <div className="eyebrow" style={{ color: "rgba(232,218,199,0.7)", marginBottom: 32 }}>
            ◆ — Interior Architecture · Fit-Out · Turnkey — Since 2007
          </div>
          <h1>
            Bespoke <em>luxury</em><br/>
            interiors, built <em>turnkey</em> in&nbsp;Dubai.
          </h1>
          <div style={{ display: "flex", gap: 18, marginTop: 48, flexWrap: "wrap" }}>
            <button className="btn btn-arrow" onClick={() => navigate({ name: "projects" })}>
              Explore the work
            </button>
            <button
              className="btn btn-ghost btn-arrow"
              style={{ borderColor: "rgba(251,249,246,0.5)", color: "var(--paper)" }}
              onClick={() => navigate({ name: "contact" })}
            >
              Start a project
            </button>
          </div>
        </div>
        <div className="meta">
          <div>
            <div className="label">Now showing</div>
            <div className="credit" style={{ marginTop: 8, color: "rgba(251,249,246,0.85)", fontSize: 13 }}>
              {String(heroIdx + 1).padStart(2, "0")} — {["District One Villa","Palm Residence","Villa N°36","City Walk Penthouse"][heroIdx]}
            </div>
          </div>
          <div className="credit">Image credit pending · Muse studio archive</div>
        </div>
      </section>

      {/* ---------- Positioning band ---------- */}
      <section className="section tight">
        <div className="wrap">
          <div className="col-2" style={{ alignItems: "start" }}>
            <div>
              <div className="eyebrow">◇ — A word from the studio</div>
              <p className="lede" style={{ marginTop: 24, maxWidth: "30ch" }}>
                A small Dubai practice that designs, builds and delivers
                — for people who would rather hand over one key, not five.
              </p>
            </div>
            <div className="body" style={{ maxWidth: "52ch" }}>
              <p style={{ marginTop: 0 }}>
                Muse is a husband-and-wife studio led by Michael Dudnyk and
                Stanislava Rudas-Dudnyk, established at Dubai Design District in 2007.
                We design residences, penthouses and a selective body of commercial work — and we build them ourselves,
                under one project manager, with the relevant authority approvals handled in-house.
              </p>
              <p>
                The work below is by sector. Where photography, photographer credit and
                client release are all on file, the case study is published in full.
                Where it isn't, the project is held as a study.
              </p>
              <a className="link-arrow" onClick={() => navigate({ name: "studio" })} style={{ marginTop: 16, cursor: "pointer", display: "inline-flex" }}>
                Read about the studio
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Sectors ---------- */}
      <section className="section sand">
        <div className="wrap">
          <SectionHead
            roman="I."
            title={<>Six sectors. <em style={{ fontStyle: "italic", color: "var(--brass)"}}>One studio.</em></>}
            aside="From a single villa to a turnkey hotel fit-out, the practice runs as one team. Browse the portfolio by sector."
          />
          <div className="sector-grid" data-comment-anchor="sector-grid">
            {SECTOR_CARDS.map((s, i) => (
              <div
                key={s.id}
                className={`sector ${s.size}`}
                onClick={() => navigate({ name: "projects", filter: s.id })}
              >
                <div className="img" style={{ backgroundImage: `url(${s.cover})` }} />
                <div className="scrim" />
                <div className="corner-idx">— {String(i + 1).padStart(2, "0")}</div>
                <div className="label-block">
                  <h3>{s.label}</h3>
                  <div className="count">{s.count} →</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Featured case studies ---------- */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            roman="II."
            title="Selected projects."
            aside={<>A short cut through the studio. Click any frame to read the case study — concept, materials, process, outcome.</>}
          />
          <div className="feat-grid" data-comment-anchor="featured-projects">
            {featured.map((p, i) => (
              <div
                key={p.id}
                className="feat-card"
                onClick={() => navigate({ name: "case", id: p.id })}
              >
                <div className="frame">
                  <div className="img" style={{ backgroundImage: `url(${p.cover})` }} />
                </div>
                <div className="meta">
                  <div>
                    <div className="idx">— No. {String(i + 1).padStart(2, "0")}</div>
                    <h3 style={{ marginTop: 8 }}>{p.title}</h3>
                  </div>
                  <div className="submeta" style={{ textAlign: "right" }}>
                    {p.sector} · {p.year}<br/>
                    {p.location}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 56 }}>
            <button className="btn btn-ghost btn-arrow" onClick={() => navigate({ name: "projects" })}>
              All {PROJECTS.length} projects
            </button>
          </div>
        </div>
      </section>

      {/* ---------- Process (on noir) ---------- */}
      <section className="section dark" data-comment-anchor="process-section">
        <div className="wrap">
          <SectionHead
            roman="III."
            title={<>How a Muse project <em>actually runs.</em></>}
            aside="A single project manager, in-house turnkey delivery, and authority approvals handled before they bottleneck the build."
          />
          <ProcessStrip />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 48, gap: 20, flexWrap: "wrap" }}>
            <div className="label" style={{ color: "rgba(251,249,246,0.55)" }}>
              UAE-licensed contractor · DEWA · DDA · Concordia · Emaar · Nakheel
            </div>
            <button
              className="btn btn-brass btn-arrow"
              style={{ color: "var(--paper)", borderColor: "var(--brass)" }}
              onClick={() => navigate({ name: "services" })}
            >
              The full scope
            </button>
          </div>
        </div>
      </section>

      {/* ---------- Recognition ---------- */}
      <section className="section sand">
        <div className="wrap">
          <SectionHead
            roman="IV."
            title="Attributed recognition."
            aside="We carry only the recognition we can attribute. List placements, press features, founders' bios — sourced and linked."
          />
          <RecognitionStrip />
        </div>
      </section>

      {/* ---------- CTA band ---------- */}
      <section className="section dark">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--brass-soft)" }}>◆ — Start a project</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 96px)", color: "var(--paper)", marginTop: 24, marginBottom: 0 }}>
              The room <em style={{ color: "var(--brass-soft)" }}>before</em> it is built.
            </h2>
          </div>
          <div style={{ color: "rgba(251,249,246,0.78)" }}>
            <p className="body" style={{ color: "rgba(251,249,246,0.78)", maxWidth: "44ch", marginTop: 0 }}>
              Every Muse project begins with a conversation, a site walk and a render set —
              before either party commits. Send us your brief, your plans, or just an idea.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap" }}>
              <button className="btn btn-arrow" style={{ background: "var(--paper)", color: "var(--ink)", borderColor: "var(--paper)" }} onClick={() => navigate({ name: "contact" })}>
                Begin an enquiry
              </button>
              <a
                href="https://api.whatsapp.com/send?phone=971553573290"
                target="_blank"
                rel="noopener"
                className="btn btn-ghost btn-arrow"
                style={{ borderColor: "rgba(251,249,246,0.4)", color: "var(--paper)" }}
              >
                WhatsApp — +971 55 357 3290
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;