// Featured Testimonial + Trusted By logo row

// ----- Featured Testimonial: Eleonora Srugo -----
function FeaturedTestimonial() {
  return (
    <section style={{
      background: "var(--black)",
      color: "var(--bone)",
      paddingTop: 140, paddingBottom: 140,
      position: "relative",
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.3fr",
          gap: 80, alignItems: "center",
        }} className="ft-grid">
          <Reveal>
            <div style={{ position: "relative" }}>
              <div style={{ overflow: "hidden", position: "relative" }}>
                <img src="assets/eleonora-red.jpg" alt="Eleonora Srugo" style={{
                  width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block",
                  filter: "saturate(0.9) contrast(1.02)",
                }}/>
                <div style={{
                  position: "absolute", top: 20, left: 20,
                  padding: "6px 10px",
                  background: "rgba(10,9,8,0.6)", color: "var(--bone)",
                  backdropFilter: "blur(6px)",
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                  letterSpacing: "0.14em", textTransform: "uppercase",
                }}>
                  As seen on Netflix · Selling the City
                </div>
              </div>
            </div>
          </Reveal>

          <div>
            <LineEyebrow style={{ marginBottom: 32, color: "rgba(245,242,237,0.5)" }}>
              Featured Client
            </LineEyebrow>
            <Reveal delay={120}>
              <blockquote className="serif" style={{
                fontSize: "clamp(32px, 3.4vw, 48px)",
                lineHeight: 1.18,
                letterSpacing: "-0.015em",
                margin: 0,
                marginBottom: 44,
                color: "var(--bone)",
                textWrap: "pretty",
              }}>
                "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."
              </blockquote>
            </Reveal>
            <Reveal delay={240}>
              <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
                <div>
                  <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.01em", marginBottom: 4 }}>
                    Eleonora Srugo
                  </div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(245,242,237,0.55)", textTransform: "uppercase" }}>
                    Top 10 Agent, Douglas Elliman
                  </div>
                </div>
                <div style={{ width: 1, height: 36, background: "rgba(245,242,237,0.2)" }}/>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(245,242,237,0.55)", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 6, height: 6, background: "#E50914", borderRadius: 99 }}/>
                  Netflix · Selling the City
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .ft-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ----- Trusted By: editorial centered layout -----
function TrustedBy() {
  const logos = [
    { src: "assets/logo-granite-place.webp", alt: "The Granite Place", h: 56 },
    { src: "assets/logo-frato.svg",          alt: "Frato",             h: 30 },
  ];
  return (
    <section style={{
      paddingTop: 120, paddingBottom: 120,
      borderTop: "1px solid var(--line)",
      background: "var(--bone)",
      position: "relative",
    }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 72px" }}>
          <LineEyebrow style={{ justifyContent: "center", marginBottom: 28 }}>
            Chosen by the best in the industry
          </LineEyebrow>
          <h2 className="serif" style={{
            fontSize: "clamp(36px, 4.4vw, 64px)",
            lineHeight: 1.05,
            letterSpacing: "-0.02em",
            textWrap: "pretty",
          }}>
            The names that shape<br/>
            <em>New York interiors</em> trust us<br/>
            with the stone inside them.
          </h2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr auto 1fr",
          alignItems: "center",
          gap: 0,
          padding: "56px 0",
          borderTop: "1px solid var(--line)",
          borderBottom: "1px solid var(--line)",
        }} className="tb-row">
          <div style={{ display: "flex", justifyContent: "center" }}>
            <img src={logos[0].src} alt={logos[0].alt} style={{
              height: logos[0].h, width: "auto",
              opacity: 0.9,
              transition: "opacity .3s ease",
            }}
            onMouseEnter={e => e.currentTarget.style.opacity = "1"}
            onMouseLeave={e => e.currentTarget.style.opacity = "0.9"}
            />
          </div>
          <div style={{ width: 1, height: 48, background: "var(--line)" }} className="tb-divider"/>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <img src={logos[1].src} alt={logos[1].alt} style={{
              height: logos[1].h, width: "auto",
              opacity: 0.9,
              filter: "brightness(0)",
              transition: "opacity .3s ease",
            }}
            onMouseEnter={e => e.currentTarget.style.opacity = "1"}
            onMouseLeave={e => e.currentTarget.style.opacity = "0.9"}
            />
          </div>
          <div style={{ width: 1, height: 48, background: "var(--line)" }} className="tb-divider"/>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <div className="serif" style={{ fontSize: 26, letterSpacing: "-0.01em", lineHeight: 1 }}>
              Eleonora <em>&amp; Co.</em>
            </div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--mute)", textTransform: "uppercase" }}>
              Luxury Real Estate
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 44, textAlign: "center",
          display: "flex", alignItems: "center", justifyContent: "center",
          gap: 14, flexWrap: "wrap",
        }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--mute)", textTransform: "uppercase" }}>
            Plus 40+ architects, designers &amp; developers across NY · NJ · PA
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px){
          .tb-row {
            grid-template-columns: 1fr !important;
            gap: 40px !important;
          }
          .tb-divider { display: none !important; }
        }
      `}</style>
    </section>
  );
}