/* home.jsx — Homepage */
const HomeHero = ({ navigate }) => (
  <section className="home-hero" style={{ position: "relative", minHeight: "100vh", overflow: "hidden", color: "var(--ivory)", background: "var(--plum)" }}>
    {/* California coastline scene */}
    <div style={{ position: "absolute", inset: 0, zIndex: 1 }}>
      <CoastlineScene />
    </div>
    {/* Overlay — ensures white text is legible over the warm light scene */}
    <div style={{
      position: "absolute", inset: 0,
      background: "linear-gradient(180deg, rgba(27,18,23,0.50) 0%, rgba(27,18,23,0.30) 30%, rgba(27,18,23,0.30) 65%, rgba(27,18,23,0.70) 100%)",
      zIndex: 2,
    }} />
    <div className="shell" style={{
      position: "relative", zIndex: 3,
      minHeight: "100vh",
      display: "flex", flexDirection: "column",
      paddingTop: 140, paddingBottom: 80,
    }}>
      <div style={{ marginTop: "auto", marginBottom: "auto", maxWidth: 1100 }}>
        <Reveal>
          <div className="rule-eyebrow" style={{ color: "rgba(251,244,235,0.85)", marginBottom: 28 }}>
            <span style={{ letterSpacing: "0.24em", textTransform: "uppercase", fontSize: 11, fontWeight: 500 }}>Est. Southern California</span>
          </div>
        </Reveal>
        <Reveal delay={1}>
          <h1 className="serif" style={{
            fontSize: "clamp(54px, 8.4vw, 132px)",
            color: "var(--ivory)",
            fontWeight: 300,
            letterSpacing: "-0.012em",
            lineHeight: 0.98,
            maxWidth: "14ch",
          }}>
            California-Inspired
            <br />
            <span style={{ fontStyle: "italic", fontWeight: 300 }}>Florals</span> for
            <br />
            Unforgettable Events
          </h1>
        </Reveal>
        <Reveal delay={2}>
          <p style={{
            marginTop: 36,
            maxWidth: 560,
            fontSize: "clamp(16px, 1.3vw, 19px)",
            lineHeight: 1.7,
            color: "rgba(251,244,235,0.85)",
          }}>
            Coastline Blooms designs romantic, refined floral experiences for weddings,
            private gatherings, and coastal celebrations across Southern California.
          </p>
        </Reveal>
        <Reveal delay={3}>
          <div style={{ display: "flex", gap: 16, marginTop: 44, flexWrap: "wrap" }}>
            <button className="btn btn--primary" onClick={() => navigate("contact")}>
              Inquire About Your Event <Arrow />
            </button>
            <button className="btn btn--ghost-light" onClick={() => navigate("portfolio")}>
              View Our Work
            </button>
          </div>
        </Reveal>
      </div>

      {/* Hero footer details */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        gap: 24, flexWrap: "wrap",
        color: "rgba(251,244,235,0.7)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
        fontWeight: 500,
      }}>
        <span>(01) — A California Studio</span>
        <span style={{ display: "flex", gap: 18 }}>
          <span>Weddings</span><span style={{ opacity: 0.5 }}>/</span>
          <span>Private Events</span><span style={{ opacity: 0.5 }}>/</span>
          <span>Installations</span>
        </span>
        <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          Scroll
          <span style={{ display: "inline-block", width: 1, height: 36, background: "rgba(251,244,235,0.6)" }} />
        </span>
      </div>
    </div>
  </section>
);

/* Statement */
const StatementSection = () => (
  <section className="section" style={{ background: "var(--ivory)", textAlign: "center", position: "relative", overflow: "hidden" }}>
    <FlowerField overlay="rgba(251,244,235,0.88)" />
    <div className="shell" style={{ maxWidth: 1100, margin: "0 auto", position: "relative", zIndex: 1 }}>
      <Reveal>
        <span className="eyebrow rule-eyebrow" style={{ display: "inline-flex", marginBottom: 36 }}>The Studio</span>
      </Reveal>
      <Reveal delay={1}>
        <p className="serif" style={{
          fontSize: "clamp(28px, 3.2vw, 48px)",
          fontWeight: 300,
          lineHeight: 1.25,
          color: "var(--plum)",
          letterSpacing: "-0.005em",
        }}>
          Rooted in the warmth of the California coast, our designs blend
          <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}> garden-style florals</span>,
          <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}> sunset tones</span>,
          and effortless sophistication.
        </p>
      </Reveal>
    </div>
  </section>
);

