// Hero — One Dedicated Editor. Backed by a Creative Team.
function Hero({ onStart }) {
  const { Container, Eyebrow, Icon } = window;
  const { Button } = window.ZentroDesignSystem_967cea;

  return (
    <section id="top" style={{ position: "relative", overflow: "hidden", paddingTop: 64, paddingBottom: 96 }}>
      <div style={{ position: "absolute", top: -180, left: "50%", transform: "translateX(-50%)", width: 900, height: 600, background: "radial-gradient(circle, rgba(251,208,40,0.22), transparent 65%)", pointerEvents: "none" }} />
      <Container style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: "9999px", background: "rgba(34,197,94,0.12)", border: "1px solid rgba(34,197,94,0.3)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "rgb(34,197,94)" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "rgb(34,197,94)" }} />
            Now accepting new clients
          </span>
        </div>

        <h1 style={{ textAlign: "center", margin: "28px auto 0", maxWidth: 900, fontFamily: "var(--font-display)", fontWeight: 900, lineHeight: 1.05, letterSpacing: "-0.03em" }}>
          <div style={{ fontSize: "clamp(1.6rem, 3vw, 2.6rem)", color: "rgba(255,255,255,0.75)", marginBottom: 10, fontWeight: 700, letterSpacing: "-0.01em" }}>
            One Dedicated Editor.
          </div>
          <div style={{ fontSize: "clamp(2.6rem, 5.5vw, 4.8rem)", color: "var(--gold-500)", fontStyle: "italic", letterSpacing: "-0.04em" }}>
            Backed by a Creative Team.
          </div>
        </h1>

        <p style={{ textAlign: "center", margin: "28px auto 0", maxWidth: 620, fontFamily: "var(--font-sans)", fontSize: "clamp(1rem, 1.8vw, 1.15rem)", lineHeight: 1.75, color: "var(--text-secondary)" }}>
          Zentro assigns you one dedicated editor — someone who learns your brand, your style, and your workflow. Backed by a full creative team, they handle everything after you hit record, every month, without interruption.
        </p>

        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={onStart} iconRight={<Icon name="ArrowRight" size={18} />}>Start a project</Button>
          <Button variant="secondary" size="lg" onClick={() => window.open("https://calendly.com/ph-zentro/30min", "_blank")} iconLeft={<Icon name="Calendar" size={16} />}>Book a call</Button>
        </div>

        {/* trust strip */}
        <div style={{ marginTop: 72, textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 32 }}>
            Trusted by Growing Brands & Real Estate Teams
          </p>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 56, flexWrap: "wrap" }}>
            <img src="assets/logo-exp-realty.png" alt="eXp Realty" style={{ height: 72, width: "auto", objectFit: "contain", filter: "invert(1)", opacity: 0.55 }} />
            <img src="assets/EO.png" alt="Everyday Order" style={{ height: 64, width: "auto", objectFit: "contain", filter: "invert(1)", opacity: 0.55 }} />
            <img src="assets/logo-realty-of-america.png" alt="Realty of America" style={{ height: 48, width: "auto", objectFit: "contain", filter: "invert(1)", opacity: 0.55 }} />
          </div>
        </div>
      </Container>
    </section>
  );
}
window.Hero = Hero;