// Home page for G Communities
const { useState: useStateHome, useEffect: useEffectHome } = React;

function HomeHero() {
  return (
    <section
      style={{
        position: "relative",
        height: "100vh",
        minHeight: 700,
        overflow: "hidden",
      }}
    >
      <img
        src="uploads/banner.png"
        alt="hero — community lifestyle photograph"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.05) 100%)",
        }}
      ></div>

      <div
        style={{
          position: "relative",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          paddingBottom: 80,
          maxWidth: 1400,
          margin: "0 auto",
          paddingLeft: 32,
          paddingRight: 32,
        }}
      >
        <p className="eyebrow" style={{ marginBottom: 24, color: "#d8d8d8" }}>
          <Reveal as="span">G Communities</Reveal>
        </p>

        <ClipLines
          tag="h1"
          className="display"
          lines={[
            "Where the day",
            <>
              begins, <span className="serif">unfolds,</span>
            </>,
            "and softly ends.",
          ]}
          delay={120}
        />
        <h1 style={{ display: "none" }}>
          G Communities — where the day begins, unfolds, and softly ends.
        </h1>

        <style>{`
          .home-hero h1 { font-size: clamp(48px, 8vw, 128px); line-height: 0.95; max-width: 1100px; }
        `}</style>
        <Reveal delay={500}>
          <div
            style={{
              display: "flex",
              gap: 16,
              marginTop: 48,
              flexWrap: "wrap",
            }}
          >
            <a href="#communities" className="btn btn-primary">
              Explore communities <Arrow />
            </a>
          </div>
        </Reveal>
      </div>

      <div
        style={{
          position: "absolute",
          bottom: 32,
          right: 32,
          display: "flex",
          alignItems: "center",
          gap: 12,
          color: "var(--fg-muted)",
          fontSize: 12,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
        }}
      >
        <span>Scroll</span>
        <DownArrow size={20} />
      </div>
    </section>
  );
}