/* Services */
const SERVICES = [
  { id: "weddings", num: "01", title: "Weddings",         copy: "Reception centerpieces, head-table runners, bridal party florals, and dinner installations — tailored to your venue and palette.", img: "public/images/events/pink-garden-bouquet.jpg" },
  { id: "private",  num: "02", title: "Private Events",   copy: "Birthdays, milestone celebrations, and intimate dinners styled with garden-gathered romance and warmth.",               img: "public/images/events/bridal-table-pink-candles.jpg" },
  { id: "corporate",num: "03", title: "Corporate Events", copy: "Brand-aligned florals for galas, product launches, and executive dinners — refined, considered, and on-brand.",        img: "public/images/events/bridal-table-hydrangea-gold.jpg" },
  { id: "install",  num: "04", title: "Floral Installations", copy: "Suspended canopies, hanging clouds, archways, and immersive sculptural pieces designed for the venue.",           img: "public/images/events/cream-roses-calla-arrangement.jpg" },
  { id: "bouquets", num: "05", title: "Custom Bouquets",  copy: "Hand-tied bridal bouquets, bridesmaid arrangements, and signature personal florals composed seasonally.",              img: "public/images/events/pink-rose-vase-closeup.jpg" },
  { id: "styling",  num: "06", title: "Event Styling",    copy: "Full tablescape design including linens, candles, vessels, and the considered details that finish a setting.",         img: "public/images/events/citrus-garland-tablescape.jpg" },
];

const ServicesSection = ({ navigate }) => (
  <section className="section" style={{ background: "var(--cream)" }}>
    <div className="shell">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 80 }} className="services-head">
        <Reveal>
          <span className="eyebrow rule-eyebrow">What We Design</span>
          <h2 className="serif" style={{ marginTop: 18, maxWidth: "12ch" }}>
            Floral design, <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>thoughtfully</span> made.
          </h2>
        </Reveal>
        <Reveal delay={1}>
          <p className="body-copy" style={{ maxWidth: 480, justifySelf: "end" }}>
            Each engagement begins with an in-depth consultation, then unfolds into a fully custom proposal —
            never templated, never generic. We work with a curated list of clients each season.
          </p>
        </Reveal>
      </div>
      <div className="services-grid">
        {SERVICES.map((s, i) => (
          <Reveal key={s.id} delay={(i % 3) + 1} className="service-card">
            <div className="service-thumb" style={{ overflow: "hidden" }}>
              <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)" }} />
            </div>
            <div className="service-body">
              <span className="service-num">{s.num}</span>
              <h3 className="serif" style={{ marginTop: 12, fontSize: 30 }}>{s.title}</h3>
              <p className="body-copy" style={{ marginTop: 14, fontSize: 15 }}>{s.copy}</p>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "center", marginTop: 72 }}>
        <button className="btn btn--ghost" onClick={() => navigate("services")}>
          Explore All Services <Arrow />
        </button>
      </div>
    </div>
    <style>{`
      .services-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
      .service-card { display: flex; flex-direction: column; }
      .service-thumb { aspect-ratio: 4/5; border: 1px solid var(--hairline-soft); overflow: hidden; }
      .service-thumb:hover img { transform: scale(1.05); }
      .service-body { padding-top: 24px; }
      .service-num {
        font-family: var(--serif); font-style: italic; font-weight: 300;
        color: var(--accent-4); font-size: 18px; letter-spacing: 0.04em;
      }
      @media (max-width: 980px) { .services-grid { grid-template-columns: 1fr 1fr; } .services-head { grid-template-columns: 1fr !important; gap: 24px !important; } }
      @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }
    `}</style>
  </section>
);

