// Kinscape — Landing (Direction A, promoted)
// Full-bleed prototype. One font (Inter). Logo-led. No navbar.
// Interactions:
//  - Top hairline scroll progress
//  - Logo cursor parallax + heart pulse on load
//  - Dock auto-activates on scroll, smooth-scrolls on click
//  - Hover-magnetic dock items
//  - Scroll-reveal fade/translate on every section
//  - Subscribe form with validation + success state
//  - Cmd/Ctrl+K opens "Contact" sheet

const F = "'Inter', system-ui, -apple-system, sans-serif";
const ink = "#0A0A0A";
const dim = "rgba(10,10,10,0.55)";
const mute = "rgba(10,10,10,0.34)";
const hair = "rgba(10,10,10,0.08)";
const paper = "#F5F2EC";
const red = "#C7172A";

const useIsMobile = () => {
  const getIsMobile = () =>
    typeof window !== "undefined" &&
    (window.matchMedia("(max-width: 720px)").matches ||
      window.matchMedia("(pointer: coarse)").matches);
  const [isMobile, setIsMobile] = React.useState(getIsMobile);

  React.useEffect(() => {
    const onResize = () => setIsMobile(getIsMobile());
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  return isMobile;
};

// ─── Reveal hook ──────────────────────────────────────────────────────────
const useReveal = () => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (es) => {
        es.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.18 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [
    ref,
    {
      opacity: shown ? 1 : 0,
      transform: shown ? "translateY(0)" : "translateY(18px)",
      transition: "opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1)",
    },
    shown,
  ];
};

// ─── Word-by-word reveal ──────────────────────────────────────────────────
// Recursively pull plain text out of children. The host wraps JSX text nodes
// in tracking components, so children may be a React element whose own
// `props.children` is the actual string.
const extractText = (node) => {
  if (node == null || typeof node === "boolean") return "";
  if (typeof node === "string" || typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(extractText).join("");
  if (node.props && node.props.children !== undefined) return extractText(node.props.children);
  return "";
};

const RevealText = ({ children, shown, delay = 0, color }) => {
  const text = extractText(children).replace(/\s+/g, " ").trim();
  const words = text ? text.split(" ") : [];
  return (
    <span>
      {words.map((w, i) => (
        <span
          key={i}
          style={{ display: "inline-block", overflow: "hidden", verticalAlign: "top" }}
        >
          <span
            style={{
              display: "inline-block",
              transform: shown ? "translateY(0)" : "translateY(110%)",
              opacity: shown ? 1 : 0,
              color: color,
              transition: `transform 900ms cubic-bezier(.2,.7,.2,1) ${delay + i * 28}ms, opacity 900ms cubic-bezier(.2,.7,.2,1) ${delay + i * 28}ms`,
            }}
          >
            {w}
          </span>
          {i < words.length - 1 && <span>&nbsp;</span>}
        </span>
      ))}
    </span>
  );
};

// ─── Seamless dock pill ──────────────────────────────────────────────────
const NavLink = ({ children, active, onClick }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        border: "none",
        background: "transparent",
        color: active ? ink : hover ? ink : dim,
        fontFamily: F,
        fontSize: 13,
        fontWeight: 400,
        letterSpacing: "0",
        padding: "8px 18px",
        cursor: "pointer",
        borderRadius: 999,
        transition: "color 220ms",
      }}
    >
      {children}
    </button>
  );
};

