const { useState, useEffect } = React;

const C = {
  linen: "#FAF8F3",
  navy: "#1A3D5C",
  lime: "#C8F135",
  slate: "#2C2C2A",
  tan1: "#E8E4D8",
  tan2: "#D4CEBC",
  tan3: "#C4A882",
  navySoft: "#E8F0F5"
};

const Label = ({ children, className = "", color = C.slate }) =>
  <span
    className={`font-body font-bold uppercase ${className}`}
    style={{ fontSize: 11, letterSpacing: "0.1em", color }}>
    {children}
  </span>;

const Btn = ({ children, variant = "navy", href = "#book", className = "", onClick }) => {
  const base = "inline-flex items-center justify-center font-body font-bold uppercase transition-all duration-200 group";
  const styles = {
    navy: { background: C.navy, color: C.linen },
    lime: { background: C.lime, color: C.slate },
    ghost: { background: "transparent", color: C.slate, border: `1px solid ${C.slate}` }
  }[variant];
  return (
    <a
      href={href}
      onClick={onClick}
      className={`${base} ${className}`}
      style={{ ...styles, fontSize: 11, letterSpacing: "0.1em", padding: "16px 28px" }}
      onMouseEnter={(e) => {
        if (variant === "navy") {
          e.currentTarget.style.background = C.slate;
          e.currentTarget.querySelector(".btn-arrow").style.color = C.lime;
        }
        if (variant === "lime") e.currentTarget.style.background = "#D6F540";
        if (variant === "ghost") {
          e.currentTarget.style.background = C.slate;
          e.currentTarget.style.color = C.linen;
        }
      }}
      onMouseLeave={(e) => {
        if (variant === "navy") {
          e.currentTarget.style.background = C.navy;
          e.currentTarget.querySelector(".btn-arrow").style.color = C.linen;
        }
        if (variant === "lime") e.currentTarget.style.background = C.lime;
        if (variant === "ghost") {
          e.currentTarget.style.background = "transparent";
          e.currentTarget.style.color = C.slate;
        }
      }}>
      <span>{children}</span>
      <span className="btn-arrow ml-3 transition-colors duration-200" style={{ color: variant === "navy" ? C.linen : C.slate }}>→</span>
    </a>
  );
};

const ImgPlaceholder = ({ label, ratio = "4/5", tone = "linen", className = "" }) => {
  const bg = tone === "navy" ? C.navy : C.tan1;
  const stripe = tone === "navy" ? "rgba(250,248,243,0.06)" : "rgba(44,44,42,0.06)";
  const fg = tone === "navy" ? C.linen : C.slate;
  return (
    <div
      className={`relative overflow-hidden ${className}`}
      style={{
        aspectRatio: ratio,
        background: `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripe} 14px 15px)`,
        color: fg
      }}>
      <div className="absolute inset-0 flex items-end p-4">
        <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10, letterSpacing: "0.08em", opacity: 0.7 }}>
          [ {label} ]
        </span>
      </div>
    </div>
  );
};