/* About preview */
const AboutPreview = ({ navigate }) => (
  <section className="section" style={{ background: "var(--ivory)" }}>
    <div className="shell" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }} >
      <Reveal>
        <div style={{ position: "relative", aspectRatio: "4/5", border: "1px solid var(--hairline-soft)", overflow: "hidden" }}>
          <img src="public/images/events/pink-garden-bouquet.jpg" alt="Bridal bouquet" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          <div style={{
            position: "absolute", right: -40, bottom: -40, width: "55%", aspectRatio: "1",
            border: "1px solid var(--hairline-soft)",
            background: "var(--ivory)",
            padding: 6,
            display: "none",
          }}>
            <FloralBlock tone="blush" density="sparse" style={{ width: "100%", height: "100%" }} />
          </div>
        </div>
      </Reveal>
      <Reveal delay={1}>
        <span className="eyebrow rule-eyebrow">About the Studio</span>
        <h2 className="serif" style={{ marginTop: 22, maxWidth: "14ch" }}>
          Florals Inspired by the <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>Coast</span>
        </h2>
        <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 18 }}>
          <p className="lede">
            At Coastline Blooms, every arrangement is designed to feel personal, natural, and memorable.
          </p>
          <p className="body-copy">
            From intimate beach ceremonies to grand ballroom installations, we create florals that bring
            warmth, movement, and beauty to every setting. Our work draws from the soft Pacific light,
            the wild edges of California gardens, and an unhurried, considered approach to design.
          </p>
        </div>
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, paddingTop: 32, borderTop: "1px solid var(--hairline-soft)" }}>
          <div>
            <span className="serif" style={{ fontStyle: "italic", fontSize: 44, color: "var(--accent-4)", display: "block", lineHeight: 1 }}>9</span>
            <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--plum-soft)", marginTop: 6, display: "block" }}>Years Designing</span>
          </div>
          <div>
            <span className="serif" style={{ fontStyle: "italic", fontSize: 44, color: "var(--accent-4)", display: "block", lineHeight: 1 }}>240+</span>
            <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--plum-soft)", marginTop: 6, display: "block" }}>Events Styled</span>
          </div>
        </div>
        <div style={{ marginTop: 40 }}>
          <span className="linklink" onClick={() => navigate("about")}>Read Our Story <Arrow /></span>
        </div>
      </Reveal>
    </div>
    <style>{`
      @media (max-width: 860px) {
        section .shell[style*="grid-template-columns: 1.05fr 1fr"] { grid-template-columns: 1fr !important; gap: 48px !important; }
      }
    `}</style>
  </section>
);

/* Gallery preview */
const GALLERY_CATS = [
  { id: "install",  title: "Statement Installations",     count: "12 projects",  img: "public/images/events/boho-rattan-installation.jpg" },
  { id: "garden",   title: "Garden-Inspired Tablescapes", count: "31 projects",  img: "public/images/events/eucalyptus-garland-event.jpg" },
  { id: "coastal",  title: "Coastal Weddings",            count: "24 projects",  img: "public/images/events/garden-seating-vignette.jpg" },
  { id: "bouquets", title: "Bridal Bouquets",             count: "60+ studies",  img: "public/images/events/orange-roses-floral.jpg" },
  { id: "private",  title: "Private Celebrations",        count: "22 projects",  img: "public/images/events/bridal-table-pink-candles.jpg" },
  { id: "sunset",   title: "Sunset Receptions",           count: "16 projects",  img: "public/images/events/garden-coral-tablescape.jpg" },
];

