/* services.jsx — Services page */

const SERVICES_FULL = [
  {
    id: "weddings", num: "01", title: "Weddings",
    intro: "From beachside elopements to ballroom celebrations, we design weddings as immersive floral environments — never as a sum of arrangements.",
    bullets: ["Reception centerpieces, head-table runners, sweetheart styling", "Bridal & bridesmaid bouquets, boutonnieres, flower crowns", "Welcome and dinner installations"],
    img: "public/images/events/pink-garden-bouquet.jpg",
  },
  {
    id: "private", num: "02", title: "Private Events",
    intro: "Birthdays, anniversaries, dinners, baby showers — gatherings that deserve florals as considered as the rest of the evening.",
    bullets: ["Tablescapes, centerpieces, vessel-led arrangements", "Welcome florals and entry moments", "Powder-room and detail florals", "Hand-tied gift bouquets for guests"],
    img: "public/images/events/bridal-table-pink-candles.jpg",
  },
  {
    id: "corporate", num: "03", title: "Corporate Events",
    intro: "Brand launches, galas, awards dinners, executive hospitality. We translate brand into petal — refined, on-message, never overdone.",
    bullets: ["Brand-aligned palette and design direction", "Step-and-repeat florals, stage installations", "Executive dinners and hospitality suites", "Recurring office and lobby programs"],
    img: "public/images/events/cream-roses-calla-arrangement.jpg",
  },
  {
    id: "install", num: "04", title: "Floral Installations",
    intro: "Suspended canopies, hanging clouds, immersive archways, and sculptural pieces designed to transform a space at scale.",
    bullets: ["Custom rigging and engineering", "Suspended ceiling installations", "Living moments — moss, vine, and seasonal greenery"],
    img: "public/images/events/cream-roses-arrangement-side.jpg",
  },
  {
    id: "bouquets", num: "05", title: "Custom Bouquets",
    intro: "Hand-tied bouquets composed seasonally, with a bias toward garden roses, ranunculus, sweet peas, and unexpected texture.",
    bullets: ["Bridal bouquets and bridesmaid arrangements", "Mother-of and signature personal florals", "Seasonal subscription bouquets", "Bespoke gift bouquets"],
    img: "public/images/events/pink-rose-vase-closeup.jpg",
  },
  {
    id: "styling", num: "06", title: "Event Styling",
    intro: "Beyond florals — the linens, candles, vessels, ribbon, and considered details that finish a setting end-to-end.",
    bullets: ["Linen and napkin sourcing", "Candle, vessel, and tabletop curation", "Place card and stationery direction", "Full design oversight on event day"],
    img: "public/images/events/bridal-table-hydrangea-gold.jpg",
  },
];

