// Large Banner

function Banner() {
  return (
    <section style={{ padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <Reveal>
          <div style={{
            position: "relative",
            borderRadius: 32,
            padding: "clamp(48px, 8vw, 120px) clamp(32px, 6vw, 96px)",
            background: "var(--paper)",
            border: "1px solid var(--line)",
            overflow: "hidden",
          }}>
            {/* Soft accent glow */}
            <div aria-hidden style={{
              position: "absolute",
              top: "-40%",
              right: "-10%",
              width: "60%",
              height: "180%",
              background: "radial-gradient(closest-side, rgba(255,90,31,0.15), rgba(255,90,31,0) 70%)",
              filter: "blur(20px)",
            }}></div>

            <Reveal delay={80}>
              <SectionLabel index="06" label="The Real Goal" />
            </Reveal>

            <h2 className="h-display" style={{ marginTop: 36, fontSize: "clamp(40px, 6.5vw, 104px)", maxWidth: "18ch", position: "relative", zIndex: 1 }}>
              More traffic is not the goal.<br/>
              <span style={{ color: "var(--accent)" }}>More customers is.</span>
            </h2>

            <div style={{
              marginTop: 56,
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr",
              gap: 64,
              alignItems: "end",
              position: "relative",
              zIndex: 1,
            }} className="banner-grid">
              <p className="lede" style={{ maxWidth: "56ch", fontSize: "clamp(18px, 1.4vw, 22px)" }}>
                Everything we build exists to create predictable growth systems designed around real business results. Not vanity metrics. Not impressions. Customers, revenue, retention.
              </p>
              <div className="row gap-3" style={{ flexWrap: "wrap", justifyContent: "flex-end" }}>
                <a href="#contact" className="btn btn-primary">
                  Book a Strategy Call
                  <span className="arrow"><ArrowUR /></span>
                </a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .banner-grid { grid-template-columns: 1fr !important; }
          .banner-grid > div { justify-content: flex-start !important; }
        }
      `}</style>
    </section>
  );
}

window.Banner = Banner;