// ─── Subscribe form ───────────────────────────────────────────────────────
const Subscribe = () => {
  const [email, setEmail] = React.useState("");
  const [state, setState] = React.useState("idle"); // idle | error | success
  const submit = (e) => {
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    if (!ok) return setState("error");
    setState("success");
  };
  if (state === "success") {
    return (
      <div
        style={{
          marginTop: 64,
          maxWidth: 480,
          margin: "64px auto 0",
          padding: "20px 24px",
          borderTop: `1px solid ${ink}`,
          fontSize: 15,
          color: ink,
          textAlign: "left",
          display: "flex",
          alignItems: "center",
          gap: 14,
        }}
      >
        <span
          style={{
            width: 8,
            height: 8,
            borderRadius: "50%",
            background: red,
            display: "inline-block",
          }}
        />
        Thank you. We will be in touch.
      </div>
    );
  }
  return (
    <form
      onSubmit={submit}
      style={{
        marginTop: 64,
        display: "flex",
        alignItems: "center",
        gap: 16,
        borderBottom: `1px solid ${state === "error" ? red : ink}`,
        paddingBottom: 14,
        maxWidth: 480,
        margin: "64px auto 0",
        transition: "border-color 200ms",
      }}
    >
      <input
        type="email"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
          if (state === "error") setState("idle");
        }}
        placeholder="name@department.gov.uk"
        style={{
          flex: 1,
          background: "transparent",
          border: "none",
          outline: "none",
          color: ink,
          fontFamily: F,
          fontSize: 17,
          fontWeight: 400,
          textAlign: "left",
        }}
      />
      <button
        style={{
          background: "transparent",
          border: "none",
          color: ink,
          fontFamily: F,
          fontSize: 13,
          fontWeight: 500,
          cursor: "pointer",
          padding: 0,
          letterSpacing: "0.02em",
        }}
      >
        Subscribe
      </button>
    </form>
  );
};

