/* about.jsx — About page */

const AboutPage = ({ navigate }) => (
  <>
    <section style={{ background: "var(--ivory)", paddingTop: 200, paddingBottom: 100 }}>
      <div className="shell">
        <Reveal><span className="eyebrow rule-eyebrow">04 — About</span></Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, marginTop: 36, alignItems: "end" }} className="about-head">
          <Reveal delay={1}>
            <h1 className="serif" style={{ fontSize: "clamp(48px, 7vw, 116px)", fontWeight: 300, letterSpacing: "-0.012em", lineHeight: 0.98 }}>
              Florals inspired by the <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>coast</span>.
            </h1>
          </Reveal>
          <Reveal delay={2}>
            <p className="lede">
              Founded in 2017 by Martha Escobedo, Coastline Blooms is a Santa Monica–based studio designing
              romantic, garden-style florals for life's most considered occasions.
            </p>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Wide hero image */}
    <section style={{ background: "var(--ivory)" }}>
      <div className="shell">
        <Reveal>
          <div style={{ aspectRatio: "21/9", border: "1px solid var(--hairline-soft)", overflow: "hidden" }}>
            <img src="public/images/events/boho-rattan-installation.jpg" alt="Coastline Blooms event" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block" }} />
          </div>
        </Reveal>
      </div>
    </section>

    {/* Story */}
    <section className="section" style={{ background: "var(--ivory)" }}>
      <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="about-story">
        <Reveal>
          <span className="eyebrow rule-eyebrow">Our Story</span>
        </Reveal>
        <Reveal delay={1}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <p className="serif" style={{ fontSize: "clamp(24px, 2.6vw, 36px)", lineHeight: 1.3, fontWeight: 300 }}>
              Coastline Blooms began the way most thoughtful things do — slowly, in a small studio off
              Pacific Coast Highway, with a handful of clients who wanted florals that felt like
              <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}> their place </span>
              and their evening.
            </p>
            <p className="body-copy">
              Nine years on, that ethos hasn't shifted. We work with a curated list of clients each season —
              roughly thirty events a year — because every project is composed by hand, in our studio, with
              flowers sourced as locally and seasonally as the calendar allows.
            </p>
            <p className="body-copy">
              Our aesthetic draws from California's gardens and its light: the warm wash of late afternoon,
              the faded pinks of a coastal evening, the muted greens of olive and eucalyptus. We design with
              movement and asymmetry, never stiffness; with restraint, never minimalism for its own sake.
            </p>
          </div>
        </Reveal>
      </div>
    </section>

    {/* Values strip */}
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="shell">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 60 }} className="values-grid">
          {[
            { num: "I.", title: "Locally sourced", copy: "We work with California growers and our own cutting garden whenever possible — what's in season shapes the design." },
            { num: "II.", title: "Bespoke, never templated", copy: "Every proposal is custom. We do not work from packages, palettes, or repeatable looks." },
            { num: "III.", title: "Considered to the last stem", copy: "From rigging to ribbon to the final removal, we sweat the details so the day feels effortless." },
          ].map((v, i) => (
            <Reveal key={i} delay={i + 1}>
              <span className="serif" style={{ fontStyle: "italic", color: "var(--accent-4)", fontSize: 28 }}>{v.num}</span>
              <h3 className="serif" style={{ marginTop: 14, fontSize: 28 }}>{v.title}</h3>
              <p className="body-copy" style={{ marginTop: 14, fontSize: 15 }}>{v.copy}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Founder + team */}
    <section className="section" style={{ background: "var(--ivory)" }}>
      <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }} className="founder-grid">
        <Reveal>
          <div style={{ aspectRatio: "4/5", border: "1px solid var(--hairline-soft)", overflow: "hidden" }}>
            <img src="public/images/events/citrus-centerpiece-roses.jpg" alt="Martha Escobedo — Founder" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </Reveal>
        <Reveal delay={1}>
          <span className="eyebrow rule-eyebrow">The Founder</span>
          <h2 className="serif" style={{ marginTop: 22, fontSize: "clamp(36px, 4vw, 56px)" }}>
            Martha <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>Escobedo</span>
          </h2>
          <p className="lede" style={{ marginTop: 24 }}>
            A Southern California floral designer with a passion for romantic, garden-style arrangements,
            Martha founded Coastline Blooms to bring beauty and intention to life's most meaningful celebrations.
          </p>
          <p className="body-copy" style={{ marginTop: 16 }}>
            Serving Los Angeles, San Diego, and the Inland Empire, Martha and her team craft every arrangement
            by hand — drawing from seasonal blooms, coastal light, and a deep love for the California landscape.
            Each event is treated as a singular creative work, never repeated.
          </p>
        </Reveal>
      </div>
    </section>

    <InquiryCTA navigate={navigate} />

    <style>{`
      @media (max-width: 860px) {
        section .shell.about-head, section .shell.about-story, section .shell.founder-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        .values-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      }
    `}</style>
  </>
);

Object.assign(window, { AboutPage });
