Y2K Dreamy Text

"use client";

import React, { useState, useEffect } from "react";
import DreamyBloom from "@/components/ui/y2k-dreamy-text";

export function Y2KDreamyTextGlowDemo() {
  const [windowWidth, setWindowWidth] = useState(
    typeof window !== "undefined" ? window.innerWidth : 1200
  );

  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const isMobile = windowWidth < 768;
  const isTablet = windowWidth >= 768 && windowWidth < 1024;
  const isDesktop = windowWidth >= 1024;

  const mainTitleFontSize = isMobile ? 50 : 80;
  const subTitleFontSize = isMobile ? 24 : 40;

  const title1Width = isDesktop ? "1068px" : isTablet ? "640px" : "100%";
  const width700 = windowWidth < 700 ? "100%" : "700px";

  const title1Text = isDesktop
    ? "code component\nglow text - built by goodmotion.vercel.app"
    : "code component\nglow text - built by goodmotion";

  const establishmentText =
    "Establishment of the prison system. After being constructed\nby incarcerated people, Sing Sing\nopens in New York. It is infamous\nfor its harsh conditions.";

  const title2Text =
    "The first public and separate woman's prison\n“Who Would Believe a Prisoner?” Indiana Women’s Carceral Institutions, 1848–1920";

  return (
    <div
      style={{
        backgroundColor: "#000000",
        color: "#FFFFFF",
        minHeight: "100vh",
        width: "100%",
        position: "relative",
        boxSizing: "border-box",
        paddingLeft: isMobile ? "16px" : "24px",
        paddingRight: isMobile ? "16px" : "24px",
        overflowX: "hidden",
      }}
    >
      {/* Header */}
      <header
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          right: 0,
          zIndex: 50,
          paddingLeft: isMobile ? "16px" : "24px",
          paddingRight: isMobile ? "16px" : "24px",
          paddingTop: "16px",
          paddingBottom: "16px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          backgroundColor: "#000000",
        }}
      >
        <div style={{ width: 120, height: 60, display: "flex", alignItems: "center" }}>
          <DreamyBloom
            text="logoglow"
            fontSize={32}
            letterSpacing={-2}
            rimLightRadius={1}
            hoverProximity={50}
            edgeBlur={1}
            style={{ width: 120, height: 60, padding: 0 }}
          />
        </div>

        <button
          type="button"
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: "8px",
            padding: "8px 16px",
            borderRadius: "9999px",
            border: "1px solid #FFFFFF",
            backgroundColor: "transparent",
            color: "#FFFFFF",
            fontSize: "16px",
            fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
            fontWeight: 700,
            letterSpacing: "-0.08em",
            lineHeight: 1,
            cursor: "pointer",
          }}
        >
          <span>MENU</span>
          <span style={{ fontSize: "16px", lineHeight: 1 }}>≡</span>
        </button>
      </header>

      {/* Main Content */}
      <main
        style={{
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          paddingTop: isMobile ? "200px" : "270px",
          paddingBottom: "80px",
          boxSizing: "border-box",
        }}
      >
        {/* Title 1 */}
        <div
          style={{
            marginBottom: "48px",
            width: title1Width,
            maxWidth: "100%",
            display: "flex",
            justifyContent: "center",
            boxSizing: "border-box",
          }}
        >
          <DreamyBloom
            text={title1Text}
            fontSize={mainTitleFontSize}
            style={{ padding: 0, width: "100%" }}
          />
        </div>

        {/* Text Establishment */}
        <div
          style={{
            marginBottom: "48px",
            width: width700,
            maxWidth: "100%",
            display: "flex",
            justifyContent: "center",
            boxSizing: "border-box",
          }}
        >
          <DreamyBloom
            text={establishmentText}
            fontSize={mainTitleFontSize}
            style={{ padding: 0, width: "100%" }}
          />
        </div>

        {/* Khối Card xanh giữa trang */}
        <div
          style={{
            marginBottom: "48px",
            width: width700,
            maxWidth: "100%",
            display: "flex",
            justifyContent: "center",
            boxSizing: "border-box",
          }}
        >
          <img
            src="https://cdn.21st.dev/assets/mirror/95/957f006a9f2dd878417b490ab2b6215ffde274f923e213e68ec5cf924096a854.png"
            alt="Config India Banner"
            style={{
              width: "100%",
              height: "auto",
              display: "block",
            }}
          />
        </div>

        {/* Text 1997 */}
        <div
          style={{
            marginBottom: "8px",
            width: "100%",
            display: "flex",
            justifyContent: "center",
          }}
        >
          <DreamyBloom
            text="1997"
            fontSize={subTitleFontSize}
            style={{ padding: 0 }}
          />
        </div>

        {/* Text The Indiana Women's Prison */}
        <div
          style={{
            marginBottom: "28px",
            width: "100%",
            display: "flex",
            justifyContent: "center",
          }}
        >
          <DreamyBloom
            text="The Indiana Women’s Prison"
            fontSize={subTitleFontSize}
            style={{ padding: 0 }}
          />
        </div>

        {/* Title 2 */}
        <div
          style={{
            marginBottom: "32px",
            width: width700,
            maxWidth: "100%",
            display: "flex",
            justifyContent: "center",
            boxSizing: "border-box",
          }}
        >
          <DreamyBloom
            text={title2Text}
            fontSize={mainTitleFontSize}
            style={{
              padding: 0,
              width: "100%",
            }}
          />
        </div>

        {/* Khối Media cuối trang */}
        <div
          style={{
            width: isMobile ? "100%" : "550px",
            maxWidth: "100%",
            display: "flex",
            justifyContent: "center",
            boxSizing: "border-box",
          }}
        >
          <img
            src="https://cdn.21st.dev/assets/mirror/bc/bc9cba76cdd49b98f1bcdddf134b638ec4862f2f2ce6d73051eeef2eee8389fb.png"
            alt="Who Would Believe A Prisoner Book"
            style={{
              width: "100%",
              height: "auto",
              display: "block",
            }}
          />
        </div>
      </main>
    </div>
  );
}

export default Y2KDreamyTextGlowDemo;