/* Casa Khanya — Hi-fi v2 · Part 1 · Hero + sticky nav + CTA rail */

const HeroV2 = ({ tweaks }) => {
  const heroTone = tweaks.heroTone || "green";
  return (
    <section
      style={{ position: "relative", minHeight: "100vh", overflow: "hidden" }}
    >
      {/* Full-bleed hero photo */}
      <Photo
        src={
          heroTone === "dawn"
            ? "https://images.unsplash.com/photo-1613553497126-a44624272024?w=2000&q=85"
            : heroTone === "night"
              ? "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=2000&q=85"
              : "assets/casa-khanya-aerial.png"
        }
        caption="Casa Khanya · estate, aerial · master plan render"
        credit="© 04/26"
        objectPosition="center bottom"
        style={{
          position: "absolute",
          inset: 0,
          borderRadius: 0,
          height: "99%",
        }}
      />
      {/* Dark gradient for legibility */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(180deg, rgba(31,36,25,0.55) 0%, rgba(31,36,25,0.25) 30%, rgba(31,36,25,0.92) 100%)",
          pointerEvents: "none",
        }}
      />

      <div
        style={{
          position: "relative",
          height: "100%",
          minHeight: "100vh",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* NAV */}
        <nav
          data-ck="hero-nav"
          style={{
            padding: "28px 56px",
            color: CK.ivory,
          }}
        >
          <div
            data-ck="hero-nav-inner"
            style={{
              maxWidth: 1440,
              margin: "0 auto",
              width: "100%",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img
              src="assets/ck-logo-landscape-ivory.png"
              alt="Casa Khanya Estate"
              style={{ height: 96, width: "auto", opacity: 0.96 }}
            />
          </div>
          <div
            data-ck="hero-nav-links"
            style={{ display: "flex", gap: 28, font: '500 16px "DM Sans"' }}
          >
            {[
              ["The Estate", "intro"],
              ["Amenities", "amenities"],
              ["Master Plan", "master"],
              ["Location", "location"],
              ["Guidelines", "guidelines"],
            ].map(([label, target]) => (
              <a
                key={target}
                href={`#${target}`}
                onClick={(e) => {
                  e.preventDefault();
                  const el = document.querySelector(`[data-ck="${target}"]`);
                  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.opacity = 1;
                  e.currentTarget.style.color = CK.brass;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.opacity = 0.85;
                  e.currentTarget.style.color = "inherit";
                }}
                style={{
                  cursor: "pointer",
                  opacity: 0.85,
                  color: "inherit",
                  textDecoration: "none",
                  transition: "opacity 200ms ease, color 200ms ease",
                }}
              >
                {label}
              </a>
            ))}
          </div>
          <div
            data-ck="hero-nav-cta"
            style={{ display: "flex", gap: 10, alignItems: "center" }}
          >
            <span
              data-ck="hero-nav-phone"
              style={{
                font: '500 13px "JetBrains Mono", monospace',
                letterSpacing: "0.06em",
              }}
            >
              +234 802 487 2200
            </span>
            <Button variant="brass" size="md" after="→">
              Register
            </Button>
          </div>
          </div>
        </nav>

        {/* Hero copy */}
        <div
          data-ck="hero-copy"
          style={{
            flex: 1,
            display: "flex",
            alignItems: "flex-end",
            padding: "0 56px 80px",
            color: CK.ivory,
          }}
        >
          <div
            data-ck="hero-grid"
            style={{
              maxWidth: 1440,
              margin: "0 auto",
              width: "100%",
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr",
              gap: 80,
              alignItems: "flex-end",
            }}
          >
            <div>
              <Display
                data-ck="hero-display"
                size={120}
                italic
                color={CK.ivory}
                style={{ lineHeight: 0.92 }}
              >
                <span style={{ display: "block", whiteSpace: "nowrap" }}>
                  Live where nature
                </span>
                <span style={{ display: "block", color: CK.brass }}>
                  still exists.
                </span>
              </Display>
              <Body
                color="rgba(250,247,242,0.85)"
                size={18}
                style={{ marginTop: 26, maxWidth: 540 }}
              >
                A private, nature-harmonized estate in Olorunda, Ibadan.
              </Body>
              <div
                style={{
                  display: "flex",
                  gap: 12,
                  marginTop: 36,
                  flexWrap: "wrap",
                }}
              >
                <Button variant="brass" size="lg" after="→">
                  Register interest
                </Button>
                <Button
                  variant="ghost"
                  size="lg"
                  style={{
                    borderColor: "rgba(250,247,242,0.4)",
                    color: CK.ivory,
                  }}
                  after="↓"
                >
                  Download brochure
                </Button>
              </div>
            </div>
            {/* Stat sidebar */}
            {/* <div data-ck="hero-stats" style={{ borderLeft: '1px solid rgba(250,247,242,0.2)', paddingLeft: 36 }}>
              <Mono color="rgba(250,247,242,0.6)" size={10}>At a glance</Mono>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 18 }}>
                {[
                  ['114', 'plots · ever'],
                  ['₦10M', 'starting price'],
                  ['38 ha', 'private estate'],
                  ['11', 'shared amenities'],
                ].map(([n, l]) => (
                  <div key={l}>
                    <div style={{ font: '400 32px "Fraunces", serif', fontStyle: 'italic', color: CK.ivory }}>{n}</div>
                    <Mono size={10} color="rgba(250,247,242,0.6)" style={{ marginTop: 4 }}>{l}</Mono>
                  </div>
                ))}
              </div>
            </div> */}
          </div>
        </div>

        {/* Bottom rail — estate location */}
        {/* <div
          data-ck="hero-status"
          style={{
            background: CK.estateGreen,
            color: CK.ivory,
            padding: "14px 56px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            font: '500 13px "DM Sans"',
            letterSpacing: "0.02em",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span
              aria-hidden
              style={{ font: '500 14px "DM Sans"', color: CK.brass }}
            >
              📍
            </span>
            <span>
              Idi-Ishin, Ibadan · between Jericho GRA &amp; the Ring Road
            </span>
          </div>
          <div style={{ display: "flex", gap: 28, alignItems: "center" }}>
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
            >
              <span
                style={{
                  font: '500 11px "JetBrains Mono", monospace',
                  color: CK.brass,
                  letterSpacing: "0.16em",
                }}
              >
                4 MIN
              </span>
              <span style={{ opacity: 0.85 }}>Jericho GRA</span>
            </span>
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
            >
              <span
                style={{
                  font: '500 11px "JetBrains Mono", monospace',
                  color: CK.brass,
                  letterSpacing: "0.16em",
                }}
              >
                14 MIN
              </span>
              <span style={{ opacity: 0.85 }}>Lagos–Ibadan Expy</span>
            </span>
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
            >
              <span
                style={{
                  font: '500 11px "JetBrains Mono", monospace',
                  color: CK.brass,
                  letterSpacing: "0.16em",
                }}
              >
                40 MIN
              </span>
              <span style={{ opacity: 0.85 }}>Ibadan Airport</span>
            </span>
          </div>
        </div> */}
      </div>
    </section>
  );
};

window.HeroV2 = HeroV2;