function IntroSection() {
  return (
    <section
      className="invert-section"
      style={{ paddingTop: 60, paddingBottom: 60 }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 2fr",
            gap: 80,
            alignItems: "start",
          }}
          className="intro-grid"
        >
          <Reveal>
            <p className="eyebrow">— 01 / Introduction</p>
          </Reveal>
          <div>
            <ClipLines
              tag="h2"
              className="display"
              lines={[
                <>A community is more than</>,
                <>
                  <span className="serif">an address.</span> It is a rhythm,
                </>,
                <>a service, and a familiar face.</>,
              ]}
            />
            <style>{`
            h2.display { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.05; }
            @media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
            .invert-section .ph { background: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 14px), linear-gradient(180deg, #f4f1ec, #ebe7e0); border-color: rgba(0,0,0,0.08); }
          `}</style>
            <Reveal delay={200}>
              <p className="body-lg" style={{ marginTop: 40, maxWidth: 640 }}>
                G Communities stewards the lived experience of every G Group
                neighborhood — from the morning concierge greeting to the
                evening lighting cue at the courtyard. We design rituals, manage
                amenities, and look after the people who call our addresses
                home.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <a
                href="about.html"
                className="under-link"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 10,
                  marginTop: 32,
                  fontSize: 14,
                }}
              >
                Read our story <Arrow size={16} />
              </a>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsSection() {
  const stats = [
    { value: "6", label: "Projects" },
    { value: "11k+", label: "Households served" },
    { value: "180+", label: "On-site staff" },
    {
      value: (
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-label="Concierge availability"
          role="img"
          style={{ width: "1em", height: "1em", display: "block" }}
        >
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5l3 2" />
        </svg>
      ),
      label: "Concierge & response",
    },
  ];
  return (
    <section
      style={{
        borderTop: "1px solid var(--line)",
        paddingTop: 80,
        paddingBottom: 80,
      }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
          }}
          className="stats-grid"
        >
          {stats.map((s, i) => (
            <Reveal
              key={i}
              delay={i * 100}
              className="stat-cell"
              style={{
                padding: "0 32px",
                borderRight: i < 3 ? "1px solid var(--line)" : "none",
              }}
            >
              <span className="stat-num">{s.value}</span>
              <p className="body" style={{ marginTop: 16 }}>
                {s.label}
              </p>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr !important; row-gap: 48px !important; }
            .stats-grid .stat-cell { border-right: none !important; padding: 0 16px !important; } }
        `}</style>
      </div>
    </section>
  );
}

function CommunitiesSection() {
  return (
    <section
      id="communities"
      style={{
        borderTop: "1px solid var(--line)",
        paddingTop: 60,
        paddingBottom: 60,
      }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            marginBottom: 64,
            gap: 32,
            flexWrap: "wrap",
          }}
        >
          <Reveal>
            <p className="eyebrow">— 02 / Communities</p>
          </Reveal>
          <ClipLines
            tag="h2"
            className="display"
            lines={[
              <>
                Our developments. <span className="serif">One standard.</span>
              </>,
            ]}
          />
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 24,
          }}
          className="comm-grid"
        >
          {projects.map((c, i) => (
            <Reveal key={c.id} delay={i * 80}>
              <a
                href={c.link}
                className="card-hover"
                style={{ display: "block" }}
              >
                <div
                  className="peek"
                  style={{ aspectRatio: "4/3", position: "relative" }}
                >
                  <img
                    src={c.image || c.placeholderImage}
                    alt={c.name}
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: "cover",
                      display: "block",
                    }}
                  />
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    marginTop: 24,
                    gap: 16,
                  }}
                >
                  <div>
                    <h3
                      style={{
                        fontSize: 24,
                        fontWeight: 300,
                        letterSpacing: "-0.01em",
                      }}
                    >
                      {c.name}
                    </h3>
                    <p className="body" style={{ marginTop: 6 }}>
                      {c.location}
                    </p>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 768px) { .comm-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function LifestyleSection() {
  const pillars = [
    {
      num: "01",
      title: "Concierge",
      body: "A single, named person who knows your name, your routine, and your preferences.",
    },
    {
      num: "02",
      title: "Amenities",
      body: "Pools, gyms, lounges, and gardens — kept to hotel standards on a daily cadence.",
    },
    {
      num: "03",
      title: "Events",
      body: "Yoga at sunrise. Farmers' markets on Saturdays. Cinema under the stars in summer.",
    },
    {
      num: "04",
      title: "Maintenance",
      body: "Two-hour response on urgent matters. Quiet, scheduled work on the rest.",
    },
  ];
  return (
    <section
      className="invert-section"
      style={{ paddingTop: 60, paddingBottom: 60 }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ marginBottom: 80 }}>
          <Reveal>
            <p className="eyebrow">— 03 / Lifestyle</p>
          </Reveal>
          <ClipLines
            tag="h2"
            className="display"
            lines={[
              <>The four quiet promises</>,
              <>
                we keep, <span className="serif">every day.</span>
              </>,
            ]}
          />
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
          }}
          className="pillars-grid"
        >
          {pillars.map((p, i) => (
            <Reveal
              key={i}
              delay={i * 100}
              style={{
                padding: "40px 24px 0",
                borderTop: "1px solid rgba(0,0,0,0.15)",
                borderRight: i < 3 ? "1px solid rgba(0,0,0,0.08)" : "none",
              }}
            >
              <p
                style={{
                  fontFamily: "var(--serif)",
                  fontStyle: "italic",
                  fontSize: 34,
                  color: "#6a6a6a",
                }}
              >
                {p.num}
              </p>
              <h3
                style={{
                  fontSize: 24,
                  fontWeight: 300,
                  marginTop: 24,
                  marginBottom: 16,
                }}
              >
                {p.title}
              </h3>
              <p className="body">{p.body}</p>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr 1fr !important; }
            .pillars-grid > * { border-right: none !important; } }
          @media (max-width: 560px) { .pillars-grid { grid-template-columns: 1fr !important; } }
        `}</style>

        <div
          style={{
            marginTop: 80,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 24,
          }}
          className="lifestyle-imgs"
        >
          <div className="peek" style={{ aspectRatio: "5/4" }}>
            <img
              src="uploads/playground.png"
              alt="rooftop yoga at dawn"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                display: "block",
              }}
            />
          </div>
          <div className="peek" style={{ aspectRatio: "5/4" }}>
            <img
              src="uploads/beach.png"
              alt="farmers' market, weekend"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                display: "block",
              }}
            />
          </div>
        </div>
        <style>{`
          @media (max-width: 768px) { .lifestyle-imgs { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section
      className="invert-section"
      style={{
        borderTop: "1px solid rgba(0,0,0,0.1)",
        paddingTop: 60,
        paddingBottom: 60,
      }}
    >
      <div
        style={{
          maxWidth: 1400,
          margin: "0 auto",
          padding: "0 32px",
          textAlign: "center",
        }}
      >
        <ClipLines
          tag="h2"
          className="display"
          lines={[
            <>Looking for a community</>,
            <>
              that <span className="serif">looks back?</span>
            </>,
          ]}
        />
        <Reveal delay={300}>
          <a
            href="contact.html"
            className="btn btn-primary"
            style={{ marginTop: 48 }}
          >
            Get in touch <Arrow />
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <Header active="home" />
      <main className="home-hero">
        <HomeHero />
        <Marquee items={projects.map((p) => p.name)} />
        <IntroSection />
        <StatsSection />
        <CommunitiesSection />
        <LifestyleSection />
        <CTASection />
      </main>
      <Footer />
    </>
  );
}

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