const GallerySection = ({ navigate }) => (
  <section className="section" style={{ background: "var(--linen)" }}>
    <div className="shell">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, marginBottom: 64, flexWrap: "wrap" }}>
        <Reveal>
          <span className="eyebrow rule-eyebrow">Selected Work</span>
          <h2 className="serif" style={{ marginTop: 22, maxWidth: "16ch" }}>
            A portfolio of <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>romance</span>, light, and place.
          </h2>
        </Reveal>
        <Reveal delay={1}>
          <span className="linklink" onClick={() => navigate("portfolio")}>View Full Portfolio <Arrow /></span>
        </Reveal>
      </div>
      <div className="gallery-grid">
        {GALLERY_CATS.map((c, i) => (
          <Reveal key={c.id} delay={(i % 3) + 1} className={"gallery-card gallery-card--" + (i === 0 ? "wide" : i === 3 ? "tall" : "")}>
            <div className="gallery-viz" onClick={() => navigate("portfolio")}>
              <img src={c.img} alt={c.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 1200ms cubic-bezier(.2,.7,.3,1)" }} />
              <div className="gallery-overlay">
                <div>
                  <span className="eyebrow" style={{ color: "var(--ivory)", opacity: 0.85 }}>{c.count}</span>
                  <h3 className="serif" style={{ color: "var(--ivory)", marginTop: 8, fontSize: 28 }}>{c.title}</h3>
                </div>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "var(--ivory)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase" }}>
                  Explore <Arrow size={10} />
                </span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
    <style>{`
      .gallery-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-auto-rows: 280px;
        gap: 16px;
      }
      .gallery-card { position: relative; }
      .gallery-card--wide { grid-column: span 2; grid-row: span 2; }
      .gallery-card--tall { grid-row: span 2; }
      .gallery-viz {
        position: relative; width: 100%; height: 100%;
        overflow: hidden; cursor: pointer;
        border: 1px solid var(--hairline-soft);
      }
      .gallery-viz > img { transition: transform 1200ms cubic-bezier(.2,.7,.3,1); }
      .gallery-viz:hover > img { transform: scale(1.04); }
      .gallery-overlay {
        position: absolute; inset: 0;
        padding: 24px;
        display: flex; flex-direction: column; justify-content: space-between;
        background: linear-gradient(180deg, rgba(46,31,42,0) 50%, rgba(46,31,42,0.8) 100%);
        z-index: 4;
        opacity: 1;
        transition: background 400ms ease;
      }
      .gallery-viz:hover .gallery-overlay { background: linear-gradient(180deg, rgba(46,31,42,0.25) 0%, rgba(46,31,42,0.85) 100%); }
      @media (max-width: 980px) {
        .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
        .gallery-card--wide, .gallery-card--tall { grid-column: span 1; grid-row: span 1; }
      }
      @media (max-width: 640px) {
        .gallery-grid { grid-template-columns: 1fr; }
      }
    `}</style>
  </section>
);

/* Process */
const PROCESS_STEPS = [
  { num: "01", title: "Consultation", copy: "We begin with a conversation — your venue, your vision, the season, and the feeling you want guests to remember." },
  { num: "02", title: "Floral Vision & Proposal", copy: "A custom proposal arrives within two weeks: palette, varieties, vessel direction, and a clear scope and investment." },
  { num: "03", title: "Design Refinement", copy: "We refine together. Sample arrangements, finalize palette, lock the moodboard, and align every detail." },
  { num: "04", title: "Event Day Installation", copy: "Our team arrives early, installs with care, and stays through the moment to ensure every stem holds its place." },
];

const ProcessSection = () => (
  <section className="section" style={{ background: "var(--ivory)", position: "relative", overflow: "hidden" }}>
    <FlowerField overlay="rgba(251,244,235,0.85)" />
    <div className="shell" style={{ position: "relative", zIndex: 1 }}>
      <div style={{ textAlign: "center", marginBottom: 80 }}>
        <Reveal><span className="eyebrow rule-eyebrow">The Approach</span></Reveal>
        <Reveal delay={1}>
          <h2 className="serif" style={{ marginTop: 22 }}>
            Our Design <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>Process</span>
          </h2>
        </Reveal>
      </div>
      <div className="process-grid">
        {PROCESS_STEPS.map((s, i) => (
          <Reveal key={s.num} delay={(i % 4) + 1} className="process-step">
            <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginBottom: 24 }}>
              <span className="numbered">{s.num}</span>
              <span style={{ flex: 1, height: 1, background: "var(--hairline-soft)", marginBottom: 8 }} />
            </div>
            <h3 className="serif" style={{ fontSize: 28 }}>{s.title}</h3>
            <p className="body-copy" style={{ marginTop: 16, fontSize: 15 }}>{s.copy}</p>
          </Reveal>
        ))}
      </div>
    </div>
    <style>{`
      .process-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 48px;
      }
      @media (max-width: 980px) { .process-grid { grid-template-columns: 1fr 1fr; gap: 56px 36px; } }
      @media (max-width: 640px) { .process-grid { grid-template-columns: 1fr; } }
    `}</style>
  </section>
);

