// Mobile Home page sections.
// Exposes: Hero, GallerySection, ServicesSection, ProofSection, TrustedBySection

const { useState: hS, useEffect: hE, useRef: hR } = React;

// ─────────────────────────────────────────────
// HERO — three variants
// ─────────────────────────────────────────────
function Hero({ onInquire, variant = "editorial", ctaPrimary, ctaPromise }) {
  if (variant === "stacked") return <HeroStacked onInquire={onInquire} ctaPrimary={ctaPrimary} ctaPromise={ctaPromise} />;
  if (variant === "overlay") return <HeroOverlay  onInquire={onInquire} ctaPrimary={ctaPrimary} ctaPromise={ctaPromise} />;
  return <HeroEditorial onInquire={onInquire} ctaPrimary={ctaPrimary} ctaPromise={ctaPromise} />;
}

// Editorial: desktop's spirit. Serif statement up top, photo card below,
// caption floats off the photo. Like reading a magazine.
function HeroEditorial({ onInquire, ctaPrimary, ctaPromise }) {
  return (
    <section style={{ paddingTop: "calc(var(--nav-h) + 32px)", paddingBottom: 48, background: "var(--bone)" }}>
      <div className="container">
        <LineEyebrow style={{ marginBottom: 22 }}>
          StoneGuard® Specialists · NY · NJ · PA
        </LineEyebrow>
        <h1 className="serif" style={{
          fontSize: 48, lineHeight: 1.02, letterSpacing: "-0.02em", marginBottom: 22,
        }}>
          <div><WordReveal text="Stone is beautiful." /></div>
          <div>
            <WordReveal text="It's also" delay={220} />{" "}
            <span style={{ color: "var(--maroon)" }}>
              <Typewriter words={["vulnerable.", "delicate.", "fragile."]} startDelay={1200} typeSpeed={95} />
            </span>
          </div>
        </h1>
        <Reveal delay={500}>
          <p className="body" style={{ marginBottom: 26 }}>{ctaPromise}</p>
        </Reveal>
      </div>

      <Reveal delay={300} y={14}>
        <div style={{ position: "relative", margin: "0 var(--gutter)" }}>
          <div className="img-wrap" style={{ aspectRatio: "4/5", boxShadow: "0 20px 40px -16px rgba(0,0,0,0.25)" }}>
            <img src="../assets/cover-stone-beautiful.png" alt="Honed black stone countertop in a dark kitchen" />
            <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.12)" }}/>
          </div>
          <div style={{
            position: "absolute", right: 14, bottom: -22,
            background: "var(--bone)", border: "1px solid var(--line)",
            padding: "14px 16px", width: 220,
            boxShadow: "0 14px 30px -10px rgba(0,0,0,0.15)",
          }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 8 }}>
              Shown: unprotected stone
            </div>
            <div className="serif" style={{ fontSize: 15, lineHeight: 1.3, letterSpacing: "-0.01em" }}>
              Porous stone etches, stains, and dulls.
            </div>
          </div>
        </div>
      </Reveal>

      <div className="container" style={{ marginTop: 50 }}>
        <Reveal delay={650}>
          <button onClick={onInquire} className="btn btn-primary btn-block" style={{ marginBottom: 10 }}>
            {ctaPrimary}
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/></svg>
          </button>
          <a href="/mobile/work" className="btn btn-ghost btn-block">See the work</a>
        </Reveal>
        <Reveal delay={780}>
          <div className="mono" style={{
            marginTop: 22, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--ink-2)", display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: 99, background: "var(--maroon)",
              animation: "hero-dot-pulse 2.2s cubic-bezier(.4,.0,.6,1) infinite",
            }}/>
            Booking one month out
          </div>
          <style>{`
            @keyframes hero-dot-pulse {
              0%,100% { opacity: 0.5; box-shadow: 0 0 0 0 rgba(139,115,85,0); }
              50% { opacity: 1; box-shadow: 0 0 0 5px rgba(139,115,85,0.18); }
            }
          `}</style>
        </Reveal>
      </div>
    </section>
  );
}

