// About page for G Communities
const {
  useState: useStateAbout,
  useEffect: useEffectAbout,
  useRef: useRefAbout,
} = React;

function AboutHero() {
  return (
    <section
      style={{
        position: "relative",
        minHeight: "70vh",
        display: "flex",
        alignItems: "flex-end",
        paddingTop: 160,
        paddingBottom: 80,
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <Reveal>
          <p className="eyebrow" style={{ marginBottom: 24 }}>
            About G Communities
          </p>
        </Reveal>
        <ClipLines
          tag="h1"
          className="display"
          lines={[
            <>Designed to be lived in.</>,
            <>
              <span className="serif">Tended</span> to be loved.
            </>,
          ]}
        />
        <style>{`
          .about-page h1.display { font-size: clamp(48px, 7vw, 112px); line-height: 0.98; max-width: 1200px; }
        `}</style>
        <Reveal delay={300}>
          <p className="body-lg" style={{ marginTop: 40, maxWidth: 680 }}>
            We are the lifestyle and community-management arm of G Group. Where
            G Developments builds the architecture, we tend to the days, weeks,
            and seasons that follow — the small details that turn a building
            into a neighborhood, and a neighborhood into a home.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function StorySection() {
  return (
    <section className="invert-section">
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.4fr",
          gap: 80,
          alignItems: "start",
        }}
        className="about-grid"
      >
        <Reveal>
          <div className="peek" style={{ aspectRatio: "3/4" }}>
            <img
              src="uploads/about-1.jpeg"
              alt="G Communities — moments from our communities"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                display: "block",
              }}
            />
          </div>
        </Reveal>
        <div style={{ paddingTop: 60, paddingBottom: 60 }}>
          <Reveal>
            <p className="eyebrow">— Our story</p>
          </Reveal>
          <ClipLines
            tag="h2"
            className="display"
            lines={[
              <>From a single </>,
              <>
                <span className="serif">handover</span> in 2018,
              </>,
              <>to six projects today.</>,
            ]}
          />
          <style>{`
            .about-page h2.display { font-size: clamp(28px, 3.5vw, 56px); line-height: 1.05; }
            @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
          `}</style>
          <Reveal delay={150}>
            <div
              style={{
                marginTop: 40,
                display: "flex",
                flexDirection: "column",
                gap: 24,
              }}
            >
              <p className="body-lg">
                When G Developments handed over its first major project, the
                founders saw a gap that defined the next chapter of our work:
                residents had a building, but no one tending to the rhythm of
                life inside it.
              </p>
              <p className="body-lg">
                G Communities was formed to close that gap. Not as a
                property-management company in the conventional sense — but as a
                hospitality team, an events crew, a maintenance brigade, and a
                familiar face, all under one roof.
              </p>
              <p className="body-lg">
                Today, we steward six projects across Egypt — and the conviction
                that started us hasn't changed.
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function GallerySection() {
  const images = [
    { src: "uploads/about-1.jpeg", alt: "Life at a G Communities project" },
    { src: "uploads/about-2.jpeg", alt: "Life at a G Communities project" },
    // { src: "unewkairoploads/about-3.mp4", alt: "Life at a G Communities project", type: "video" },
    { src: "uploads/about-4.jpeg", alt: "Life at a G Communities project" },
    { src: "uploads/about-5.jpeg", alt: "Life at a G Communities project" },
    { src: "uploads/about-6.jpeg", alt: "Life at a G Communities project" },
  ];

  const [active, setActive] = useStateAbout(0);
  const trackRef = useRefAbout(null);
  const autoplayRef = useRefAbout(null);
  const isDragging = useRefAbout(false);
  const dragStartX = useRefAbout(0);
  const dragStartScroll = useRefAbout(0);

  function getSlideWidth() {
    const el = trackRef.current;
    if (!el || !el.children[0]) return 1;
    return el.children[0].offsetWidth + 16;
  }

  function scrollToIndex(i) {
    const el = trackRef.current;
    if (!el) return;
    el.scrollTo({ left: i * getSlideWidth(), behavior: "smooth" });
    setActive(i);
  }

  function resetAutoplay() {
    clearInterval(autoplayRef.current);
    autoplayRef.current = setInterval(() => {
      setActive((prev) => {
        const next = (prev + 1) % images.length;
        const el = trackRef.current;
        if (el)
          el.scrollTo({ left: next * getSlideWidth(), behavior: "smooth" });
        return next;
      });
    }, 3500);
  }

  useEffectAbout(() => {
    resetAutoplay();
    return () => clearInterval(autoplayRef.current);
  }, [images.length]);

  function onMouseDown(e) {
    isDragging.current = true;
    dragStartX.current = e.pageX;
    dragStartScroll.current = trackRef.current.scrollLeft;
    clearInterval(autoplayRef.current);
    trackRef.current.style.cursor = "grabbing";
    trackRef.current.style.scrollSnapType = "none";
  }

  function onMouseMove(e) {
    if (!isDragging.current) return;
    const dx = e.pageX - dragStartX.current;
    trackRef.current.scrollLeft = dragStartScroll.current - dx;
  }

  function onMouseUp() {
    if (!isDragging.current) return;
    isDragging.current = false;
    trackRef.current.style.cursor = "grab";
    trackRef.current.style.scrollSnapType = "x mandatory";
    const el = trackRef.current;
    const nearest = Math.round(el.scrollLeft / getSlideWidth());
    const clamped = Math.max(0, Math.min(nearest, images.length - 1));
    scrollToIndex(clamped);
    resetAutoplay();
  }

  function onTouchStart(e) {
    dragStartX.current = e.touches[0].pageX;
    dragStartScroll.current = trackRef.current.scrollLeft;
    clearInterval(autoplayRef.current);
  }

  function onTouchEnd() {
    const el = trackRef.current;
    const nearest = Math.round(el.scrollLeft / getSlideWidth());
    const clamped = Math.max(0, Math.min(nearest, images.length - 1));
    scrollToIndex(clamped);
    resetAutoplay();
  }

  return (
    <section
      className="invert-section"
      style={{
        paddingTop: 60,
        paddingBottom: 60,
        borderTop: "1px solid rgba(0,0,0,0.1)",
      }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <Reveal>
          <p className="eyebrow" style={{ marginBottom: 40 }}>
            — In our communities
          </p>
        </Reveal>
      </div>

      <div
        ref={trackRef}
        className="about-slider-track"
        style={{
          display: "flex",
          gap: 16,
          overflowX: "auto",
          paddingLeft: 32,
          paddingRight: 32,
          scrollSnapType: "x mandatory",
          scrollbarWidth: "none",
          msOverflowStyle: "none",
          cursor: "grab",
          userSelect: "none",
        }}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
        onMouseLeave={onMouseUp}
        onTouchStart={onTouchStart}
        onTouchEnd={onTouchEnd}
        onScroll={(e) => {
          if (isDragging.current) return;
          const el = e.currentTarget;
          setActive(Math.round(el.scrollLeft / getSlideWidth()));
        }}
      >
        {images.map((img, i) => (
          <div
            key={i}
            className="peek"
            style={{
              flex: "0 0 auto",
              width: "clamp(280px, 42vw, 640px)",
              aspectRatio: "3/2",
              scrollSnapAlign: "start",
              overflow: "hidden",
              pointerEvents: "none",
            }}
          >
            {img.type === "video" ? (
              <video
                src={img.src}
                autoPlay
                muted
                loop
                playsInline
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
            ) : (
              <img
                src={img.src}
                alt={img.alt}
                draggable="false"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
            )}
          </div>
        ))}
      </div>

      <div
        style={{
          display: "flex",
          gap: 8,
          justifyContent: "center",
          marginTop: 32,
        }}
      >
        {images.map((_, i) => (
          <button
            key={i}
            onClick={() => {
              scrollToIndex(i);
              resetAutoplay();
            }}
            aria-label={`Go to image ${i + 1}`}
            style={{
              width: i === active ? 24 : 8,
              height: 8,
              borderRadius: 999,
              background: i === active ? "var(--fg)" : "var(--line)",
              border: "none",
              cursor: "pointer",
              padding: 0,
              transition: "width 0.3s ease, background 0.3s ease",
            }}
          />
        ))}
      </div>

      <style>{`
        .about-slider-track::-webkit-scrollbar { display: none; }
      `}</style>
    </section>
  );
}

function MissionVisionSection() {
  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 1fr",
            gap: 0,
            borderTop: "1px solid rgba(0,0,0,0.15)",
          }}
          className="mv-grid"
        >
          <Reveal
            style={{
              padding: "60px 64px 60px 0",
              borderRight: "1px solid rgba(0,0,0,0.1)",
            }}
          >
            <p className="eyebrow">Mission</p>
            <h3
              className="serif"
              style={{
                fontSize: "clamp(28px, 3vw, 44px)",
                fontStyle: "italic",
                marginTop: 24,
                lineHeight: 1.2,
              }}
            >
              To make every day in a G Group community feel as considered as the
              day it was designed.
            </h3>
          </Reveal>
          <Reveal delay={150} style={{ padding: "60px 0 60px 64px" }}>
            <p className="eyebrow">Vision</p>
            <h3
              className="serif"
              style={{
                fontSize: "clamp(28px, 3vw, 44px)",
                fontStyle: "italic",
                marginTop: 24,
                lineHeight: 1.2,
              }}
            >
              A new standard for residential life in Egypt — measured not in
              finishes, but in feelings.
            </h3>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .mv-grid { grid-template-columns: 1fr !important; }
            .mv-grid > *:first-child { padding: 60px 0 !important; border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; }
            .mv-grid > *:last-child { padding: 60px 0 !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function AboutCTA() {
  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={[
            <>Want to know more?</>,
            <>
              We&rsquo;d love <span className="serif">to talk.</span>
            </>,
          ]}
        />
        <Reveal delay={300}>
          <a
            href="contact.html"
            className="btn btn-primary"
            style={{ marginTop: 48 }}
          >
            Get in touch <Arrow />
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <div className="about-page">
      <Header active="about" />
      <main>
        <AboutHero />
        <StorySection />
        <GallerySection />
        <MissionVisionSection />
        <AboutCTA />
      </main>
      <Footer />
    </div>
  );
}

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