/* Casa Khanya — Hi-fi v2 · Part 4 · Nature, Lifestyle, Security, Plot Options, Pricing+CTA */

/* ============================================================
   02 / NATURE
   The stream, the pond, the walks. The reason you came.
   ============================================================ */
const NatureBlock = () => (
  <section
    data-ck="nature"
    style={{
      padding: "120px 56px",
      background: CK.estateGreen,
      color: CK.ivory,
      position: "relative",
      overflow: "hidden",
    }}
  >
    {/* Watermark */}
    <div
      style={{
        position: "absolute",
        left: -40,
        top: -80,
        font: '300 320px "Fraunces", serif',
        fontStyle: "italic",
        color: "#3a5a2c",
        opacity: 0.22,
        lineHeight: 0.8,
        letterSpacing: "-0.04em",
        pointerEvents: "none",
      }}
    >
      n.
    </div>

    <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative" }}>
      <Reveal
        as="div"
        data-ck="nature-head"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 80,
          marginBottom: 56,
          alignItems: "flex-end",
        }}
      >
        <div>
          <Eyebrow color={CK.brass}>── 02 / Nature</Eyebrow>
          <Display size={84} italic color={CK.ivory} style={{ marginTop: 14 }}>
            A stream, a pond,
            <br />
            and 14 hectares <span style={{ color: CK.brass }}>left alone.</span>
          </Display>
        </div>
        <Body
          color="rgba(250,247,242,0.78)"
          size={17}
          style={{ maxWidth: 480, paddingBottom: 8 }}
        >
          We could have squeezed in another forty plots. We chose, instead, to
          keep the cocoa grove, the seasonal stream, and the ridge of old iroko
          trees that brought us here in the first place. Every house at Casa
          Khanya is within four minutes&rsquo; walk of water.
        </Body>
      </Reveal>

      {/* Three-column nature feature: stream / pond / walks */}
      <Stagger
        gap={120}
        initialDelay={120}
        y={28}
        data-ck="nature-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr",
          gap: 16,
        }}
      >
        {/* Stream — large left card */}
        <div
          style={{
            position: "relative",
            aspectRatio: "4/5",
            borderRadius: 4,
            overflow: "hidden",
          }}
        >
          <img
            src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1400&q=85"
            alt="Seasonal stream through the estate"
            loading="lazy"
            style={{
              position: "absolute",
              inset: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
            }}
          />
          <div
            style={{
              position: "absolute",
              inset: 0,
              background:
                "linear-gradient(180deg, transparent 30%, rgba(31,36,25,0.85) 100%)",
            }}
          />
          <div
            style={{
              position: "absolute",
              left: 28,
              right: 28,
              bottom: 28,
              color: CK.ivory,
            }}
          >
            <Mono size={10} color={CK.brass}>
              Fig. 05 · seasonal stream
            </Mono>
            <div
              style={{
                font: '400 38px "Fraunces", serif',
                fontStyle: "italic",
                marginTop: 10,
                lineHeight: 1.0,
              }}
            >
              1.2 km of water
              <br />
              through the estate.
            </div>
            <Body
              color="rgba(250,247,242,0.78)"
              size={14}
              style={{ marginTop: 10, maxWidth: 360 }}
            >
              The stream rises in the cocoa grove, runs east through the green
              belt, and feeds the central pond. A 600m boardwalk follows it. In
              August it blossoms.
            </Body>
          </div>
        </div>

        {/* Pond + Walks — stacked right */}
        <div
          style={{
            position: "relative",
            aspectRatio: "4/5",
            borderRadius: 4,
            overflow: "hidden",
          }}
        >
          <img
            src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?w=1200&q=85"
            alt="Garden pond at the estate"
            loading="lazy"
            style={{
              position: "absolute",
              inset: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
            }}
          />
          <div
            style={{
              position: "absolute",
              inset: 0,
              background:
                "linear-gradient(180deg, transparent 35%, rgba(31,36,25,0.85) 100%)",
            }}
          />
          <div
            style={{
              position: "absolute",
              left: 22,
              right: 22,
              bottom: 22,
              color: CK.ivory,
            }}
          >
            <Mono size={10} color={CK.brass}>
              Fig. 06 · garden pond
            </Mono>
            <div
              style={{
                font: '400 28px "Fraunces", serif',
                fontStyle: "italic",
                marginTop: 8,
                lineHeight: 1.0,
              }}
            >
              The garden pond.
              <br />
              The estate&rsquo;s heart.
            </div>
            <Body
              color="rgba(250,247,242,0.78)"
              size={13}
              style={{ marginTop: 8 }}
            >
              0.8 ha of still water at the centre — koi, lilies, a small island.
            </Body>
          </div>
        </div>

        <div
          style={{
            position: "relative",
            aspectRatio: "4/5",
            borderRadius: 4,
            overflow: "hidden",
          }}
        >
          <img
            src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?w=1200&q=85"
            alt="Walking paths through the cocoa grove"
            loading="lazy"
            style={{
              position: "absolute",
              inset: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
            }}
          />
          <div
            style={{
              position: "absolute",
              inset: 0,
              background:
                "linear-gradient(180deg, transparent 35%, rgba(31,36,25,0.85) 100%)",
            }}
          />
          <div
            style={{
              position: "absolute",
              left: 22,
              right: 22,
              bottom: 22,
              color: CK.ivory,
            }}
          >
            <Mono size={10} color={CK.brass}>
              Fig. 07 · the long walk
            </Mono>
            <div
              style={{
                font: '400 28px "Fraunces", serif',
                fontStyle: "italic",
                marginTop: 8,
                lineHeight: 1.0,
              }}
            >
              4.2 km of paths.
              <br />
              Soft surface, lit.
            </div>
            <Body
              color="rgba(250,247,242,0.78)"
              size={13}
              style={{ marginTop: 8 }}
            >
              Through cocoa, around the pond, along the ridge.
            </Body>
          </div>
        </div>
      </Stagger>

      {/* Nature stat strip */}
      <Reveal
        as="div"
        delay={300}
        style={{
          marginTop: 32,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 1,
          background: "rgba(250,247,242,0.1)",
          border: "1px solid rgba(250,247,242,0.1)",
          borderRadius: 4,
          overflow: "hidden",
        }}
      >
        {[
          ["14 ha", "cocoa grove & green belt"],
          ["1.2 km", "seasonal stream"],
          ["0.8 ha", "garden pond"],
          ["260+", "iroko, mahogany, baobab"],
        ].map(([n, l]) => (
          <div key={l} style={{ background: "#1a3010", padding: "28px 24px" }}>
            <div
              style={{
                font: '400 44px "Fraunces", serif',
                fontStyle: "italic",
                color: CK.brass,
              }}
            >
              {n}
            </div>
            <Mono
              size={10}
              color="rgba(250,247,242,0.6)"
              style={{ marginTop: 6 }}
            >
              {l}
            </Mono>
          </div>
        ))}
      </Reveal>
    </div>
  </section>
);