// Stacked: full-bleed photo first, statement + CTA below. Most app-like.
function HeroStacked({ onInquire, ctaPrimary, ctaPromise }) {
  return (
    <section style={{ paddingTop: "var(--nav-h)", paddingBottom: 48, background: "var(--bone)" }}>
      <Reveal y={0}>
        <div className="img-wrap" style={{ height: "62vh", minHeight: 380, maxHeight: 520, position: "relative" }}>
          <img src="../assets/cover-stone-beautiful.png" alt="Honed black stone countertop" />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(10,9,8,0.4) 0%, transparent 50%)" }}/>
          <div style={{ position: "absolute", left: 20, bottom: 18, right: 20 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,242,237,0.7)", marginBottom: 6 }}>
              Shown — unprotected
            </div>
            <div className="serif" style={{ fontSize: 18, lineHeight: 1.25, color: "var(--bone)" }}>
              Porous stone etches, stains, and dulls.
            </div>
          </div>
        </div>
      </Reveal>
      <div className="container" style={{ paddingTop: 32 }}>
        <LineEyebrow style={{ marginBottom: 18 }}>StoneGuard® Specialists · NY · NJ · PA</LineEyebrow>
        <h1 className="serif" style={{ fontSize: 44, lineHeight: 1.02, letterSpacing: "-0.02em", marginBottom: 18 }}>
          <div><WordReveal text="Stone is beautiful." /></div>
          <div>
            <WordReveal text="It's also" delay={200} />{" "}
            <span style={{ color: "var(--maroon)" }}>
              <Typewriter words={["vulnerable.", "delicate.", "fragile."]} startDelay={1100} typeSpeed={95} />
            </span>
          </div>
        </h1>
        <Reveal delay={400}>
          <p className="body" style={{ marginBottom: 22 }}>{ctaPromise}</p>
          <button onClick={onInquire} className="btn btn-primary btn-block" style={{ marginBottom: 10 }}>
            {ctaPrimary}
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/></svg>
          </button>
          <a href="/mobile/work" className="btn btn-ghost btn-block">See the work</a>
        </Reveal>
      </div>
    </section>
  );
}

// Overlay: full-bleed photo BG with serif statement overlaid. Most cinematic.
function HeroOverlay({ onInquire, ctaPrimary, ctaPromise }) {
  return (
    <section style={{
      paddingTop: "var(--nav-h)",
      position: "relative", background: "var(--black)", color: "var(--bone)",
    }}>
      <div style={{ position: "relative", height: "100vh", minHeight: 620, maxHeight: 820 }}>
        <img src="../assets/cover-stone-beautiful.png" alt="Honed black stone" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
        }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.1) 35%, rgba(10,9,8,0.85) 100%)" }}/>
        <div className="container" style={{ position: "relative", paddingTop: 28, height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 36 }}>
          <LineEyebrow style={{ color: "rgba(245,242,237,0.75)", marginBottom: 18 }}>
            StoneGuard® Specialists · NY · NJ · PA
          </LineEyebrow>
          <h1 className="serif" style={{ fontSize: 48, lineHeight: 1.0, letterSpacing: "-0.02em", marginBottom: 18, color: "var(--bone)" }}>
            <div><WordReveal text="Stone is beautiful." /></div>
            <div>
              <WordReveal text="It's also" delay={220} />{" "}
              <span style={{ color: "var(--bronze)" }}>
                <Typewriter words={["vulnerable.", "delicate.", "fragile."]} startDelay={1200} typeSpeed={95} />
              </span>
            </div>
          </h1>
          <Reveal delay={500}>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: "rgba(245,242,237,0.75)", marginBottom: 22, maxWidth: 380 }}>
              {ctaPromise}
            </p>
            <button onClick={onInquire} className="btn btn-light btn-block" style={{ marginBottom: 10 }}>
              {ctaPrimary}
              <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/></svg>
            </button>
            <a href="/mobile/work" className="btn btn-block" style={{ border: "1px solid rgba(245,242,237,0.25)", color: "var(--bone)" }}>See the work</a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// GALLERY — dark, swipe carousel
