/* Casa Khanya — Hi-fi v2 · Part 2 · Intro, Video, Master Plan, Amenities */

const IntroBlock = () => (
  <section
    data-ck="intro"
    style={{ padding: "180px 56px 120px", background: CK.ivory }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      {/* Section header — sits above the columns, full width */}
      <Reveal
        style={{
          marginBottom: 56,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          gap: 40,
        }}
      >
        <div>
          <Eyebrow>── 01 / The estate</Eyebrow>
          <Mono
            color={CK.slate}
            size={11}
            style={{ marginTop: 10, display: "block" }}
          >
            Casa Khanya
          </Mono>
        </div>
        <Mono color={CK.slate} size={11}>
          fig. 01–07
        </Mono>
      </Reveal>

      <div
        data-ck="intro-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.4fr",
          gap: 100,
          alignItems: "center",
        }}
      >
        <Reveal delay={120} y={36}>
          {/* Tall editorial photo */}
          <div
            style={{
              position: "relative",
              aspectRatio: "4/5",
              borderRadius: 4,
              overflow: "hidden",
            }}
          >
            <img
              src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1400&q=85"
              alt="Casa Khanya estate · interior light study"
              loading="lazy"
              style={{
                position: "absolute",
                inset: 0,
                width: "100%",
                height: "100%",
                objectFit: "cover",
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: 18,
                left: 18,
                background: "rgba(31,36,25,0.7)",
                backdropFilter: "blur(6px)",
                WebkitBackdropFilter: "blur(6px)",
                color: CK.brass,
                font: '500 10px "JetBrains Mono", monospace',
                letterSpacing: "0.18em",
                textTransform: "uppercase",
                padding: "7px 12px",
                borderRadius: 999,
                border: `1px solid rgba(184,154,90,0.35)`,
              }}
            >
              fig. 01 · type 'a' villa · interior
            </div>
          </div>
        </Reveal>
        <Reveal delay={220} y={32}>
          <Display size={72} italic color={CK.charcoal}>
            Most estates are built on cleared land.{" "}
            <span style={{ color: CK.brass }}>
              We built ours around a stream.
            </span>
          </Display>
          <div style={{ marginTop: 40 }}>
            <Body size={17}>
              Casa Khanya sits on 38 hectares of cocoa grove, ridge, and
              seasonal stream on the western edge of Ibadan — ten minutes from
              Jericho, forty from the airport. We didn&rsquo;t flatten it. We
              drew the road around the water, kept the old trees, and let the
              land decide where the houses would go.
            </Body>
            <Body size={17} style={{ marginTop: 20 }}>
              What we couldn&rsquo;t replicate is the reason we&rsquo;re only
              releasing{" "}
              <strong style={{ color: CK.charcoal }}>114 plots, ever</strong>.
              Each one is sized to breathe — 800 m² to 2,400 m² — with a
              serviced backbone of 24/7 security, fibre, tarred road, and
              on-site borehole water. From ₦10M.
            </Body>
          </div>
          <div
            style={{
              marginTop: 42,
              padding: "18px 0 0",
              borderTop: `1px solid ${CK.charcoal}22`,
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 16,
            }}
          >
            <div>
              <Mono
                size={10}
                color={CK.slate}
                style={{ display: "block", marginBottom: 6 }}
              >
                Architect
              </Mono>
              <Body size={13} color={CK.charcoal} style={{ fontWeight: 500 }}>
                Studio Oluàdé &amp;
                <br />
                Adelaja Architects
              </Body>
            </div>
            <div>
              <Mono
                size={10}
                color={CK.slate}
                style={{ display: "block", marginBottom: 6 }}
              >
                Site
              </Mono>
              <Body size={13} color={CK.charcoal} style={{ fontWeight: 500 }}>
                7°23′N 3°52′E
                <br />
                Idi-Ishin, Ibadan
              </Body>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const VideoBlock = () => (
  <section
    data-ck="video"
    style={{ padding: "60px 56px 100px", background: CK.ivory }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      <Reveal
        as="div"
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          marginBottom: 28,
        }}
      >
        <div>
          <Eyebrow>── 03 / Walk the estate</Eyebrow>
          <Display
            size={56}
            italic
            color={CK.charcoal}
            style={{ marginTop: 14 }}
          >
            Two ways to see it before you visit.
          </Display>
        </div>
        <Button
          variant="ghost"
          style={{ borderColor: CK.charcoal + "33" }}
          after="→"
        >
          Book a visit
        </Button>
      </Reveal>

      <Stagger
        gap={140}
        initialDelay={80}
        data-ck="video-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "1.6fr 1fr",
          gap: 20,
          alignItems: "stretch",
        }}
      >
        {/* Left column — main video + chapter strip below */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <a
            href="https://youtu.be/3H6Evu2hPpE"
            target="_blank"
            rel="noopener"
            className="ck-video-card"
            style={{
              position: "relative",
              aspectRatio: "16/9",
              background: CK.charcoal,
              borderRadius: 4,
              overflow: "hidden",
              display: "block",
              textDecoration: "none",
              cursor: "pointer",
            }}
          >
            <img
              src="https://i.ytimg.com/vi/3H6Evu2hPpE/maxresdefault.jpg"
              alt="Casa Khanya — site walkthrough"
              style={{
                position: "absolute",
                inset: 0,
                width: "100%",
                height: "100%",
                objectFit: "cover",
              }}
            />
            <div
              style={{
                position: "absolute",
                inset: 0,
                background:
                  "linear-gradient(180deg, transparent 40%, rgba(31,36,25,0.65) 100%)",
              }}
            />
            {/* Play button */}
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%,-50%)",
                width: 88,
                height: 88,
                borderRadius: 999,
                background: "rgba(250,247,242,0.95)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 14px 50px rgba(0,0,0,0.35)",
              }}
            >
              <div
                style={{
                  width: 0,
                  height: 0,
                  marginLeft: 6,
                  borderTop: "14px solid transparent",
                  borderBottom: "14px solid transparent",
                  borderLeft: `22px solid ${CK.estateGreen}`,
                }}
              />
            </div>
            {/* Caption strip */}
            <div
              style={{
                position: "absolute",
                left: 24,
                right: 24,
                bottom: 22,
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-end",
                color: CK.ivory,
              }}
            >
              <div>
                <div
                  style={{
                    font: '500 11px "JetBrains Mono", monospace',
                    letterSpacing: "0.16em",
                    textTransform: "uppercase",
                    color: CK.brass,
                  }}
                >
                  Site walkthrough
                </div>
                <div
                  style={{
                    font: '500 22px "Fraunces", serif',
                    fontStyle: "italic",
                    marginTop: 6,
                  }}
                >
                  The estate, on foot
                </div>
              </div>
              <div
                style={{
                  font: '500 11px "JetBrains Mono", monospace',
                  letterSpacing: "0.14em",
                  opacity: 0.85,
                }}
              >
                04:12 · 4K
              </div>
            </div>
          </a>

          {/* Chapter strip — fills the void below the 16:9 video */}
          <div
            style={{
              flex: 1,
              background: CK.stone,
              borderRadius: 4,
              padding: "24px 28px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "baseline",
                justifyContent: "space-between",
                marginBottom: 18,
              }}
            >
              <Mono size={10} color={CK.slate}>
                Chapters
              </Mono>
              <Mono size={10} color={CK.slate}>
                04:12 total
              </Mono>
            </div>
            <div
              data-ck="chapters"
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(4, 1fr)",
                gap: 14,
              }}
            >
              {[
                ["00:00", "Arrival", "Gatehouse → main avenue"],
                ["01:08", "Plots & paths", "east terrace"],
                ["02:24", "Amenities", "Pond, courts, café"],
                ["03:30", "View", "From the highest plot"],
              ].map(([ts, t, sub]) => (
                <div
                  key={t}
                  style={{
                    paddingLeft: 12,
                    borderLeft: `2px solid ${CK.brass}`,
                  }}
                >
                  <Mono
                    size={10}
                    color={CK.brass}
                    style={{ display: "block", marginBottom: 6 }}
                  >
                    {ts}
                  </Mono>
                  <div
                    style={{
                      font: '500 14px "Fraunces", serif',
                      fontStyle: "italic",
                      color: CK.charcoal,
                    }}
                  >
                    {t}
                  </div>
                  <Body
                    size={11}
                    color={CK.slate}
                    style={{ marginTop: 4, lineHeight: 1.4 }}
                  >
                    {sub}
                  </Body>
                </div>
              ))}
            </div>
          </div>
        </div>
        {/* Right column — 3D walkthrough card */}
        <a
          href="https://youtu.be/y9j-BL5ocW8"
          target="_blank"
          rel="noopener"
          className="ck-video-card"
          style={{
            position: "relative",
            aspectRatio: "4/5",
            background: CK.estateGreen,
            borderRadius: 4,
            overflow: "hidden",
            display: "block",
            textDecoration: "none",
            cursor: "pointer",
            alignSelf: "stretch",
          }}
        >
          <img
            src="https://i.ytimg.com/vi/y9j-BL5ocW8/maxresdefault.jpg"
            alt="Casa Khanya — 3D walkthrough"
            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.15) 0%, transparent 35%, rgba(31,36,25,0.78) 100%)",
            }}
          />
          {/* Live 3D pill */}
          <div
            style={{
              position: "absolute",
              top: 20,
              right: 20,
              background: CK.brass,
              color: CK.charcoal,
              padding: "6px 12px",
              borderRadius: 999,
              font: '500 11px "JetBrains Mono", monospace',
              letterSpacing: "0.14em",
              textTransform: "uppercase",
            }}
          >
            ● Live 3D
          </div>
          {/* Play */}
          <div
            style={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%,-50%)",
              width: 72,
              height: 72,
              borderRadius: 999,
              background: "rgba(250,247,242,0.95)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              boxShadow: "0 14px 50px rgba(0,0,0,0.35)",
            }}
          >
            <div
              style={{
                width: 0,
                height: 0,
                marginLeft: 5,
                borderTop: "11px solid transparent",
                borderBottom: "11px solid transparent",
                borderLeft: `18px solid ${CK.estateGreen}`,
              }}
            />
          </div>
          {/* Caption */}
          <div
            style={{
              position: "absolute",
              left: 22,
              right: 22,
              bottom: 22,
              color: CK.ivory,
            }}
          >
            <div
              style={{
                font: '500 11px "JetBrains Mono", monospace',
                letterSpacing: "0.16em",
                textTransform: "uppercase",
                color: CK.brass,
              }}
            >
              3D walkthrough
            </div>
            <div
              style={{
                font: '500 20px "Fraunces", serif',
                fontStyle: "italic",
                marginTop: 6,
              }}
            >
              Architect&rsquo;s explainer
            </div>
            <Body
              color="rgba(250,247,242,0.78)"
              size={13}
              style={{ marginTop: 6 }}
            >
              Move through plots, common areas, and amenities — explained
              shot-by-shot.
            </Body>
          </div>
        </a>
      </Stagger>
    </div>
  </section>
);