/* ============================================================
   07 / LIFESTYLE
   Community, garden seating, what mornings look like
   ============================================================ */
const LifestyleBlock = () => (
  <section
    data-ck="lifestyle"
    style={{ padding: "120px 56px", background: CK.stone }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      <Reveal
        as="div"
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          marginBottom: 56,
          gap: 40,
        }}
      >
        <div>
          <Eyebrow>── 07 / Lifestyle</Eyebrow>
          <Display
            size={84}
            italic
            color={CK.charcoal}
            style={{ marginTop: 14 }}
          >
            What a Saturday
            <br />
            here <span style={{ color: CK.brass }}>looks like.</span>
          </Display>
        </div>
        <Body size={16} style={{ maxWidth: 380, paddingBottom: 12 }}>
          Casa Khanya is small enough to know your neighbours, and big enough to
          disappear when you need to.
        </Body>
      </Reveal>

      {/* Editorial photo strip + day-in-the-life timeline */}
      <Stagger
        gap={100}
        initialDelay={120}
        y={24}
        style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}
      >
        {[
          {
            time: "06:30",
            title: "Coffee at the café.",
            sub: "Agege bread, soft eggs. Open mornings only.",
            img: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1400&q=85",
          },
          {
            time: "10:00",
            title: "Padel with the neighbours.",
            sub: "Two glass courts. Booked on the estate app.",
            img: "https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=1400&q=85",
          },
          {
            time: "17:00",
            title: "Dinner in the garden.",
            sub: "Garden seating around the pond. Bring a candle.",
            img: "https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?w=1400&q=85",
          },
        ].map((s) => (
          <div
            key={s.time}
            style={{
              background: CK.ivory,
              borderRadius: 4,
              overflow: "hidden",
              display: "flex",
              flexDirection: "column",
            }}
          >
            <div style={{ position: "relative", aspectRatio: "4/3" }}>
              <img
                src={s.img}
                alt={s.title}
                loading="lazy"
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                }}
              />
            </div>
            <div style={{ padding: "24px 26px 28px" }}>
              <Mono size={10} color={CK.brass}>
                {s.time}
              </Mono>
              <div
                style={{
                  font: '500 26px "Fraunces", serif',
                  fontStyle: "italic",
                  color: CK.charcoal,
                  marginTop: 8,
                  lineHeight: 1.05,
                }}
              >
                {s.title}
              </div>
              <Body size={14} color={CK.slate} style={{ marginTop: 8 }}>
                {s.sub}
              </Body>
            </div>
          </div>
        ))}
      </Stagger>

      {/* Community values row */}
      <Reveal
        as="div"
        style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: CK.charcoal + "14",
          border: `1px solid ${CK.charcoal}14`,
          borderRadius: 4,
          overflow: "hidden",
        }}
      >
        {[
          [
            "A real community",
            "Shared garden seating, monthly estate dinners, a WhatsApp group that actually answers.",
          ],
          [
            "Walkable, always",
            "Roads loop, no cul-de-sacs. The amenities are at the centre, not the edge.",
          ],
          [
            "Quiet by design",
            "No through traffic, no rentals, no commercial frontage. Just homes.",
          ],
        ].map(([t, d], i) => (
          <div
            key={t}
            className="ck-tile"
            style={{
              background: CK.ivory,
              padding: "32px 28px",
              minHeight: 160,
            }}
          >
            <Mono size={10} color={CK.brass}>
              0{i + 1}
            </Mono>
            <div
              style={{
                font: '500 24px "Fraunces", serif',
                fontStyle: "italic",
                color: CK.charcoal,
                marginTop: 10,
              }}
            >
              {t}
            </div>
            <Body size={14} color={CK.slate} style={{ marginTop: 8 }}>
              {d}
            </Body>
          </div>
        ))}
      </Reveal>
    </div>
  </section>
);

