/* global React */
// ───────────────────────────────────────────────────────────────
// HOMEPAGE A — Editorial Quiet
// Magazine-like, type-led, generous whitespace, single hero image
// ───────────────────────────────────────────────────────────────

function HomeEditorial() {
  const feed = usePhotos();
  const latest = feed.slice(0, 3);

  return (
    <div className="sc-root" style={{ background: "var(--paper)" }}>
      <Nav tone="light" />

      {/* Hero — pinned Susan portrait */}
      <section style={{ padding: "80px 48px 120px", maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>London · Est. 1998 · Spring 2026</div>
            <h1 style={{ fontSize: 120, lineHeight: 0.95, margin: 0, letterSpacing: "-0.02em" }}>
              Garments that<br/>
              <span style={{ fontStyle: "italic", color: "var(--terracotta)" }}>fit a life</span><br/>
              you're proud of.
            </h1>
            <p className="body" style={{ fontSize: 18, marginTop: 40, maxWidth: 460 }}>
              Ghanaian heritage, European tailoring, and an honest eye — Susan dresses brides,
              galas, and everyday women who simply want to feel like themselves.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 40 }}>
              <a className="sc-btn" href="Lookbook.html">See the lookbook</a>
              <a className="sc-btn ghost" href="tel:+447762227836">Call studio →</a>
            </div>
          </div>
          <div style={{ position: "relative", justifySelf: "end", width: "100%", maxWidth: 440 }}>
            <Photo name="susanKente" label="Susan, in kente — the hero portrait" style={{ aspectRatio: "3/4", width: "100%" }} />
            <div style={{
              position: "absolute",
              bottom: -32,
              left: -48,
              background: "var(--paper)",
              padding: "20px 24px",
              border: "1px solid var(--hairline)",
              maxWidth: 240,
            }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Susan, at the machine</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.25, fontStyle: "italic" }}>
                In hand-woven kente, between fittings.
              </div>
            </div>
          </div>
        </div>
      </section>

      <MarqueeBand items={["Bespoke", "Ghanaian", "European tailoring", "London", "Since 1998", "Made for you"]} />

      {/* Lookbook teaser — three latest from feed */}
      <section style={{ padding: "120px 48px", maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
          <div>
            <div className="eyebrow">Lookbook · most recent</div>
            <h2 style={{ fontSize: 64, margin: "12px 0 0", maxWidth: 720 }}>
              {feed.length} pieces. <span style={{ fontStyle: "italic", color: "var(--mute)" }}>One conversation each.</span>
            </h2>
          </div>
          <a className="sc-link" href="Lookbook.html">View all →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 0.8fr", gap: 24 }}>
          {latest[0] && <LookCard photo={latest[0]} h={620} />}
          {latest[1] && <LookCard photo={latest[1]} h={520} />}
          {latest[2] && <LookCard photo={latest[2]} h={460} />}
        </div>
      </section>

      {/* About strip */}
      <section style={{ padding: "120px 48px", background: "var(--ochre)", color: "var(--ink)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 96, alignItems: "center" }}>
          <Photo name="susanRedchair" label="Susan, after a fitting" aspectRatio="4/5" />
          <div>
            <div className="eyebrow">A note from Susan</div>
            <p className="display" style={{ fontSize: 44, lineHeight: 1.15, marginTop: 20, fontStyle: "italic" }}>
              "I'm not interested in trends. I'm interested in <span style={{ fontStyle: "normal", color: "var(--terracotta)" }}>you</span> — your shape, your story, the day you'll wear it."
            </p>
            <p className="body" style={{ fontSize: 16, marginTop: 32, maxWidth: 520 }}>
              Twenty-eight years cutting cloth for brides, mothers-of-the-bride, women heading
              into boardrooms and women heading into church. The work is the same: listen first,
              flatter honestly, finish to the millimetre.
            </p>
          </div>
        </div>
      </section>

      <InstagramStrip />
      <VisitBlock tone="dark" />
      <Footer />
    </div>
  );
}

function LookCard({ photo, h, tone = "" }) {
  if (!photo) return null;
  const date = photo.date ? new Date(photo.date).toLocaleDateString("en-GB", { day: "numeric", month: "short" }) : "";
  return (
    <figure style={{ margin: 0 }}>
      <Photo photo={photo} h={h} tone={tone} style={{ marginBottom: 16 }} />
      <figcaption style={{ display: "flex", justifyContent: "space-between", gap: 16, fontSize: 13, color: "var(--mute)" }}>
        <span style={{ fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>{date}</span>
        <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16, color: "var(--ink)", textAlign: "right" }}>{photo.caption}</span>
      </figcaption>
    </figure>
  );
}

window.HomeEditorial = HomeEditorial;