// PRLX site — city landing page local proof block.
// Fully props-driven: no city-specific logic lives here, so Hobart and Darwin
// share one component and differ only in the data their page passes in.
// Sits BELOW Hero on the city pages. Hero owns the page's single <h1> and the
// reel button, so the optional `headline` here renders as an <h2> and the city
// pages omit it rather than repeat the hero line.
function CityIntro({ city, headline, lede, crew, areas, tel, telLabel, onEnquire }) {
  const { Button } = window.PRLXDesignSystem_b1b8b9;
  const { useViewport } = window;
  const { isMobile, isTablet } = useViewport();

  return (
    <section
      data-screen-label={`${city} intro`}
      style={{ padding: isMobile ? "64px 20px" : "96px 32px", maxWidth: 1200, margin: "0 auto" }}
    >
      <div style={{ fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.32em", color: "var(--prlx-graphite-400)", marginBottom: 20 }}>
        ↳ {city}
      </div>

      {headline && (
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.02em", fontSize: "clamp(40px, 7.5vw, 88px)", lineHeight: 0.92, margin: 0 }}>
          {headline}
        </h2>
      )}

      <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "minmax(0, 1.1fr) minmax(0, 0.9fr)", gap: isTablet ? 32 : 64, marginTop: isMobile ? 32 : 48, alignItems: "start" }}>
        <div>
          <p style={{ fontWeight: 300, fontSize: 18, lineHeight: 1.6, color: "var(--prlx-graphite-200)", margin: 0, maxWidth: "58ch" }}>
            {lede}
          </p>
          <p style={{ fontWeight: 300, fontSize: 18, lineHeight: 1.6, color: "var(--prlx-graphite-200)", marginTop: 20, maxWidth: "58ch" }}>
            {crew}
          </p>
        </div>

        <div style={{ border: "1px solid rgba(255,255,255,0.12)", background: "rgba(255,255,255,0.03)", padding: isMobile ? "24px 22px" : "28px 30px" }}>
          <div style={{ fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.28em", color: "var(--prlx-graphite-400)", marginBottom: 14 }}>
            Where we work
          </div>
          <p style={{ fontWeight: 300, fontSize: 15, lineHeight: 1.7, color: "var(--prlx-graphite-200)", margin: "0 0 20px" }}>
            {areas.join(" · ")}
          </p>
          <a
            href={`tel:${tel}`}
            style={{ fontFamily: "var(--font-mono)", fontSize: 20, letterSpacing: "0.02em", color: "#fff", textDecoration: "none", display: "block", marginBottom: 18 }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "#fff")}
          >
            {telLabel}
          </a>
          <Button variant="primary" onClick={onEnquire}>Start a project</Button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CityIntro });