/* ============================================================
   08 / SECURITY
   Two gates, biometric, on-site team, AI cameras
   ============================================================ */
const SecurityBlock = () => (
  <section
    data-ck="security"
    style={{ padding: "120px 56px", background: CK.charcoal, color: CK.ivory }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      <Reveal
        as="div"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.2fr",
          gap: 80,
          alignItems: "flex-end",
          marginBottom: 56,
        }}
      >
        <div>
          <Eyebrow color={CK.brass}>── 08 / Security</Eyebrow>
          <Display size={72} italic color={CK.ivory} style={{ marginTop: 14 }}>
            Built to be safe
            <br />
            without <span style={{ color: CK.brass }}>feeling like it.</span>
          </Display>
        </div>
        <Body
          color="rgba(250,247,242,0.75)"
          size={17}
          style={{ maxWidth: 520, paddingBottom: 8 }}
        >
          Two gates, both biometric. A trained, on-site security team — not
          contracted, not rotating. AI cameras at every junction. And no walls
          between you and your neighbours, because the perimeter does the work.
        </Body>
      </Reveal>

      {/* Security feature grid */}
      <Stagger
        gap={70}
        initialDelay={120}
        y={20}
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 1,
          background: "rgba(250,247,242,0.08)",
          border: "1px solid rgba(250,247,242,0.08)",
          borderRadius: 4,
          overflow: "hidden",
        }}
      >
        {[
          {
            n: "01",
            t: "Biometric gates",
            d: "Facial + fingerprint at both estate entrances. No fobs, no remotes, no calls.",
            shape: "square",
          },
          {
            n: "02",
            t: "On-site team",
            d: "Trained guards, full-time staff, 24/7. Same faces. They know your car.",
            shape: "circle",
          },
          {
            n: "03",
            t: "AI surveillance",
            d: "Low-glare cameras at every junction, automatic alerts on unfamiliar movement.",
            shape: "diamond",
          },
          {
            n: "04",
            t: "Perimeter & patrol",
            d: "Reinforced perimeter wall + electric topping. Mobile patrols every 90 minutes.",
            shape: "square",
          },
        ].map((c) => (
          <div
            key={c.n}
            className="ck-tile-dark"
            style={{
              background: "#16201a",
              border: "none",
              padding: "36px 28px 32px",
              minHeight: 240,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
              }}
            >
              <Mono size={10} color={CK.brass}>
                {c.n}
              </Mono>
              <Glyph shape={c.shape} size={18} color={CK.brass} />
            </div>
            <div>
              <div
                style={{
                  font: '500 24px "Fraunces", serif',
                  fontStyle: "italic",
                  color: CK.ivory,
                  lineHeight: 1.1,
                }}
              >
                {c.t}
              </div>
              <Body
                color="rgba(250,247,242,0.7)"
                size={13}
                style={{ marginTop: 10 }}
              >
                {c.d}
              </Body>
            </div>
          </div>
        ))}
      </Stagger>

      {/* Reassurance line */}
      <Reveal
        as="div"
        delay={240}
        style={{
          marginTop: 40,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 32,
          padding: "24px 32px",
          background: "#16201a",
          borderRadius: 4,
          border: "1px solid rgba(184,154,90,0.25)",
          flexWrap: "wrap",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span
            style={{
              width: 10,
              height: 10,
              background: CK.brass,
              borderRadius: 999,
              boxShadow: "0 0 0 5px rgba(184,154,90,0.18)",
            }}
          />
          <div
            style={{
              font: '400 20px "Fraunces", serif',
              fontStyle: "italic",
              color: CK.ivory,
            }}
          >
            Zero incidents since groundbreaking — and we intend to keep it that
            way.
          </div>
        </div>
        <Mono size={10} color="rgba(250,247,242,0.55)">
          Audited quarterly · Halogen Security Group
        </Mono>
      </Reveal>
    </div>
  </section>
);

/* ============================================================
   12 / PLOT OPTIONS
   Standard / Garden / Stream / Prime — four types
   ============================================================ */
const PLOT_TYPES = [
  {
    code: "A",
    name: "Standard",
    size: "800–1,000 m²",
    price: "from ₦10M",
    available: 38,
    total: 52,
    sub: "Inland plots on the gentle east terrace. Quiet, level, easy to build on.",
    accent: CK.sage,
    img: "https://images.unsplash.com/photo-1448630360428-65456885c650?w=1200&q=85",
  },
  {
    code: "B",
    name: "Garden",
    size: "1,000–1,400 m²",
    price: "from ₦14M",
    available: 16,
    total: 28,
    sub: "Larger plots backing onto the central greenbelt. Mature trees on every plot.",
    accent: CK.brass,
    img: "https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?w=1200&q=85",
  },
  {
    code: "C",
    name: "Stream",
    size: "1,400–1,800 m²",
    price: "from ₦19M",
    available: 7,
    total: 22,
    sub: "Plots that border the boardwalk and seasonal stream. Direct water frontage.",
    accent: "#8aa6c8",
    img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=85",
  },
  {
    code: "D",
    name: "Prime",
    size: "1,800–2,400 m²",
    price: "from ₦26M",
    available: 4,
    total: 12,
    sub: "The ridge plots. Highest elevation, longest views, last to be released.",
    accent: "#c08a4a",
    img: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1200&q=85",
  },
];

const PlotOptionsBlock = () => (
  <section
    data-ck="plots"
    style={{ padding: "120px 56px", background: CK.ivory }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      <Reveal
        as="div"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 80,
          alignItems: "flex-end",
          marginBottom: 56,
        }}
      >
        <div>
          <Eyebrow>── 12 / Plot options</Eyebrow>
          <Display
            size={84}
            italic
            color={CK.charcoal}
            style={{ marginTop: 14 }}
          >
            Four kinds of plot.
            <br />
            <span style={{ color: CK.brass }}>114 in total.</span>
          </Display>
        </div>
        <Body size={17} style={{ maxWidth: 480, paddingBottom: 8 }}>
          Every plot is sized to breathe — minimum 800 m², maximum 2,400 m².
          Pick by view, by neighbour, by what you want to wake up to.
        </Body>
      </Reveal>

      <Stagger
        gap={80}
        initialDelay={120}
        y={24}
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 1,
          background: CK.charcoal + "14",
          border: `1px solid ${CK.charcoal}14`,
          borderRadius: 4,
          overflow: "hidden",
        }}
      >
        {PLOT_TYPES.map((p) => {
          const pct = Math.round((p.available / p.total) * 100);
          return (
            <div
              key={p.code}
              className="ck-tile"
              style={{
                background: CK.ivory,
                display: "flex",
                flexDirection: "column",
              }}
            >
              {/* Photo header */}
              <div style={{ position: "relative", aspectRatio: "4/3" }}>
                <img
                  src={p.img}
                  alt={`${p.name} plot`}
                  loading="lazy"
                  style={{
                    position: "absolute",
                    inset: 0,
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    background:
                      "linear-gradient(180deg, rgba(31,36,25,0.0) 50%, rgba(31,36,25,0.6) 100%)",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    top: 16,
                    left: 16,
                    background: p.accent,
                    color: CK.charcoal,
                    padding: "6px 12px",
                    borderRadius: 999,
                    font: '500 11px "JetBrains Mono", monospace',
                    letterSpacing: "0.16em",
                    textTransform: "uppercase",
                  }}
                >
                  Type {p.code}
                </div>
                <div
                  style={{
                    position: "absolute",
                    bottom: 14,
                    left: 16,
                    color: CK.ivory,
                  }}
                >
                  <div
                    style={{
                      font: '500 28px "Fraunces", serif',
                      fontStyle: "italic",
                    }}
                  >
                    {p.name}
                  </div>
                </div>
              </div>

              {/* Body */}
              <div
                style={{
                  padding: "22px 24px 24px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 14,
                  flex: 1,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Mono size={10} color={CK.slate}>
                    Plot size
                  </Mono>
                  <span
                    style={{
                      font: '500 13px "JetBrains Mono", monospace',
                      color: CK.charcoal,
                    }}
                  >
                    {p.size}
                  </span>
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Mono size={10} color={CK.slate}>
                    Price
                  </Mono>
                  <span
                    style={{
                      font: '500 15px "Fraunces", serif',
                      fontStyle: "italic",
                      color: CK.brass,
                    }}
                  >
                    {p.price}
                  </span>
                </div>
                <Body size={13} color={CK.slate} style={{ flex: 1 }}>
                  {p.sub}
                </Body>

                {/* Availability bar */}
                <div>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "baseline",
                      marginBottom: 6,
                    }}
                  >
                    <Mono size={9} color={CK.slate}>
                      Available
                    </Mono>
                    <span
                      style={{
                        font: '500 12px "JetBrains Mono", monospace',
                        color: CK.charcoal,
                      }}
                    >
                      {p.available} / {p.total}
                    </span>
                  </div>
                  <div
                    style={{
                      height: 4,
                      background: CK.charcoal + "14",
                      borderRadius: 2,
                      overflow: "hidden",
                    }}
                  >
                    <div
                      style={{
                        width: `${pct}%`,
                        height: "100%",
                        background: p.accent,
                      }}
                    />
                  </div>
                </div>

                <Button
                  variant="ghost"
                  size="sm"
                  style={{
                    borderColor: CK.charcoal + "33",
                    marginTop: 4,
                    alignSelf: "flex-start",
                  }}
                  after="→"
                >
                  View this type
                </Button>
              </div>
            </div>
          );
        })}
      </Stagger>

      {/* Sub-CTA row */}
      <Reveal
        as="div"
        delay={300}
        style={{
          marginTop: 40,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 24,
          padding: "24px 32px",
          background: CK.stone,
          borderRadius: 4,
          flexWrap: "wrap",
        }}
      >
        <Body size={15} color={CK.charcoal}>
          <strong>65 of 114 plots</strong> still available across all four types
          — but only 4 Prime plots remain.
        </Body>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <Button
            variant="ghost"
            style={{ borderColor: CK.charcoal + "33" }}
            after="→"
          >
            Open the plot finder
          </Button>
          <Button variant="primary" after="→">
            Ask about a plot
          </Button>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============================================================
   12 / PRICING + SCARCITY
   The conversion band — From ₦10M, Only 114 plots, WhatsApp CTA
   ============================================================ */