// ─────────────────────────────────────────────
function GallerySection() {
  const items = [
    { img: "../assets/work-satin-1.png",       label: "Penthouse · Manhattan",      stone: "Honed black marble" },
    { img: "../assets/hero-5313.jpg",          label: "Coastal residence",          stone: "Polished Calacatta" },
    { img: "../assets/work-clear-1.jpg",       label: "Open kitchen · New Jersey",  stone: "Polished Carrara" },
    { img: "../assets/work-clear-6.jpg",       label: "Chandelier kitchen · Pennsylvania", stone: "Polished Carrara" },
    { img: "../assets/work-black-kitchen.jpg", label: "Forest-view kitchen · New York", stone: "Honed marble" },
    { img: "../assets/work-white-waterfall.jpg", label: "Waterfall island · New Jersey", stone: "Honed quartz" },
    { img: "../assets/work-navy-original.jpg", label: "Navy kitchen · Brooklyn",    stone: "Polished quartz" },
  ];

  return (
    <section id="work" style={{ background: "var(--black)", color: "var(--bone)", padding: "70px 0 60px" }}>
      <div className="container" style={{ marginBottom: 26 }}>
        <Reveal>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(245,242,237,0.5)", marginBottom: 18 }}>
            <span style={{ display: "inline-block", width: 18, height: 1, background: "currentColor", verticalAlign: "middle", marginRight: 8, opacity: 0.7 }}/>
            01 · Our Work
          </div>
        </Reveal>
        <h2 className="serif" style={{ fontSize: 48, lineHeight: 0.96, letterSpacing: "-0.022em" }}>
          <Reveal>Stone we've</Reveal>
          <Reveal delay={120}>
            <span style={{ color: "var(--bronze)", fontStyle: "italic", display: "block" }}>kept brand new.</span>
          </Reveal>
        </h2>
        <Reveal delay={240}>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: "rgba(245,242,237,0.65)", marginTop: 18, maxWidth: 360 }}>
            A quiet record of the homes we've worked in — every surface here still flawless.
          </p>
        </Reveal>
      </div>

      <SwipeCarousel
        items={items}
        width="78%"
        renderItem={(it, i, active) => (
          <figure>
            <div className="img-wrap" style={{ aspectRatio: "9/16", background: "#14110e", filter: active ? "brightness(1)" : "brightness(0.7)", transition: "filter .4s" }}>
              <img src={it.img} alt={it.label} />
            </div>
            <figcaption style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div>
                <div className="serif" style={{ fontSize: 17, letterSpacing: "-0.01em" }}>{it.stone}</div>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "rgba(245,242,237,0.5)", textTransform: "uppercase", marginTop: 4 }}>
                  {it.label}
                </div>
              </div>
              <div className="mono" style={{ fontSize: 10, color: "rgba(245,242,237,0.4)", fontVariantNumeric: "tabular-nums" }}>
                {String(i + 1).padStart(2, "0")}
              </div>
            </figcaption>
          </figure>
        )}
      />

      {/* Eleonora featured spot (compact) */}
      <div className="container" style={{ marginTop: 60 }}>
        <Reveal>
          <div className="img-wrap" style={{ aspectRatio: "9/16", position: "relative", marginBottom: 24 }}>
            <img src="../assets/eleonora-red.jpg" alt="Eleonora Srugo" />
            <div style={{
              position: "absolute", top: 14, left: 14,
              padding: "5px 9px",
              background: "rgba(10,9,8,0.7)", color: "var(--bone)",
              backdropFilter: "blur(6px)",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
              letterSpacing: "0.14em", textTransform: "uppercase",
              display: "flex", alignItems: "center", gap: 7,
            }}>
              <span style={{ width: 4, height: 4, background: "#E50914", borderRadius: 99 }}/>
              Netflix · Selling the City
            </div>
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(245,242,237,0.5)", marginBottom: 14 }}>
            Featured Client · In her words
          </div>
          <blockquote className="serif" style={{
            fontSize: 26, lineHeight: 1.2, letterSpacing: "-0.015em",
            marginBottom: 24, color: "var(--bone)",
          }}>
            <span style={{ color: "var(--bronze)" }}>"</span>When my clients buy a $10M home, the last thing they want to worry about is a ring from a wine glass. M&amp;T is the only team I trust with stone at this level.<span style={{ color: "var(--bronze)" }}>"</span>
          </blockquote>
          <div style={{ marginBottom: 22 }}>
            <div className="serif" style={{ fontSize: 18, letterSpacing: "-0.01em" }}>Eleonora Srugo</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "rgba(245,242,237,0.55)", textTransform: "uppercase", marginTop: 4 }}>
              Top 10 Agent, Douglas Elliman
            </div>
          </div>
          <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("watch-testimonial", { detail: { name: "Eleonora Srugo" } })); }} className="btn btn-block" style={{ border: "1px solid rgba(232,212,168,0.45)", color: "var(--bone)", fontFamily: "'JetBrains Mono',monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
            <span style={{ width: 24, height: 24, borderRadius: "50%", border: "1px solid currentColor", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="8" height="10" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0L10 6L0 12V0Z"/></svg>
            </span>
            Watch her testimonial
          </a>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// SERVICES — two stacked cards
// ─────────────────────────────────────────────
function ServicesSection({ onInquire }) {
  const services = [
    {
      no: "01",
      name: "StoneGuard® Clear",
      sub: "Polished finish",
      desc: "A virtually invisible film that bonds to your stone. Stain-proof, etch-proof, heat-resistant. Your marble looks identical.",
      bullets: ["Polished & glossy surfaces", "Stain Proof", "Etch Proof", "Lifetime Warranty"],
      img: "../assets/work-clear-6.jpg",
    },
    {
      no: "02",
      name: "StoneGuard® Satin",
      sub: "Honed finish",
      desc: "Engineered for honed stone. Protects the full surface, preserves the tactile softness, and adds depth that brings out the stone's natural color.",
      bullets: ["Honed surfaces", "Matches matte finish perfectly", "Food-safe & non-yellowing", "Enhances depth and colors"],
      img: "../assets/work-satin-2.png",
    },
  ];
  return (
    <section id="services" style={{ padding: "70px 0", background: "var(--bone)" }}>
      <div className="container">
        <Reveal>
          <LineEyebrow style={{ marginBottom: 18 }}>02 · Services</LineEyebrow>
          <h2 className="serif" style={{ fontSize: 36, lineHeight: 1.05, letterSpacing: "-0.02em", marginBottom: 24 }}>
            Two finishes. One outcome: <em style={{ color: "var(--maroon)" }}>a countertop that stays like the day it was installed.</em>
          </h2>
        </Reveal>
      </div>

      <div className="container" style={{ display: "grid", gap: 22 }}>
        {services.map((s, i) => (
          <Reveal key={i} delay={i * 100}>
            <article className="card">
              <div className="img-wrap" style={{ aspectRatio: "5/4" }}>
                <img src={s.img} alt={s.name} />
              </div>
              <div style={{ padding: 22 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--mute)", marginBottom: 12, textTransform: "uppercase" }}>
                  {s.no} · {s.sub}
                </div>
                <h3 className="serif" style={{ fontSize: 28, letterSpacing: "-0.015em", lineHeight: 1.05, marginBottom: 12 }}>{s.name}</h3>
                <p className="body" style={{ fontSize: 14, marginBottom: 18 }}>{s.desc}</p>
                <ul style={{ listStyle: "none", marginBottom: 20, borderTop: "1px solid var(--line)" }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} style={{
                      padding: "11px 0", borderBottom: "1px solid var(--line)",
                      display: "flex", alignItems: "center", gap: 10, fontSize: 13,
                    }}>
                      <svg width="11" height="11" viewBox="0 0 12 12"><path d="M2 6l3 3 5-7" stroke="var(--maroon)" strokeWidth="1.5" fill="none"/></svg>
                      {b}
                    </li>
                  ))}
                </ul>
                <button onClick={onInquire} className="btn btn-ghost btn-block">
                  Get a quote for {s.name}
                  <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M1 6h10m0 0L6 1m5 5L6 11" stroke="currentColor" strokeWidth="1.2"/></svg>
                </button>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// PROOF — testimonials swipe carousel
// ─────────────────────────────────────────────
function ProofSection() {
  const reviews = [
    { quote: "I contacted both StoneGuard and a competitor's to protect our natural stone vanity tops in our 3 bathrooms and countertops and backsplash in our large kitchen. StoneGuard NYC reps, M&T Surface Protectors, were extremely timely, professional, and thorough.", name: "Ned Boyd", role: "Homeowner · Westchester, NY", hasVideo: true },
    { quote: "We have three young kids and white marble — a combination everyone warned us against. Michael and his team made it work. Six months in, not a single stain.", name: "Meera Patel", role: "Homeowner · Greenwich, CT", hasVideo: true },
    { quote: "I would highly recommend M&T! They were extremely professional, thorough in their work, and very neat and organized. The quality of the surface protection exceeded our expectations.", name: "Fab", role: "Homeowner · 2 Reviews" },
    { quote: "I had the pleasure of having M&T Surface Protectors treat my marble center island today and I can't say enough about what an amazing job they did. They were on time, neat, kind, organized and very professional.", name: "Yvonne Hardoon", role: "Homeowner · 4 Reviews · 2 Photos" },
    { quote: "I can't recommend Michael and his team enough. I'm about 2 months in to having them seal my kitchen counter, and I'm grateful to be stress free about it getting stained now.", name: "Jeremy Cohen", role: "Homeowner · Local Guide" },
    { quote: "Excellent customer service. I have StoneGuard satin in my kitchen and it is excellent! It does exactly what it's supposed to do — protects my counter from stains and scratches!", name: "Celeste C.", role: "Homeowner · 4 Reviews · 6 Photos" },
    { quote: "I'm really happy with the results of the work that M&T did in our kitchen. Professional, fast and honest! Would one hundred percent recommend them.", name: "Adela Mou", role: "Local Guide · 93 Reviews" },
    { quote: "Excellent service and a top quality job. Our marble kitchen table required a lot of maintenance to maintain the shine. The applied film is beautiful and the table looks better than new.", name: "Peter Weiss", role: "Local Guide · 15 Reviews" },
  ];

  return (
    <section id="reviews" style={{ padding: "70px 0 60px", background: "var(--bone)" }}>
      <div className="container">
        <Reveal>
          <LineEyebrow style={{ marginBottom: 16 }}>03 · In their words</LineEyebrow>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
            <Stars n={5} />
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--mute)", textTransform: "uppercase" }}>
            5-Star Google · 5-Star Houzz
          </div>
        </Reveal>
      </div>

      <div style={{ marginTop: 28 }}>
        <SwipeCarousel
          items={reviews}
          width="86%"
          renderItem={(r) => (
            <div className="card" style={{ padding: 22, minHeight: 320, display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 99,
                  background: "var(--bone-2)", display: "grid", placeItems: "center",
                  fontFamily: "'Instrument Serif',serif", fontSize: 16, color: "var(--ink-2)",
                  flexShrink: 0,
                }}>{r.name[0]}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{r.name}</div>
                  <div className="mono" style={{ fontSize: 9, color: "var(--mute)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 2 }}>
                    {r.role}
                  </div>
                </div>
                {r.hasVideo && (
                  <button
                    type="button"
                    aria-label={`Watch ${r.name}'s testimonial`}
                    onClick={() => window.dispatchEvent(new CustomEvent("watch-testimonial", { detail: { name: r.name } }))}
                    style={{ width: 28, height: 28, borderRadius: "50%", border: "1px solid var(--maroon)", background: "transparent", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--maroon)", flexShrink: 0, cursor: "pointer", padding: 0 }}
                  >
                    <svg width="9" height="11" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0L10 6L0 12V0Z"/></svg>
                  </button>
                )}
              </div>
              <blockquote className="serif" style={{ fontSize: 19, lineHeight: 1.28, letterSpacing: "-0.01em", margin: 0, flex: 1 }}>
                <span style={{ color: "var(--maroon)" }}>"</span>{r.quote}<span style={{ color: "var(--maroon)" }}>"</span>
              </blockquote>
            </div>
          )}
        />
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// TRUSTED BY — centered logos
// ─────────────────────────────────────────────
function TrustedBySection() {
  const divider = <span style={{ width: 1, height: 30, background: "var(--line)", flex: "0 0 auto" }}/>;
  return (
    <section style={{ padding: "56px 0", background: "var(--cream)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <Reveal>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 26 }}>
            Trusted by
          </div>
          {/* Single row: two logos + the Eleonora & Co. lockup (matches desktop,
              which uses text here rather than the thin Elliman wordmark). */}
          <div style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 16 }}>
            <img src="../assets/logo-granite-place.webp" alt="The Granite Place" style={{ height: 34, width: "auto", flex: "0 0 auto", filter: "grayscale(1)", opacity: 0.7 }}/>
            {divider}
            <img src="../assets/logo-frato.svg" alt="Frato" style={{ height: 16, width: "auto", flex: "0 0 auto", filter: "grayscale(1)", opacity: 0.7 }}/>
            {divider}
            <div style={{ textAlign: "center", flex: "0 0 auto" }}>
              <div className="serif" style={{ fontSize: 15, letterSpacing: "-0.01em", lineHeight: 1, color: "var(--ink)", opacity: 0.85 }}>
                Eleonora <em>&amp; Co.</em>
              </div>
              <div className="mono" style={{ fontSize: 7, letterSpacing: "0.14em", color: "var(--mute)", textTransform: "uppercase", marginTop: 5 }}>
                Luxury Real Estate
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, GallerySection, ServicesSection, ProofSection, TrustedBySection });