// ─── Contact sheet ────────────────────────────────────────────────────────
const ContactSheet = ({ open, onClose }) => {
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
    };
    if (open) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 30,
        pointerEvents: open ? "auto" : "none",
      }}
    >
      <div
        onClick={onClose}
        style={{
          position: "absolute",
          inset: 0,
          background: "rgba(10,10,10,0.4)",
          opacity: open ? 1 : 0,
          transition: "opacity 320ms",
        }}
      />
      <div
        style={{
          position: "absolute",
          right: isMobile ? 12 : 24,
          left: isMobile ? 12 : "auto",
          top: isMobile ? "auto" : 24,
          bottom: isMobile ? 12 : 24,
          width: isMobile ? "auto" : 480,
          maxHeight: isMobile ? "calc(100svh - 24px)" : "none",
          background: paper,
          borderRadius: isMobile ? 14 : 18,
          padding: isMobile ? "28px 22px" : "48px 48px",
          transform: open
            ? "translate3d(0, 0, 0)"
            : isMobile
              ? "translate3d(0, 115%, 0)"
              : "translate3d(120%, 0, 0)",
          transition: "transform 460ms cubic-bezier(.2,.7,.2,1)",
          boxShadow: "0 30px 100px rgba(10,10,10,0.25)",
          display: "flex",
          flexDirection: "column",
          overflowY: "auto",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: isMobile ? 36 : 64,
          }}
        >
          <span
            style={{
              fontSize: 11,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              color: mute,
              fontWeight: 500,
            }}
          >
            Contact
          </span>
          <button
            onClick={onClose}
            style={{
              border: "none",
              background: "transparent",
              cursor: "pointer",
              fontFamily: F,
              fontSize: 13,
              color: dim,
            }}
          >
            Close (Esc)
          </button>
        </div>
        <h3
          style={{
            fontFamily: F,
            fontWeight: 300,
            fontSize: isMobile ? 30 : 40,
            lineHeight: 1.12,
            letterSpacing: "0",
            margin: 0,
          }}
        >
          For partnership and press enquiries.
        </h3>
        <div style={{ marginTop: isMobile ? 36 : 56, display: "grid", gap: isMobile ? 20 : 28 }}>
          {[
            { l: "General", v: "hello@kinscape.co.uk" },
            { l: "Partnerships", v: "partnerships@kinscape.co.uk" },
            { l: "Press", v: "press@kinscape.co.uk" },
            { l: "Office", v: "London, United Kingdom" },
          ].map((r) => (
            <div
              key={r.l}
              style={{
                display: "grid",
                gridTemplateColumns: isMobile ? "1fr" : "120px 1fr",
                alignItems: isMobile ? "start" : "center",
                gap: isMobile ? 8 : 24,
                paddingBottom: 20,
                borderBottom: `1px solid ${hair}`,
              }}
            >
              <span
                style={{
                  fontSize: 11,
                  letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  color: mute,
                  fontWeight: 500,
                }}
              >
                {r.l}
              </span>
              <span style={{ fontSize: isMobile ? 15 : 16, color: ink, fontWeight: 400, overflowWrap: "anywhere" }}>
                {r.v}
              </span>
            </div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div
          style={{
            fontSize: 12,
            color: mute,
            display: "flex",
            flexDirection: isMobile ? "column" : "row",
            gap: isMobile ? 8 : 0,
            justifyContent: "space-between",
            paddingTop: 24,
            borderTop: `1px solid ${hair}`,
          }}
        >
          <span>Kinscape Ltd.</span>
          <span>Registered in England &amp; Wales</span>
        </div>
      </div>
    </div>
  );
};

// ─── Logo with hover nav ──────────────────────────────────────────────────
const LogoNav = ({ goTo, embolden, pulse, heroT, isMobile }) => {
  const [hover, setHover] = React.useState(false);
  const [linkHover, setLinkHover] = React.useState(null);
  const timerRef = React.useRef(null);

  const onEnter = () => {
    clearTimeout(timerRef.current);
    setHover(true);
  };
  const onLeave = () => {
    timerRef.current = setTimeout(() => setHover(false), 320);
  };

  React.useEffect(() => () => clearTimeout(timerRef.current), []);

  const show = (hover && embolden) || (isMobile && embolden);

  return (
    <div
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        position: "relative",
      }}
    >
      {/* Nav — links stagger in one by one */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: isMobile ? 22 : 32,
          marginBottom: isMobile ? 8 : 2,
          pointerEvents: show ? "auto" : "none",
        }}
      >
        <button
          onMouseEnter={() => setLinkHover("mission")}
          onMouseLeave={() => setLinkHover(null)}
          onClick={() => { window.location.href = "mission.html"; }}
          style={{
            fontFamily: "'Nunito', sans-serif",
            fontSize: isMobile ? 17 : 18,
            fontWeight: 800,
            letterSpacing: "0",
            color: linkHover === "mission" ? red : ink,
            background: "none",
            border: "none",
            cursor: "pointer",
            padding: 0,
            opacity: show ? 1 : 0,
            transform: show ? "translateY(0)" : "translateY(6px)",
            transition: "opacity 280ms cubic-bezier(.22,.9,.32,1) 0ms, transform 280ms cubic-bezier(.22,.9,.32,1) 0ms, color 200ms",
          }}
        >
          mission
        </button>
        <a
          href="mailto:info@kinscape.group"
          onMouseEnter={() => setLinkHover("enquiries")}
          onMouseLeave={() => setLinkHover(null)}
          style={{
            fontFamily: "'Nunito', sans-serif",
            fontSize: isMobile ? 17 : 18,
            fontWeight: 800,
            letterSpacing: "0",
            color: linkHover === "enquiries" ? red : ink,
            textDecoration: "none",
            cursor: "pointer",
            padding: 0,
            opacity: show ? 1 : 0,
            transform: show ? "translateY(0)" : "translateY(6px)",
            transition: "opacity 280ms cubic-bezier(.22,.9,.32,1) 140ms, transform 280ms cubic-bezier(.22,.9,.32,1) 140ms, color 200ms",
          }}
        >
          enquiries
        </a>
      </div>

      <img
        src="assets/kinscape-logo.png"
        alt="Kinscape"
        style={{
          width: isMobile ? "78vw" : "min(720px, 62vw)",
          maxWidth: isMobile ? 320 : "none",
          display: "block",
          cursor: "pointer",
          transform: `scale(${(embolden ? 1 : pulse ? 0.965 : 0.94) * (1 - heroT * 0.06)})`,
          opacity: embolden ? 1 - heroT * 0.55 : pulse ? 0.7 : 0,
          filter: embolden ? "blur(0)" : pulse ? "blur(2px)" : "blur(8px)",
          transition:
            "opacity 900ms cubic-bezier(.22,.9,.32,1), filter 900ms cubic-bezier(.22,.9,.32,1), transform 1100ms cubic-bezier(.22,.9,.32,1)",
          willChange: "transform, opacity",
        }}
        onClick={() => { window.location.href = "mission.html"; }}
      />
    </div>
  );
};

