// Maison Yeya — Press & Contact pages

function PressPage({ setRoute, onAppointment }) {
  return (
    <div className="page">
      {/* Hero strip */}
      <section style={{ padding: "60px 56px 60px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "end" }}>
          <div>
            <div className="micro" style={{ marginBottom: 24 }}>Press · Accolades · Editorial</div>
            <h1 className="display" style={{ fontSize: "clamp(72px, 9vw, 144px)", margin: 0, lineHeight: 0.92 }}>
              Press.
            </h1>
          </div>
          <p className="editorial" style={{ fontSize: 21, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 520, fontStyle: "italic", margin: 0 }}>
            A selection of features and accolades. Maison Yeya does not currently licence press logos or tear sheets — please contact <a href={`mailto:${CONTACT.press}`} style={{ borderBottom: "1px solid currentColor" }}>{CONTACT.press}</a> for usage requests.
          </p>
        </div>
      </section>

      {/* Press list */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="container">
          <div className="hair" style={{ background: "var(--ink)" }}></div>
          {PRESS.map((p, i) => (
            <article key={i} style={{
              display: "grid", gridTemplateColumns: "200px 1fr 200px 60px",
              gap: 32, padding: "36px 0",
              borderBottom: "1px solid var(--hair-soft)",
              alignItems: "baseline"
            }}>
              <div className="num" style={{ fontSize: 14, color: "var(--ink-mute)" }}>{String(i + 1).padStart(2, "0")} / {String(PRESS.length).padStart(2, "0")}</div>
              <div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1.1, marginBottom: 14 }}>
                  {p.quote}
                </div>
                <div className="micro" style={{ color: "var(--ink-mute)" }}>
                  {p.source} · {p.year} · {p.kind}
                </div>
              </div>
              <div className="label" style={{ color: "var(--ink-soft)" }}>{p.source}</div>
              <div className="num" style={{ fontFamily: "var(--serif-display)", fontSize: 30, color: "var(--ink-mute)" }}>{p.year}</div>
            </article>
          ))}
        </div>
      </section>

      {/* Selected editorial visuals */}
      <section style={{ padding: "60px 0 100px" }}>
        <div className="container">
          <div className="micro" style={{ marginBottom: 22 }}>Editorial · Selected</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "0 0 56px" }}>
            From the Maison's archive.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28 }}>
            <EditorialTile img="media/media-04-website-banner-1-copy.webp" title="Sublimissime" tag="Couture · Studio Series"/>
            <EditorialTile img="media/media-05-yeya0975-scaled.webp"        title="Harmony"      tag="Eveningwear · Editorial"/>
            <EditorialTile img="media/media-06-yeya-utopia-balqees-dress-01.webp" title="Utopia · Balqees" tag="Bridal Couture"/>
          </div>
        </div>
      </section>

      {/* Press CTA */}
      <section style={{ padding: "80px 0", background: "var(--paper-2)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="micro" style={{ marginBottom: 18 }}>Press Office</div>
            <h3 className="display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: 0, lineHeight: 1.04 }}>
              For interviews, imagery requests, and red-carpet coordination.
            </h3>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24, alignItems: "flex-start" }}>
            <div>
              <div className="micro" style={{ marginBottom: 6 }}>Press</div>
              <a className="editorial" style={{ fontSize: 22 }} href={`mailto:${CONTACT.press}`}>{CONTACT.press}</a>
            </div>
            <div>
              <div className="micro" style={{ marginBottom: 6 }}>General</div>
              <a className="editorial" style={{ fontSize: 22 }} href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a>
            </div>
            <button className="btn" style={{ marginTop: 16 }} onClick={() => setRoute("contact")}>
              Contact the Maison
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function EditorialTile({ img, title, tag }) {
  const [hover, setHover] = useState(false);
  return (
    <figure onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
            style={{ margin: 0 }}>
      <div className="img-frame" style={{ aspectRatio: "3/4", overflow: "hidden" }}>
        <img src={img} alt={title}
             style={{ transform: hover ? "scale(1.04)" : "scale(1)",
                      transition: "transform 1200ms cubic-bezier(0.22, 1, 0.36, 1)",
                      width: "100%", height: "100%", objectFit: "cover" }}/>
      </div>
      <figcaption style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div className="display" style={{ fontSize: 22 }}>{title}</div>
        <div className="micro" style={{ color: "var(--ink-mute)" }}>{tag}</div>
      </figcaption>
    </figure>
  );
}

// ──────────────────────────────────────────────────────────
// Contact page
// ──────────────────────────────────────────────────────────
function ContactPage({ setRoute, onAppointment }) {
  return (
    <div className="page">
      <section style={{ padding: "60px 56px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "stretch" }}>
          <div>
            <div className="micro" style={{ marginBottom: 24 }}>Atelier · Showroom · Dubai Design District</div>
            <h1 className="display" style={{ fontSize: "clamp(72px, 9vw, 144px)", margin: 0, lineHeight: 0.92 }}>
              Contact.
            </h1>
            <p className="editorial" style={{ fontSize: 22, lineHeight: 1.45, color: "var(--ink-soft)", marginTop: 32, maxWidth: 520, fontStyle: "italic" }}>
              By private appointment only. Reach the Maison directly, or open an enquiry — we'll respond within one working day.
            </p>

            <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36 }}>
              <ContactBlock title="Atelier — Mobile" content={
                <a className="editorial num" style={{ fontSize: 22 }} href={CONTACT.mobileHref}>{CONTACT.mobile}</a>
              }/>
              <ContactBlock title="Showroom — Landline" content={
                <a className="editorial num" style={{ fontSize: 22 }} href={CONTACT.landlineHref}>{CONTACT.landline}</a>
              }/>
              <ContactBlock title="General" content={
                <a className="editorial" style={{ fontSize: 20 }} href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a>
              }/>
              <ContactBlock title="Press" content={
                <a className="editorial" style={{ fontSize: 20 }} href={`mailto:${CONTACT.press}`}>{CONTACT.press}</a>
              }/>
              <ContactBlock title="Careers" content={
                <a className="editorial" style={{ fontSize: 20 }} href={`mailto:${CONTACT.careers}`}>{CONTACT.careers}</a>
              }/>
              <ContactBlock title="Hours" content={
                <p className="editorial" style={{ margin: 0, fontSize: 17, lineHeight: 1.5 }}>
                  10:00 – 18:00<br/>Closed Fridays & UAE public holidays
                </p>
              }/>
            </div>

            <div style={{ marginTop: 56, padding: "28px", background: "var(--paper-2)" }}>
              <div className="micro" style={{ marginBottom: 12 }}>Address</div>
              <p className="editorial" style={{ margin: 0, fontSize: 22, lineHeight: 1.4 }}>
                Office 203A, Building 4A<br/>Dubai Design District<br/>Dubai, United Arab Emirates
              </p>
              <a className="link-arrow" style={{ marginTop: 28 }}
                 href="https://www.google.com/maps?q=Dubai+Design+District+Building+4" target="_blank" rel="noopener">
                <span>Open Map</span><span className="arr">↗</span>
              </a>
            </div>

            <button className="btn solid" style={{ marginTop: 48 }} onClick={onAppointment}>
              Request a VIP Appointment
            </button>
          </div>

          {/* Right column: map placeholder + studio image */}
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div className="img-frame" style={{ aspectRatio: "4/5" }}>
              <img src="media/media-10-maison-yeya-july-20230288-2-scaled.webp" alt="Atelier"/>
            </div>

            {/* Map placeholder (we don't have a real pin) */}
            <div style={{
              border: "1px solid var(--hair)",
              padding: "28px",
              background: "var(--paper-2)",
              aspectRatio: "16/9", position: "relative", overflow: "hidden"
            }}>
              <MapMockup/>
              <div style={{ position: "absolute", left: 28, top: 28 }}>
                <div className="micro" style={{ marginBottom: 6 }}>Locator · d3</div>
                <div className="display" style={{ fontSize: 24 }}>Building 4A · Office 203A</div>
              </div>
              <div style={{ position: "absolute", right: 28, bottom: 28 }}>
                <a className="link-arrow"
                   href="https://www.google.com/maps?q=Dubai+Design+District+Building+4" target="_blank" rel="noopener">
                  <span>Get Directions</span><span className="arr">↗</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactBlock({ title, content }) {
  return (
    <div>
      <div className="micro" style={{ marginBottom: 8 }}>{title}</div>
      {content}
    </div>
  );
}

// Quietly stylized map mockup: cream paper with thin grid + an X for the pin.
function MapMockup() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice"
         style={{ position: "absolute", inset: 0 }}>
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M40 0 L0 0 0 40" fill="none" stroke="#d8cfc1" strokeWidth="0.5"/>
        </pattern>
      </defs>
      <rect width="800" height="450" fill="#ede6dc"/>
      <rect width="800" height="450" fill="url(#grid)"/>
      {/* Streets */}
      <path d="M0 220 Q 200 200 400 230 T 800 220" stroke="#cbc0b0" strokeWidth="14" fill="none" strokeLinecap="round"/>
      <path d="M180 0 Q 220 200 200 450" stroke="#cbc0b0" strokeWidth="10" fill="none" strokeLinecap="round"/>
      <path d="M520 0 L 540 450" stroke="#cbc0b0" strokeWidth="8" fill="none"/>
      <path d="M0 340 L 800 360" stroke="#cbc0b0" strokeWidth="6" fill="none" opacity="0.7"/>
      {/* Buildings */}
      {[
        [60, 60, 80, 60], [300, 80, 70, 50], [430, 60, 60, 70],
        [620, 100, 70, 50], [80, 280, 90, 50], [260, 280, 70, 50],
        [430, 290, 70, 50], [620, 280, 90, 50], [320, 380, 80, 50]
      ].map((b, i) => (
        <rect key={i} x={b[0]} y={b[1]} width={b[2]} height={b[3]}
              fill="#d8cfc1" stroke="#bcb09a" strokeWidth="0.5"/>
      ))}
      {/* Highlighted building 4A */}
      <rect x="370" y="150" width="80" height="60" fill="#1a1714" />
      <text x="410" y="186" textAnchor="middle" fontFamily="Manrope" fontSize="11"
            letterSpacing="0.2em" fill="#f4efe7">4A</text>
      {/* Pin */}
      <g transform="translate(410, 130)">
        <line x1="-12" y1="0" x2="12" y2="0" stroke="#1a1714" strokeWidth="1"/>
        <line x1="0" y1="-12" x2="0" y2="12" stroke="#1a1714" strokeWidth="1"/>
        <circle r="8" fill="none" stroke="#1a1714" strokeWidth="1"/>
      </g>
    </svg>
  );
}

window.PressPage = PressPage;
window.ContactPage = ContactPage;