/* Testimonials */
const TESTIMONIALS = [
  {
    quote: "Coastline Blooms completely transformed our wedding space. The florals felt romantic, elevated, and perfectly matched the California sunset palette we wanted.",
    name: "Sienna & Marcus Hale",
    detail: "Beachside wedding — Malibu, June 2025",
  },
  {
    quote: "Sophie understood our vision before we'd fully articulated it. The garden-style installations brought our terrace dinner to life in a way photos still don't do justice.",
    name: "Eleanor Whitfield",
    detail: "Private 50th — Montecito, September 2024",
  },
  {
    quote: "We hired Coastline Blooms for our brand launch and were stunned. Considered, on-brand, and quietly luxurious — exactly the tone we wanted to set.",
    name: "Aanya Patel, Maison Lune",
    detail: "Brand launch — Santa Monica, March 2025",
  },
];

const TestimonialsSection = () => {
  const [active, setActive] = useState(0);
  const t = TESTIMONIALS[active];
  return (
    <section className="section" style={{ background: "var(--plum)", color: "var(--ivory)", position: "relative", overflow: "hidden" }}>
      {/* atmospheric backdrop */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.18, zIndex: 0 }}>
        <SunsetSky palms={2} intensity="deep" style={{ width: "100%", height: "100%" }} sun={false} />
      </div>
      <div className="shell" style={{ position: "relative", zIndex: 1, maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 48 }}>
          <Reveal>
            <span className="eyebrow rule-eyebrow" style={{ color: "var(--accent-1)" }}>In Their Words</span>
          </Reveal>
          <Reveal delay={1}>
            <blockquote style={{ margin: 0 }}>
              <p className="serif" style={{
                fontSize: "clamp(28px, 3.6vw, 52px)",
                fontWeight: 300,
                lineHeight: 1.22,
                letterSpacing: "-0.005em",
                color: "var(--ivory)",
              }}>
                <span style={{ fontStyle: "italic", color: "var(--accent-1)", fontSize: "1.4em", lineHeight: 0, verticalAlign: "-0.2em", marginRight: 6 }}>“</span>
                {t.quote}
              </p>
              <footer style={{ marginTop: 40, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 18 }}>
                <div>
                  <div className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "var(--ivory)" }}>{t.name}</div>
                  <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(251,244,235,0.6)", marginTop: 6 }}>{t.detail}</div>
                </div>
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  {TESTIMONIALS.map((_, i) => (
                    <button key={i} onClick={() => setActive(i)} aria-label={"Testimonial " + (i + 1)}
                      style={{
                        background: "transparent", border: 0, cursor: "pointer", padding: 6,
                      }}>
                      <span style={{
                        display: "inline-block",
                        width: i === active ? 28 : 8, height: 1,
                        background: i === active ? "var(--accent-1)" : "rgba(251,244,235,0.4)",
                        transition: "all 280ms ease",
                      }} />
                    </button>
                  ))}
                </div>
              </footer>
            </blockquote>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* CTA Strip */
const InquiryCTA = ({ navigate }) => (
  <section className="section-tight" style={{ background: "var(--cream)", position: "relative", overflow: "hidden" }}>
    <FlowerField overlay="rgba(245,237,224,0.87)" />
    <div className="shell" style={{
      display: "grid", gridTemplateColumns: "1.4fr auto", gap: 48, alignItems: "center",
      position: "relative", zIndex: 1,
    }}>
      <Reveal>
        <span className="eyebrow rule-eyebrow">Begin a Conversation</span>
        <h2 className="serif" style={{ marginTop: 22, fontSize: "clamp(36px, 4.4vw, 64px)", maxWidth: "20ch" }}>
          Let's design florals that feel <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>entirely yours</span>.
        </h2>
      </Reveal>
      <Reveal delay={1} style={{ alignSelf: "end" }}>
        <button className="btn btn--primary" onClick={() => navigate("contact")}>
          Start Your Floral Proposal <Arrow />
        </button>
      </Reveal>
    </div>
    <style>{`
      @media (max-width: 760px) {
        section.section-tight .shell[style*="grid-template-columns: 1.4fr auto"] { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

const HomePage = ({ navigate }) => (
  <>
    <HomeHero navigate={navigate} />
    <StatementSection />
    <hr className="divider" />
    <ServicesSection navigate={navigate} />
    <AboutPreview navigate={navigate} />
    <GallerySection navigate={navigate} />
    <ProcessSection />
    <TestimonialsSection />
    <InquiryCTA navigate={navigate} />
  </>
);

Object.assign(window, { HomePage });