// ─── Page ─────────────────────────────────────────────────────────────────
const KinscapeLanding = () => {
  const heroRef = React.useRef(null);
  const sketchImgRef = React.useRef(null);
  const colorImgRef = React.useRef(null);
  const [cursor, setCursor] = React.useState({ x: 0.5, y: 0.5, in: false });
  const [active, setActive] = React.useState("intro");
  const [progress, setProgress] = React.useState(0);
  const [pulse, setPulse] = React.useState(false);
  const [embolden, setEmbolden] = React.useState(false);
  const [sketchStart, setSketchStart] = React.useState(false);
  const [contactOpen, setContactOpen] = React.useState(false);
  const isMobile = useIsMobile();

  // Cursor for hero
  React.useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setCursor({
        x: (e.clientX - r.left) / r.width,
        y: (e.clientY - r.top) / r.height,
        in: true,
      });
    };
    const onLeave = () => setCursor((c) => ({ ...c, in: false }));
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  // Scroll progress + active section
  React.useEffect(() => {
    const ids = ["intro", "mission", "letters"];
    const onScroll = () => {
      const doc = document.documentElement;
      const total = doc.scrollHeight - window.innerHeight;
      setProgress(total > 0 ? window.scrollY / total : 0);

      const probe = window.scrollY + window.innerHeight * 0.4;
      let cur = "intro";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= probe) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Sequence: logo enters → emboldens → sketch starts drawing
  React.useEffect(() => {
    const t1 = setTimeout(() => setPulse(true), 600);
    const t2 = setTimeout(() => setEmbolden(true), 1700);
    const t3 = setTimeout(() => setSketchStart(true), 2400);
    return () => {
      clearTimeout(t1);
      clearTimeout(t2);
      clearTimeout(t3);
    };
  }, []);

  // Sketch-in + paint-on animation
  // Pure CSS transitions for buttery smooth GPU-composited reveal.
  // Lines fade in first, then colour layer fades over the top.
  React.useEffect(() => {
    if (!sketchStart || !sketchImgRef.current || !colorImgRef.current) return;

    const sketchEl = sketchImgRef.current;
    const colorEl = colorImgRef.current;

    // Phase 1: lines fade in immediately
    sketchEl.style.transition = 'opacity 2800ms cubic-bezier(.22,.9,.32,1), transform 3000ms cubic-bezier(.2,.7,.2,1)';
    sketchEl.style.opacity = '0.45';

    // Phase 2: colour fades in after a delay
    const colourTimer = setTimeout(() => {
      colorEl.style.transition = 'opacity 3000ms cubic-bezier(.22,.9,.32,1), transform 3000ms cubic-bezier(.2,.7,.2,1)';
      colorEl.style.opacity = '0.55';
    }, 1800);

    return () => clearTimeout(colourTimer);
  }, [sketchStart]);

  // Cmd/Ctrl+K opens contact
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setContactOpen((v) => !v);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const goTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const sectionH = rect.height;
    const viewH = window.innerHeight;
    // Center the section in the viewport when it's shorter than the viewport,
    // otherwise align its top with a small offset.
    const offset = sectionH < viewH ? (viewH - sectionH) / 2 : 40;
    const targetY = window.scrollY + rect.top - offset;
    window.scrollTo({ top: targetY, behavior: "smooth" });
  };

  const px = (cursor.x - 0.5);
  const py = (cursor.y - 0.5);

  const [missionRef, missionStyle, missionShown] = useReveal();
  const [principlesRef, principlesStyle] = useReveal();
  const [lettersRef, lettersStyle] = useReveal();

  // Hero exit: scale + fade as you scroll past the first viewport
  const heroT = Math.min(1, progress * 4); // accelerate exit
  const artWidth = isMobile ? "max(140svh, 210vw)" : "max(174vh, 100vw, 1200px)";

  return (
    <div
      style={{
        background: paper,
        color: ink,
        fontFamily: F,
        fontFeatureSettings: "'ss01','cv11','liga'",
        minHeight: "100vh",
        position: "relative",
      }}
    >
      {/* HERO */}
      <section
        id="intro"
        ref={heroRef}
        style={{
          position: "relative",
          zIndex: 1,
          minHeight: "100svh",
          padding: 0,
          display: "block",
          overflow: "hidden",
        }}
      >
        {/* Sketch — full bleed, draw-in animation on load */}
        <div
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            pointerEvents: "none",
            zIndex: 0,

            overflow: "hidden",
          }}
        >
          {/* Green watercolour washes — positioned relative to image */}
          <div
            style={{
              position: "absolute",
              left: "50%",
              bottom: 0,
              width: artWidth,
              aspectRatio: "4 / 3",
              height: "auto",
              transform: "translateX(-50%)",
              pointerEvents: "none",
            }}
          >
            {[
              // Bottom-left dense foliage (the big bushes)
              { x: "2%",  y: "68%", w: 130, h: 110, bg: "rgba(106,153,78,0.50)" },
              { x: "4%",  y: "74%", w: 120, h: 100, bg: "rgba(85,140,65,0.45)" },
              { x: "1%",  y: "78%", w: 100, h: 80,  bg: "rgba(120,165,90,0.40)" },
              // Left wall plants (climbing foliage on building)
              { x: "1%",  y: "45%", w: 70,  h: 90,  bg: "rgba(106,153,78,0.40)" },
              { x: "2%",  y: "52%", w: 60,  h: 80,  bg: "rgba(85,140,65,0.35)" },
              // Background small bushes (near distant buildings)
              { x: "17%", y: "50%", w: 80,  h: 50,  bg: "rgba(120,165,90,0.28)" },
              { x: "27%", y: "49%", w: 60,  h: 40,  bg: "rgba(85,140,65,0.25)" },
              // Right side hedges — far edge only, away from building
              { x: "97%", y: "55%", w: 60, h: 70, bg: "rgba(85,140,65,0.30)" },
              { x: "98%", y: "62%", w: 50, h: 60, bg: "rgba(106,153,78,0.28)" },
              // Centre-right grass and flowers (near child)
              { x: "68%", y: "72%", w: 120, h: 70,  bg: "rgba(120,165,90,0.35)" },
              { x: "72%", y: "76%", w: 100, h: 60,  bg: "rgba(106,153,78,0.30)" },
              // Small pink accent (flowers left side ~x:7%, y:30%)
              { x: "7%",  y: "30%", w: 40,  h: 30,  bg: "rgba(210,120,140,0.35)" },
            ].map((dot, i) => (
              <div
                key={i}
                style={{
                  position: "absolute",
                  left: dot.x,
                  top: dot.y,
                  width: dot.w,
                  height: dot.h,
                  borderRadius: "50%",
                  background: dot.bg,
                  filter: "blur(30px)",
                  transform: "translate(-50%, -50%)",
                  opacity: sketchStart ? 1 : 0,
                  transition: `opacity 3000ms cubic-bezier(.22,.9,.32,1) ${1800 + i * 100}ms`,
                }}
              />
            ))}
          </div>
          <img
            ref={sketchImgRef}
            src="assets/kinscape-bg-lines.png"
            alt=""
            style={{
              position: "absolute",
              left: "50%",
              bottom: 0,
              width: artWidth,
              height: "auto",
              transform: `translateX(-50%) scale(${sketchStart ? 1 : 1.02})`,
              transformOrigin: "center bottom",
              transition: "transform 3000ms cubic-bezier(.2,.7,.2,1)",
              opacity: 0,
            }}
          />
          {/* Colour layer — revealed with expanding watercolour blobs */}
          <img
            ref={colorImgRef}
            src="assets/kinscape-bg-colour.png"
            alt=""
            style={{
              position: "absolute",
              left: "50%",
              bottom: 0,
              width: artWidth,
              height: "auto",
              transform: `translateX(-50%) scale(${sketchStart ? 1 : 1.02})`,
              transformOrigin: "center bottom",
              transition: "transform 3000ms cubic-bezier(.2,.7,.2,1)",
              opacity: 0,
            }}
          />
          {/* soft top fade so the scene dissolves into the paper */}
          <div
            style={{
              position: "absolute",
              inset: 0,
              background:
                "linear-gradient(180deg, #F6F4EF 0%, rgba(246,244,239,0.75) 14%, rgba(246,244,239,0.0) 32%, rgba(246,244,239,0.0) 100%)",
              pointerEvents: "none",
              opacity: sketchStart ? 1 : 0,
              transition: "opacity 2000ms cubic-bezier(.2,.7,.2,1) 800ms",
            }}
          />
        </div>

        {/* Foreground stack — logo high in the sky, copy nestled into the road below */}
        <div
          style={{
            position: "relative",
            zIndex: 2,
            minHeight: "100svh",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            padding: isMobile ? "0 24px" : "0 80px",
            paddingBottom: isMobile ? "34svh" : "32vh",
            gap: isMobile ? 20 : 32,
          }}
        >
          {/* Logo — hover reveals nav options */}
          <LogoNav
            goTo={goTo}
            embolden={embolden}
            pulse={pulse}
            heroT={heroT}
            isMobile={isMobile}
          />
        </div>
      </section>

      <ContactSheet open={contactOpen} onClose={() => setContactOpen(false)} />

      <style>{`
        @keyframes kin-sheen {
          0% { transform: translateX(-200%) skewX(-14deg); }
          60% { transform: translateX(420%) skewX(-14deg); }
          100% { transform: translateX(420%) skewX(-14deg); }
        }
        @keyframes kin-float {
          0%, 100% { translate: 0 0; }
          50% { translate: 0 -6px; }
        }
        @keyframes kin-scroll {
          0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.55; }
          50% { transform: scaleY(0.4); opacity: 1; }
        }
        ::selection { background: ${red}; color: ${paper}; }
        html { scroll-behavior: smooth; }
        body { margin: 0; overflow-x: hidden; }
        img { max-width: 100%; }
        @media (max-width: 720px) {
          html, body, #root { min-height: 100%; }
        }
        a { color: inherit; }
      `}</style>
    </div>
  );
};

// Principle card with hairline grow on hover
const Principle = ({ title, body, delay }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        paddingTop: 6,
        cursor: "default",
        transition: `all 700ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
      }}
    >
      <span
        style={{
          position: "absolute",
          top: -1,
          left: 0,
          height: 1,
          width: 0,
          background: "transparent",
          transition: "width 600ms cubic-bezier(.2,.7,.2,1)",
        }}
      />
      <h3
        style={{
          fontWeight: 500,
          fontSize: 15,
          margin: "20px 0 14px",
        }}
      >
        {title}
      </h3>
      <p
        style={{
          fontSize: 14,
          lineHeight: 1.65,
          color: dim,
          margin: 0,
        }}
      >
        {body}
      </p>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<KinscapeLanding />);