const PricingBlock = () => (
  <section
    data-ck="pricing"
    style={{
      padding: "140px 56px",
      background: CK.brass,
      color: CK.charcoal,
      position: "relative",
      overflow: "hidden",
    }}
  >
    {/* Diagonal stripe */}
    <div
      style={{
        position: "absolute",
        right: -100,
        top: -60,
        bottom: -60,
        width: 380,
        background:
          "repeating-linear-gradient(135deg, transparent 0 16px, rgba(31,36,25,0.06) 16px 17px)",
        transform: "skewX(-8deg)",
        pointerEvents: "none",
      }}
    />

    <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative" }}>
      <Reveal
        as="div"
        style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 80,
          alignItems: "center",
        }}
      >
        <div>
          <Eyebrow color={CK.charcoal}>
            ── 11 / Pricing &amp; availability
          </Eyebrow>
          <Display
            size={140}
            italic
            color={CK.charcoal}
            style={{ marginTop: 18, lineHeight: 0.9 }}
          >
            From <span style={{ color: CK.estateGreen }}>₦10M.</span>
          </Display>
          <div
            style={{
              marginTop: 28,
              display: "flex",
              alignItems: "baseline",
              gap: 16,
              flexWrap: "wrap",
            }}
          >
            <div
              style={{
                font: '400 32px "Fraunces", serif',
                fontStyle: "italic",
                color: CK.charcoal,
              }}
            >
              Only 114 plots, ever.
            </div>
            <Mono size={11} color={CK.charcoal} style={{ opacity: 0.7 }}>
              · 65 still available · 4 Prime left
            </Mono>
          </div>
          <Body
            size={17}
            color={CK.charcoal}
            style={{ marginTop: 22, maxWidth: 540, opacity: 0.85 }}
          >
            The estate is fixed at 38 hectares, 114 plots — and once
            they&rsquo;re sold, that&rsquo;s the estate. Flexible payment plans
            available, 18 to 36 months, with deposits from 30%.
          </Body>
        </div>

        {/* Right — scarcity panel */}
        <div
          style={{
            background: CK.charcoal,
            color: CK.ivory,
            padding: 36,
            borderRadius: 4,
            boxShadow: "0 30px 80px rgba(31,36,25,0.3)",
          }}
        >
          <Mono size={10} color={CK.brass}>
            Live availability · April 2026
          </Mono>

          {/* Plot dot grid — 114 dots */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(19, 1fr)",
              gap: 4,
              marginTop: 22,
            }}
          >
            {Array.from({ length: 114 }).map((_, i) => {
              const sold = i < 49; // 65 available
              return (
                <span
                  key={i}
                  style={{
                    aspectRatio: "1",
                    background: sold ? "rgba(250,247,242,0.18)" : CK.brass,
                    borderRadius: 2,
                  }}
                />
              );
            })}
          </div>

          <div
            style={{
              display: "flex",
              gap: 18,
              marginTop: 18,
              font: '500 11px "JetBrains Mono", monospace',
              color: "rgba(250,247,242,0.7)",
              letterSpacing: "0.12em",
              textTransform: "uppercase",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
              <span
                style={{
                  width: 10,
                  height: 10,
                  background: CK.brass,
                  borderRadius: 2,
                }}
              />
              Available · 65
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
              <span
                style={{
                  width: 10,
                  height: 10,
                  background: "rgba(250,247,242,0.18)",
                  borderRadius: 2,
                }}
              />
              Sold · 49
            </div>
          </div>

          <Rule
            color="rgba(250,247,242,0.15)"
            opacity={1}
            style={{ marginTop: 28, marginBottom: 24 }}
          />

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 16,
              marginBottom: 24,
            }}
          >
            <div>
              <Mono size={10} color="rgba(250,247,242,0.55)">
                Deposit
              </Mono>
              <div
                style={{
                  font: '400 26px "Fraunces", serif',
                  fontStyle: "italic",
                  color: CK.ivory,
                  marginTop: 6,
                }}
              >
                30%
              </div>
            </div>
            <div>
              <Mono size={10} color="rgba(250,247,242,0.55)">
                Payment plan
              </Mono>
              <div
                style={{
                  font: '400 26px "Fraunces", serif',
                  fontStyle: "italic",
                  color: CK.ivory,
                  marginTop: 6,
                }}
              >
                up to 36 mo
              </div>
            </div>
          </div>

          <Button
            variant="brass"
            size="lg"
            after="→"
            style={{ width: "100%", justifyContent: "center" }}
          >
            Reserve a plot on WhatsApp
          </Button>
          <Mono
            size={10}
            color="rgba(250,247,242,0.5)"
            style={{
              display: "block",
              textAlign: "center",
              marginTop: 12,
              textTransform: "none",
              letterSpacing: "0.06em",
            }}
          >
            +234 802 487 2200 · usually replies in 6 min
          </Mono>
        </div>
      </Reveal>
    </div>
  </section>
);

window.NatureBlock = NatureBlock;
window.LifestyleBlock = LifestyleBlock;
window.SecurityBlock = SecurityBlock;
window.PlotOptionsBlock = PlotOptionsBlock;
window.PricingBlock = PricingBlock;