const Em = ({ children }) =>
  <em style={{ color: C.navy, fontStyle: "italic", fontWeight: 600 }}>{children}</em>;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav
      className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
      style={{
        background: scrolled ? "rgba(250,248,243,0.92)" : "transparent",
        backdropFilter: scrolled ? "blur(12px)" : "none",
        borderBottom: scrolled ? `1px solid ${C.tan1}` : "1px solid transparent"
      }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 py-5 flex items-center justify-between">
        <a href="#top" className="font-display" style={{ fontSize: 22, fontWeight: 600, color: C.slate, letterSpacing: "-0.01em" }}>
          Daniel Gwira
        </a>
        <div className="hidden md:flex items-center gap-10">
          {[["Who I help", "#who"], ["How we work", "#work"], ["About", "#about"], ["Words", "#words"]].map(([t, h]) =>
            <a key={t} href={h} className="font-body font-bold uppercase hover:opacity-100 opacity-70 transition-opacity"
              style={{ fontSize: 11, letterSpacing: "0.1em", color: C.slate }}>
              {t}
            </a>
          )}
        </div>
        <Btn variant="navy" href="#book" className="hidden sm:inline-flex">Book a call</Btn>
        <a href="#book" className="sm:hidden font-body font-bold uppercase" style={{ fontSize: 11, letterSpacing: "0.1em", color: C.navy }}>
          Book →
        </a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section id="top" className="relative pt-36 md:pt-44 pb-20 md:pb-28 overflow-hidden">
      <div className="hidden md:block absolute left-10 top-44 bottom-28" style={{ width: 1, background: C.tan2 }} />
      <div className="hidden md:block absolute right-10 top-44 bottom-28" style={{ width: 1, background: C.tan2 }} />

      <div className="max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="flex items-center gap-3 mb-8">
          <span style={{ width: 32, height: 1, background: C.slate, opacity: 0.4 }} />
          <Label>Entrepreneurship coach · Brand strategist</Label>
        </div>

        <h1
          className="font-display"
          style={{
            fontSize: "clamp(44px, 8vw, 96px)",
            lineHeight: 0.98,
            letterSpacing: "-0.02em",
            fontWeight: 600,
            color: C.slate,
            maxWidth: "16ch",
            textWrap: "balance"
          }}>
          Renew the contract.{" "}
          <span style={{ position: "relative", display: "inline-block" }}>
            <Em>Every year.</Em>
            <span
              aria-hidden
              style={{
                position: "absolute",
                left: 0,
                right: 0,
                bottom: "0.08em",
                height: 10,
                background: C.lime,
                zIndex: -1,
                opacity: 0.9
              }} />
          </span>
        </h1>

        <p
          className="mt-10 font-body"
          style={{ fontSize: "clamp(15px, 1.4vw, 18px)", lineHeight: 1.7, color: C.slate, maxWidth: "52ch", opacity: 0.85 }}>
          I help aspiring founders and operators get sharp on the thing they actually sell, the people they actually serve, and the next move that actually matters. It's not easy. But it sure is simple.
        </p>

        <div className="mt-10 flex flex-wrap items-center gap-5">
          <Btn variant="navy" href="#book">Book a discovery call</Btn>
          <a
            href="#work"
            className="font-body font-bold uppercase flex items-center gap-2 group"
            style={{ fontSize: 11, letterSpacing: "0.1em", color: C.slate }}>
            See how we work
            <span className="transition-transform group-hover:translate-x-1">↓</span>
          </a>
        </div>

        <div className="mt-20 md:mt-28 flex flex-wrap items-end justify-between gap-6 pt-6" style={{ borderTop: `1px solid ${C.tan2}` }}>
          <div className="flex items-center gap-3">
            <span className="block" style={{ width: 8, height: 8, background: C.lime, borderRadius: 999 }} />
            <Label>Currently booking · Q3 cohort</Label>
          </div>
          <Label color={C.slate}>Toronto → everywhere</Label>
          <Label color={C.slate}>Est. 2014</Label>
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const items = [
    { n: "120+", l: "Founders coached" },
    { n: "94%", l: "Contract renewal rate" },
    { n: "11", l: "Years in the work" },
    { n: "$40M+", l: "Client revenue moved" }
  ];
  return (
    <section style={{ background: C.navy, color: C.linen }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 py-14 md:py-20">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-12 md:gap-y-0">
          {items.map((it, i) =>
            <div
              key={i}
              className="px-4 md:px-8"
              style={{ borderLeft: i === 0 ? "none" : `1px solid rgba(250,248,243,0.18)` }}>
              <div
                className="font-display"
                style={{ fontSize: "clamp(48px, 6vw, 80px)", lineHeight: 1, fontWeight: 600, letterSpacing: "-0.02em", color: C.linen }}>
                {it.n}
              </div>
              <div className="mt-4">
                <Label color={C.lime}>{it.l}</Label>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Who() {
  const pains = [
    {
      k: "01",
      t: "You're busy. You're not sure it's the right busy.",
      b: "The calendar is full. Revenue's fine. But somewhere underneath it, you've stopped asking whether any of this is the thing you actually want to be building."
    },
    {
      k: "02",
      t: "You can describe what you do. You can't describe why anyone should care.",
      b: "Your About page works. Your sales calls don't quite. The story is close, but it isn't tight — and you can feel it costing you on the third question, every time."
    },
    {
      k: "03",
      t: "You know the next move. You're avoiding the conversation.",
      b: "Nobody wants to tell the flipping truth — to a co-founder, a client, a hire, themselves. We start there. Then the rest gets simple."
    }
  ];
  return (
    <section id="who" className="py-24 md:py-32" style={{ background: C.linen }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="md:grid md:grid-cols-12 md:gap-10">
          <div className="md:col-span-4 mb-12 md:mb-0">
            <Label>01 — Who I help</Label>
            <h2
              className="font-display mt-6"
              style={{ fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 600, color: C.slate }}>
              You're already <Em>good at this.</Em> You're stuck on the part nobody warned you about.
            </h2>
          </div>
          <div className="md:col-span-8 md:pl-10" style={{ borderLeft: `1px solid ${C.tan2}` }}>
            {pains.map((p, i) =>
              <div
                key={i}
                className="py-8 md:py-10"
                style={{ borderTop: i === 0 ? "none" : `1px solid ${C.tan2}` }}>
                <div className="flex items-start gap-6 md:gap-10">
                  <span className="font-display" style={{ fontSize: 28, fontWeight: 600, color: C.tan3, fontStyle: "italic", minWidth: 36 }}>
                    {p.k}
                  </span>
                  <div>
                    <h3
                      className="font-display"
                      style={{ fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.2, letterSpacing: "-0.01em", fontWeight: 600, color: C.slate }}>
                      {p.t}
                    </h3>
                    <p className="font-body mt-4" style={{ fontSize: 15, lineHeight: 1.85, color: C.slate, opacity: 0.82, maxWidth: "62ch" }}>
                      {p.b}
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Work() {
  const services = [
    {
      tag: "Service 01",
      name: "1:1 Coaching",
      desc: "Twelve weeks. Two calls a month. We get your story tight and your next move obvious.",
      meta: "12 weeks · 2x monthly",
      cta: "Apply for coaching",
      featured: true
    },
    {
      tag: "Service 02",
      name: "Group Workshop",
      desc: "A small room of operators, one focused day, the question you've been avoiding answered out loud.",
      meta: "1 day · max 8 seats",
      cta: "See upcoming dates",
      featured: false
    },
    {
      tag: "Service 03",
      name: "Brand Strategy",
      desc: "A two-week sprint to name the thing, sharpen the offer, and write the words that finally sound like you.",
      meta: "2 weeks · fixed scope",
      cta: "Start a sprint",
      featured: false
    }
  ];
  return (
    <section id="work" className="py-24 md:py-32" style={{ background: C.tan1 }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between mb-14 md:mb-20 gap-6">
          <div>
            <Label>02 — How we work together</Label>
            <h2
              className="font-display mt-6"
              style={{ fontSize: "clamp(32px, 4.4vw, 56px)", lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 600, color: C.slate, maxWidth: "18ch" }}>
              Three ways in. <Em>One question</Em> underneath all of them.
            </h2>
          </div>
          <p className="font-body" style={{ fontSize: 14, lineHeight: 1.85, color: C.slate, opacity: 0.78, maxWidth: "32ch" }}>
            Pick the container that fits. We start with what's actually true and build from there — not the other way around.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-px" style={{ background: C.tan2 }}>
          {services.map((s, i) =>
            <article
              key={i}
              className="relative p-8 md:p-10 flex flex-col group transition-colors duration-300"
              style={{ background: C.linen, minHeight: 460 }}
              onMouseEnter={(e) => e.currentTarget.style.background = C.navySoft}
              onMouseLeave={(e) => e.currentTarget.style.background = C.linen}>
              <div className="flex items-center justify-between">
                <Label color={s.featured ? C.navy : C.slate}>{s.tag}</Label>
                {s.featured &&
                  <span
                    className="font-body font-bold uppercase"
                    style={{ fontSize: 9, letterSpacing: "0.12em", background: C.lime, color: C.slate, padding: "5px 8px" }}>
                    Most asked for
                  </span>
                }
              </div>
              <h3
                className="font-display mt-6"
                style={{ fontSize: "clamp(30px, 3vw, 40px)", lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 600, color: C.slate }}>
                {s.name}
              </h3>
              <p className="font-body mt-5" style={{ fontSize: 15, lineHeight: 1.75, color: C.slate, opacity: 0.85 }}>
                {s.desc}
              </p>
              <div className="mt-auto pt-10">
                <div className="pb-5 mb-5" style={{ borderBottom: `1px solid ${C.tan2}` }}>
                  <Label color={C.slate}>{s.meta}</Label>
                </div>
                <a
                  href="#book"
                  className="font-body font-bold uppercase inline-flex items-center justify-between w-full group/cta"
                  style={{ fontSize: 11, letterSpacing: "0.1em", color: C.navy }}>
                  <span>{s.cta}</span>
                  <span className="transition-transform duration-200 group-hover/cta:translate-x-1">→</span>
                </a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="py-24 md:py-32" style={{ background: C.linen }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="md:grid md:grid-cols-12 md:gap-12 items-start">
          <div className="md:col-span-5 mb-10 md:mb-0">
            <div className="relative">
              <ImgPlaceholder label="portrait · daniel · 4:5" ratio="4/5" tone="linen" />
              <div
                className="absolute -bottom-4 -right-4 hidden md:block"
                style={{ background: C.lime, padding: "14px 18px", fontFamily: "ui-monospace, monospace", fontSize: 10, letterSpacing: "0.08em", color: C.slate }}>
                EST. 2014
              </div>
            </div>
            <div className="mt-6 flex items-center gap-3">
              <span style={{ width: 24, height: 1, background: C.tan3 }} />
              <Label color={C.slate}>Toronto, ON</Label>
            </div>
          </div>

          <div className="md:col-span-7">
            <Label>03 — About</Label>
            <h2
              className="font-display mt-6"
              style={{ fontSize: "clamp(36px, 4.6vw, 60px)", lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 600, color: C.slate }}>
              <Em>Happy to see you.</Em>
            </h2>

            <div className="mt-8 space-y-5 font-body" style={{ fontSize: 16, lineHeight: 1.85, color: C.slate, opacity: 0.9, maxWidth: "58ch" }}>
              <p>
                I'm Daniel. I make sure people renew contracts every year. That's the line I use at parties because it's funny and because it's the truest thing I can say about the work in one sentence.
              </p>
              <p>
                The longer version: I sit across from founders and operators when the strategy deck has stopped helping and the spreadsheet has stopped helping and what's left is a real conversation about what they're actually building. That's where I'm useful.
              </p>
              <p>
                Before this I built brands inside agencies, ran a small studio, and learned the hard way that most stuck businesses are stuck on a sentence — not a strategy. Remaining curious is the answer to most problems. The rest of the work is doing what we already know.
              </p>
            </div>

            <div className="mt-12 pl-6" style={{ borderLeft: `2px solid ${C.lime}` }}>
              <p
                className="font-display"
                style={{ fontSize: "clamp(22px, 2.6vw, 30px)", lineHeight: 1.25, letterSpacing: "-0.01em", fontWeight: 600, color: C.navy, fontStyle: "italic" }}>
                "Nobody wants to tell the flipping truth. We start there."
              </p>
            </div>

            <div className="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-6">
              {["Nike", "Stripe", "A24", "Verge"].map((n) =>
                <div key={n} className="pt-4" style={{ borderTop: `1px solid ${C.tan2}` }}>
                  <Label color={C.slate}>{n}</Label>
                  <div className="mt-1 font-body" style={{ fontSize: 11, color: C.slate, opacity: 0.55, fontStyle: "italic" }}>
                    Past collab
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    {
      q: "Two sessions in I rewrote our homepage. Three months in we doubled our retainer rate. Daniel doesn't add — he takes things away until what's left is true.",
      n: "Maya Okafor",
      r: "Founder, Ledgerline Studio"
    },
    {
      q: "He asked me one question I'd been avoiding for a year. I cried, then I answered it, then I shipped the thing. That's the work.",
      n: "Theo Marchetti",
      r: "CEO, Northbound"
    },
    {
      q: "The most expensive thing in my business was the story I kept telling about it. Daniel rewrote it with me in four weeks.",
      n: "Priya Raman",
      r: "Director, Kinfolk Goods"
    }
  ];
  return (
    <section id="words" className="py-24 md:py-32" style={{ background: C.slate, color: C.linen }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between mb-14 md:mb-20 gap-6">
          <div>
            <Label color={C.lime}>04 — In their words</Label>
            <h2
              className="font-display mt-6"
              style={{ fontSize: "clamp(32px, 4.4vw, 56px)", lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 600, color: C.linen, maxWidth: "16ch" }}>
              The quote I'm <span style={{ color: C.lime, fontStyle: "italic" }}>most proud of</span> is the one about renewing.
            </h2>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-6 md:gap-8">
          {quotes.map((t, i) =>
            <figure
              key={i}
              className="p-8 flex flex-col"
              style={{ background: "rgba(250,248,243,0.04)", border: `1px solid rgba(250,248,243,0.12)`, minHeight: 380 }}>
              <span
                className="font-display"
                aria-hidden
                style={{ fontSize: 80, lineHeight: 0.6, color: C.lime, fontStyle: "italic", fontWeight: 600, height: 32 }}>
                "
              </span>
              <blockquote
                className="font-display mt-6 flex-1"
                style={{ fontSize: "clamp(18px, 1.6vw, 22px)", lineHeight: 1.4, fontWeight: 600, color: C.linen, letterSpacing: "-0.005em" }}>
                {t.q}
              </blockquote>
              <figcaption className="mt-8 pt-6 flex items-center gap-4" style={{ borderTop: `1px solid rgba(250,248,243,0.18)` }}>
                <div
                  className="flex items-center justify-center font-display"
                  style={{ width: 44, height: 44, borderRadius: 999, background: C.tan3, color: C.slate, fontWeight: 600, fontSize: 18, fontStyle: "italic" }}>
                  {t.n[0]}
                </div>
                <div>
                  <div className="font-body font-bold uppercase" style={{ fontSize: 11, letterSpacing: "0.1em", color: C.linen }}>
                    {t.n}
                  </div>
                  <div className="font-body" style={{ fontSize: 11, color: C.linen, opacity: 0.6, marginTop: 3 }}>
                    {t.r}
                  </div>
                </div>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>
  );
}

function Book() {
  return (
    <section id="book" className="relative overflow-hidden" style={{ background: C.linen }}>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 py-24 md:py-36">
        <div className="md:grid md:grid-cols-12 md:gap-10 items-end">
          <div className="md:col-span-8">
            <Label>05 — Book a call</Label>
            <h2
              className="font-display mt-6"
              style={{ fontSize: "clamp(48px, 8vw, 110px)", lineHeight: 0.95, letterSpacing: "-0.025em", fontWeight: 600, color: C.slate, textWrap: "balance" }}>
              Thirty minutes. <Em>No pitch.</Em>
            </h2>
            <p className="mt-8 font-body" style={{ fontSize: 17, lineHeight: 1.75, color: C.slate, opacity: 0.85, maxWidth: "48ch" }}>
              Tell me what you're building and where it's stuck. I'll tell you whether I can help, and if not, who probably can. It's not easy. But it sure is simple.
            </p>
          </div>

          <div className="md:col-span-4 mt-10 md:mt-0">
            <div className="p-7" style={{ background: C.navy, color: C.linen }}>
              <Label color={C.lime}>Next openings</Label>
              <ul className="mt-5 space-y-3 font-body" style={{ fontSize: 14 }}>
                {[
                  ["Tue, May 12", "10:30 AM ET"],
                  ["Thu, May 14", "2:00 PM ET"],
                  ["Mon, May 18", "11:00 AM ET"]
                ].map(([d, t]) =>
                  <li key={d} className="flex items-center justify-between pb-3" style={{ borderBottom: `1px solid rgba(250,248,243,0.18)` }}>
                    <span>{d}</span>
                    <span style={{ opacity: 0.7 }}>{t}</span>
                  </li>
                )}
              </ul>
              <a
                href="#"
                className="mt-6 inline-flex items-center justify-between w-full font-body font-bold uppercase transition-all"
                style={{ background: C.lime, color: C.slate, padding: "16px 20px", fontSize: 11, letterSpacing: "0.1em" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "#D6F540"}
                onMouseLeave={(e) => e.currentTarget.style.background = C.lime}>
                Open Calendly
                <span>→</span>
              </a>
            </div>
          </div>
        </div>

        <div className="mt-24 md:mt-36 pt-10" style={{ borderTop: `1px solid ${C.tan2}` }}>
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8">
            <div
              className="font-display"
              style={{ fontSize: "clamp(56px, 14vw, 200px)", lineHeight: 0.85, letterSpacing: "-0.04em", fontWeight: 600, color: C.slate }}>
              Daniel <span style={{ fontStyle: "italic", color: C.navy }}>Gwira</span>
            </div>
            <div className="md:text-right">
              <Label>hello@danielgwira.com</Label>
              <div className="mt-3 font-body" style={{ fontSize: 12, color: C.slate, opacity: 0.6 }}>
                © 2026 — Made with care in a Brampton Coffeeshop
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div style={{ background: C.linen, color: C.slate }}>
      <Nav />
      <Hero />
      <Stats />
      <Who />
      <Work />
      <About />
      <Testimonials />
      <Book />
    </div>
  );
}

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