const ServicesPage = ({ navigate }) => {
  const [lightbox, setLightbox] = React.useState(null);

  return (
  <>
    {/* Header */}
    <section className="section" style={{ background: "var(--ivory)", paddingTop: 200, paddingBottom: 80 }}>
      <div className="shell">
        <Reveal><span className="eyebrow rule-eyebrow">02 — Services</span></Reveal>
        <Reveal delay={1}>
          <h1 className="serif" style={{ marginTop: 28, maxWidth: "16ch", fontSize: "clamp(48px, 7vw, 108px)", fontWeight: 300, letterSpacing: "-0.01em" }}>
            A complete floral <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>practice</span>, end to end.
          </h1>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{ marginTop: 36, maxWidth: 720 }}>
            Each commission is bespoke. We take a limited number of events per season so that every project
            receives the attention it deserves — from first conversation to final stem.
          </p>
        </Reveal>
      </div>
    </section>

    {/* Each service alternates */}
    {SERVICES_FULL.map((s, i) => {
      const reversed = i % 2 === 1;
      return (
        <section key={s.id} style={{
          background: i % 2 === 0 ? "var(--cream)" : "var(--ivory)",
          padding: "120px 0",
        }}>
          <div className="shell" style={{
            display: "grid",
            gridTemplateColumns: reversed ? "1fr 1.05fr" : "1.05fr 1fr",
            gap: 80,
            alignItems: "center",
          }}>
            <Reveal style={{ order: reversed ? 2 : 1 }}>
              <div
                onClick={() => setLightbox(s)}
                style={{ aspectRatio: "4/5", border: "1px solid var(--hairline-soft)", overflow: "hidden", cursor: "zoom-in" }}
              >
                <img src={s.img} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 1200ms cubic-bezier(.2,.7,.3,1)" }}
                  onMouseEnter={e => e.currentTarget.style.transform = "scale(1.05)"}
                  onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
                />
              </div>
            </Reveal>
            <Reveal delay={1} style={{ order: reversed ? 1 : 2 }}>
              <span className="serif" style={{ fontStyle: "italic", color: "var(--accent-4)", fontSize: 22 }}>— {s.num}</span>
              <h2 className="serif" style={{ marginTop: 12, fontSize: "clamp(36px, 4vw, 56px)" }}>{s.title}</h2>
              <p className="lede" style={{ marginTop: 24 }}>{s.intro}</p>
              <ul style={{ marginTop: 32, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14, borderTop: "1px solid var(--hairline-soft)", paddingTop: 20 }}>
                {s.bullets.map((b, j) => (
                  <li key={j} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, paddingBottom: 14, borderBottom: "1px solid var(--hairline-soft)", color: "var(--plum-soft)", fontSize: 15 }}>
                    <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent-4)", fontSize: 14 }}>·0{j + 1}</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <style>{`
            @media (max-width: 860px) {
              section .shell[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 40px !important; }
            }
          `}</style>
        </section>
      );
    })}

    {/* Lightbox */}
    {lightbox && ReactDOM.createPortal(
      <div onClick={() => setLightbox(null)} style={{
        position: "fixed", inset: 0, zIndex: 9999,
        background: "rgba(18, 12, 16, 0.96)",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        padding: "24px",
        backdropFilter: "blur(10px)",
        cursor: "zoom-out",
      }}>
        <button onClick={() => setLightbox(null)} style={{
          position: "absolute", top: 24, right: 32,
          background: "transparent", color: "rgba(251,244,235,0.7)",
          border: "1px solid rgba(251,244,235,0.25)",
          fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
          cursor: "pointer", fontWeight: 500, padding: "8px 18px",
        }}>Close ×</button>

        <img
          onClick={e => e.stopPropagation()}
          src={lightbox.img}
          alt={lightbox.title}
          style={{
            maxWidth: "80vw",
            maxHeight: "75vh",
            objectFit: "contain",
            display: "block",
            boxShadow: "0 40px 100px rgba(0,0,0,0.7)",
            cursor: "default",
          }}
        />

        <div onClick={e => e.stopPropagation()} style={{ marginTop: 24, textAlign: "center" }}>
          <div className="serif" style={{ fontStyle: "italic", fontSize: 22, color: "var(--ivory)" }}>{lightbox.title}</div>
          <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(251,244,235,0.45)", marginTop: 8 }}>
            {lightbox.intro.split("—")[0].trim()}
          </div>
          <button
            onClick={() => { setLightbox(null); navigate("contact"); }}
            style={{
              marginTop: 24,
              padding: "14px 36px",
              background: "var(--accent-4)",
              color: "var(--ivory)",
              border: "none",
              fontSize: 11,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              fontWeight: 500,
              cursor: "pointer",
              transition: "opacity 200ms ease",
            }}
            onMouseEnter={e => e.target.style.opacity = 0.85}
            onMouseLeave={e => e.target.style.opacity = 1}
          >
            Interested? Let's Talk →
          </button>
        </div>
      </div>,
      document.body
    )}

    <InquiryCTA navigate={navigate} />
  </>
  );
};

Object.assign(window, { ServicesPage });