const MasterPlan = () => (
  <section
    data-ck="master"
    style={{ padding: "120px 56px", background: CK.stone }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      <Reveal
        as="div"
        data-ck="master-head"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 80,
          marginBottom: 56,
          alignItems: "flex-end",
        }}
      >
        <div>
          <Eyebrow>── 04 / Master plan</Eyebrow>
          <Display
            size={84}
            italic
            color={CK.charcoal}
            style={{ marginTop: 14 }}
          >
            38 hectares,
            <br />
            arranged with <span style={{ color: CK.brass }}>care.</span>
          </Display>
        </div>
        <div>
          <Body size={17} style={{ maxWidth: 480 }}>
            Plots fan out from a central garden pond and amenity spine. Roads
            loop, never cul-de-sac. Every plot is within four minutes&rsquo;
            walk of the gym, supermarket, and play area.
          </Body>
          <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
            <Button variant="primary" after="↓">
              Download master plan
            </Button>
            <Button
              variant="ghost"
              style={{ borderColor: CK.charcoal + "33" }}
              after="→"
            >
              Plot finder
            </Button>
          </div>
        </div>
      </Reveal>

      {/* 3D plan rendering */}
      <Reveal
        delay={120}
        y={40}
        style={{
          position: "relative",
          aspectRatio: "16/9",
          background: CK.estateGreen,
          borderRadius: 4,
          overflow: "hidden",
        }}
      >
        <Photo
          src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=2000&q=85"
          caption="3D estate master plan · isometric render · 38 ha"
          // credit="ARCH · Studio Oluàdé"
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: 0,
            height: "100%",
          }}
          overlay={false}
        />
        {/* Plot legend overlay */}
        <div
          style={{
            position: "absolute",
            top: 24,
            left: 24,
            background: "rgba(250,247,242,0.96)",
            color: CK.charcoal,
            padding: 22,
            borderRadius: 4,
            minWidth: 260,
            boxShadow: "0 20px 60px rgba(0,0,0,0.25)",
          }}
        >
          <Mono size={10} color={CK.slate}>
            Legend
          </Mono>
          <div
            style={{
              marginTop: 14,
              display: "flex",
              flexDirection: "column",
              gap: 10,
            }}
          >
            {[
              [CK.estateGreen, "Residential plots", "47 of 110"],
              [CK.brass, "Amenities & courts", "11 zones"],
              [CK.sage, "Greenbelt & cocoa grove", "14 ha"],
              ["#8aa6c8", "Seasonal stream", "1.2 km"],
            ].map(([c, l, sub]) => (
              <div
                key={l}
                style={{ display: "flex", alignItems: "center", gap: 12 }}
              >
                <span
                  style={{
                    width: 14,
                    height: 14,
                    background: c,
                    borderRadius: 3,
                  }}
                />
                <div style={{ flex: 1 }}>
                  <div style={{ font: '500 14px "DM Sans"' }}>{l}</div>
                  <Mono size={10} color={CK.slate}>
                    {sub}
                  </Mono>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* Phase pill */}
        <div
          style={{
            position: "absolute",
            bottom: 24,
            right: 24,
            background: CK.brass,
            color: CK.charcoal,
            padding: "10px 18px",
            borderRadius: 999,
            font: '500 13px "JetBrains Mono", monospace',
            letterSpacing: "0.08em",
          }}
        >
          47 PLOTS RELEASING
        </div>
      </Reveal>
    </div>
  </section>
);

const AMENITIES = [
  ["Padel court", "○", "Two glass courts, available by app"],
  ["Multipurpose court", "□", "Football, volley, basketball"],
  ["Kids play area", "◇", "Shaded, fenced, supervised on weekends"],
  ["Supermarket", "○", "On-site, daily fresh, run by Bodija Market Co-op"],
  ["Café", "◇", "Mornings only — coffee, agege bread, soft eggs"],
  ["Public parking", "□", "180 bays for visitors and deliveries"],
  ["Gym", "○", "24h, RFID, fully equipped, with a view"],
  [
    "Facial & fingerprint gate",
    "◇",
    "No remotes, no fobs, no calls to security",
  ],
  ["Jogging track", "○", "4.2 km, soft surface, lit"],
  ["Garden pond & park", "□", "At the heart of the estate"],
  ["Seasonal stream walk", "◇", "A 600m boardwalk, blossoms in August"],
];

const SERVICES = [
  ["Drainage system", "Engineered for the heaviest July rains"],
  ["Estate security", "Trained guards, on-site 24/7"],
  ["Public Wi-Fi", "Fibre backbone, every common area"],
  ["Streetlights & cameras", "AI-monitored, low-glare"],
  ["Tarred roads", "3.2 km internal, 6m wide"],
  [
    "Power & solar",
    "2.5 MVA transformer + 1 MWp PV — your house never goes dark",
  ],
];

const Amenities = () => (
  <section
    data-ck="amenities"
    style={{ padding: "120px 56px", background: CK.ivory }}
  >
    <div style={{ maxWidth: 1440, margin: "0 auto" }}>
      <Reveal
        as="div"
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          marginBottom: 56,
        }}
      >
        <div>
          <Eyebrow>── 05 / Amenities</Eyebrow>
          <Display
            size={84}
            italic
            color={CK.charcoal}
            style={{ marginTop: 14 }}
          >
            Everything within
            <br /> <span style={{ color: CK.brass }}>reach.</span>
          </Display>
        </div>
        <Body size={16} style={{ maxWidth: 360, paddingBottom: 12 }}>
          Each amenity within a 4-minute walk of the furthest plot.
        </Body>
      </Reveal>

      {/* Amenities grid */}
      <Stagger
        gap={50}
        initialDelay={120}
        y={18}
        data-ck="amenity-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 1,
          background: CK.charcoal + "14",
          border: `1px solid ${CK.charcoal}14`,
          borderRadius: 4,
          overflow: "hidden",
        }}
      >
        {AMENITIES.map(([t, g, sub], i) => (
          <div
            key={t}
            className={i === 0 || i === 5 || i === 10 ? "" : "ck-tile"}
            style={{
              background:
                i === 0 || i === 5 || i === 10 ? CK.estateGreen : CK.ivory,
              color: i === 0 || i === 5 || i === 10 ? CK.ivory : CK.charcoal,
              padding: "32px 28px",
              minHeight: 200,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
            }}
          >
            <div
              style={{
                font: '300 36px "Fraunces", serif',
                fontStyle: "italic",
                color: i === 0 || i === 5 || i === 10 ? CK.brass : CK.brass,
              }}
            >
              {g}
            </div>
            <div>
              <Display
                size={26}
                italic
                color={i === 0 || i === 5 || i === 10 ? CK.ivory : CK.charcoal}
              >
                {t}
              </Display>
              <Body
                size={13}
                color={
                  i === 0 || i === 5 || i === 10
                    ? "rgba(250,247,242,0.75)"
                    : CK.slate
                }
                style={{ marginTop: 8 }}
              >
                {sub}
              </Body>
            </div>
          </div>
        ))}
        {/* fills to complete grid (12 cells) */}
        <div
          className="ck-tile"
          style={{
            background: CK.brass,
            padding: "32px 28px",
            minHeight: 200,
            color: CK.charcoal,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
          }}
        >
          <Mono size={10} color={CK.charcoal}>
            +11 more
          </Mono>
          <div>
            <Display size={26} italic color={CK.charcoal}>
              The full list
            </Display>
            <Body size={13} color={CK.charcoal} style={{ marginTop: 8 }}>
              From padel to plumbing — the brochure has every spec.
            </Body>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 6,
                color: CK.charcoal,
                marginTop: 12,
                font: '500 13px "DM Sans"',
              }}
            >
              Download →{" "}
            </div>
          </div>
        </div>
      </Stagger>

      {/* Services strip */}
      <Reveal as="div" style={{ marginTop: 80 }}>
        <Eyebrow>── 06 / Estate services</Eyebrow>
        <Display size={56} italic color={CK.charcoal} style={{ marginTop: 14 }}>
          Everything underground,
          <br />
          so nothing surprises you.
        </Display>
        <Stagger
          gap={60}
          initialDelay={120}
          y={16}
          data-ck="services-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 1,
            marginTop: 36,
            background: CK.charcoal + "14",
            border: `1px solid ${CK.charcoal}14`,
            borderRadius: 4,
            overflow: "hidden",
          }}
        >
          {SERVICES.map(([t, d], i) => (
            <div
              key={t}
              className="ck-tile"
              style={{
                background: CK.stone,
                padding: "28px 26px",
                minHeight: 140,
              }}
            >
              <Mono size={10} color={CK.brass}>
                0{i + 1}
              </Mono>
              <div
                style={{
                  font: '500 22px "Fraunces", serif',
                  fontStyle: "italic",
                  color: CK.charcoal,
                  marginTop: 8,
                }}
              >
                {t}
              </div>
              <Body size={13} color={CK.slate} style={{ marginTop: 6 }}>
                {d}
              </Body>
            </div>
          ))}
        </Stagger>
      </Reveal>
    </div>
  </section>
);

window.IntroBlock = IntroBlock;
window.VideoBlock = VideoBlock;
window.MasterPlan = MasterPlan;
window.Amenities = Amenities;
