/* Garbashala — About / What is Garba? */

const About = () => {
  React.useEffect(() => {
    const h = (window.location.hash || "").replace(/^#/, "");
    const parts = h.split("/").filter(Boolean);
    if (parts[1] === "nine-nights") {
      requestAnimationFrame(() => {
        const el = document.getElementById("nine-nights");
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      });
    }
  }, []);
  return (
    <div className="paper-bg" style={{ minHeight: 1400, fontFamily: "var(--font-body)", color: "var(--ink)" }}>
      <NavBar active="about" />

      {/* HERO */}
      <section style={{ padding: "60px 48px 30px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: 40, top: 60, opacity: 0.25 }}>
          <Chakra size={400} color="var(--terracotta)" />
        </div>
        <div style={{ position: "absolute", left: -20, bottom: -40, opacity: 0.4 }}>
          <Feather size={150} rotate={20} />
        </div>

        <span style={{ transform: "rotate(-2deg)", display: "inline-block", fontFamily: "var(--font-handwrite)", fontSize: 26, color: "var(--terracotta)" }}>
          <Handwrite size={28} color="var(--terracotta)" speed={1.3}>a primer</Handwrite> ✦
        </span>
        <h1 style={{
          fontFamily: "var(--font-display)", fontStyle: "italic",
          fontSize: 130, lineHeight: 0.9, margin: "8px 0 0",
          color: "var(--maroon)", maxWidth: 1100,
        }}>
          what <span style={{ color: "var(--terracotta)" }}>is</span><br/>
          garba, anyway?
        </h1>
        <p style={{ fontSize: 24, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 700, marginTop: 30, fontStyle: "italic" }}>
          A 600-year-old folk dance from Gujarat, India. A nine-night festival.
          A circle around a flame. A way of saying — <span style={{ color: "var(--terracotta)", fontStyle: "normal" }}>we are still here, still dancing.</span>
        </p>
      </section>

      <div style={{ padding: "0 48px" }}>
        <HandDivider width={1304} />
      </div>

      {/* THE WORD */}
      <section className="about-word-grid" style={{ padding: "70px 48px 30px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }}>
        <div>
          <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            ↓ <Handwrite size={22} color="var(--terracotta)" speed={1.4}>the word itself</Handwrite> ↓
          </span>
          <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 56, color: "var(--maroon)", margin: "8px 0 24px", lineHeight: 1 }}>
            garba = womb-lamp
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink)", marginBottom: 14 }}>
            The word <em style={{ color: "var(--terracotta)" }}>garba</em> comes from the Sanskrit{" "}
            <em>garbha-deep</em> — "womb" + "lamp." Picture a clay pot with a small oil lamp inside,
            holes punched in the sides so light spills out. That pot is the literal center of every
            garba. Dancers form a circle around it.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)", marginBottom: 14 }}>
            The pot represents the womb of the universe. The flame inside is the soul, the
            divine feminine, the goddess. By circling it, the dancers are circling life itself —
            spinning around the source.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)" }}>
            (You'll also hear <em style={{ color: "var(--terracotta)" }}>garbi</em>, which is the same word with a diminutive suffix —
            a "little garba." And <em style={{ color: "var(--terracotta)" }}>raas</em>, a related dance with sticks called dandiyas. Different dance, different night, same festival.)
          </p>
        </div>

        <div style={{ position: "relative" }}>
          <div className="handbox" style={{ padding: 30, background: "var(--cream-warm)" }}>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}>
              <Diya size={90} />
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 26, color: "var(--terracotta)" }}>
                गर्भ + दीप
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, color: "var(--maroon)", marginTop: 6 }}>
                garbha + deep
              </div>
              <div style={{ fontSize: 17, color: "var(--ink-soft)", marginTop: 8 }}>
                womb · lamp
              </div>
              <div style={{ marginTop: 18, fontFamily: "var(--font-handwrite)", fontSize: 19, color: "var(--terracotta)" }}>
                light, held in a vessel, surrounded by people
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{ padding: "60px 48px 60px", background: "var(--cream-warm)", position: "relative" }}>
        <div className="bandhani" style={{ position: "absolute", inset: 0, opacity: 0.18, pointerEvents: "none" }} />
        <div style={{ position: "relative" }}>
          <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            ↓ a very short history ↓
          </span>
          <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 56, color: "var(--maroon)", margin: "8px 0 36px" }}>
            from temple courtyard to wembley stadium
          </h2>

          <div className="timeline-list" style={{ position: "relative" }}>
            <div className="timeline-line" style={{ position: "absolute", left: 80, top: 30, bottom: 30, borderLeft: "2px dashed var(--terracotta)" }} />
            {[
              { year: "14th c.", title: "earliest written records", body: "Bhakti-era poets like Narsinh Mehta describe women circling a lamp and singing to Goddess Amba. The garbi (lamp-pot) is already at the center." },
              { year: "1500s", title: "becomes a festival", body: "The dance gets formally tied to Navratri — nine nights honoring the goddess Durga in her many forms. Each night, a new color, a new song." },
              { year: "1800s", title: "two flavors emerge", body: "Garba (in a circle, no props, devotional) splits from raas (with dandiya sticks, mythological). They share a stage but tell different stories." },
              { year: "1970s", title: "amplified & electrified", body: "Bands replace the lone dholak. Singers like Hemant Chauhan and Kishore Manraja record garba albums. Tempos climb. Crowds get huge." },
              { year: "1990s", title: "exported & remixed", body: "Diaspora communities in the UK, US, Canada start their own Navratri Mela. DJs introduce 'disco garba' — Bollywood-tempo, modern footwork, fusion choreography." },
              { year: "today", title: "UNESCO heritage, 2023", body: "Garba is inscribed on UNESCO's Intangible Cultural Heritage list. From Vadodara temple steps to Wembley arena, the circle keeps spinning." },
            ].map(({ year, title, body }, i) => (
              <div className="timeline-item" key={year} style={{ display: "flex", gap: 24, marginBottom: 28, position: "relative" }}>
                <div style={{ flexBasis: 80, flexShrink: 0, textAlign: "right", paddingTop: 12 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--terracotta)" }}>
                    {year}
                  </div>
                </div>
                <div style={{ position: "relative", marginLeft: -8 }}>
                  <div style={{
                    position: "absolute", left: -8, top: 18, width: 16, height: 16, borderRadius: "50%",
                    background: "var(--marigold)", border: "2px solid var(--maroon)",
                  }} />
                </div>
                <div className="handbox" style={{
                  flex: 1, padding: "16px 22px",
                  transform: i % 2 === 0 ? "rotate(-0.4deg)" : "rotate(0.4deg)",
                  marginLeft: 24,
                }}>
                  <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, margin: 0, color: "var(--maroon)" }}>
                    {title}
                  </h3>
                  <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-soft)", margin: "6px 0 0" }}>
                    {body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THE 9 NIGHTS */}
      <section id="nine-nights" style={{ padding: "70px 48px 60px", scrollMarginTop: 24 }}>
        <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
          ↓ the nine nights · navratri 2026 ↓
        </span>
        <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 56, color: "var(--maroon)", margin: "8px 0 8px" }}>
          navratri, color by color
        </h2>
        <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: 720, marginBottom: 30 }}>
          Each of the nine Navratri nights is dedicated to a form of the goddess —
          and a color worn by dancers across Gujarat. Here are the dates and colors for{" "}
          <em style={{ color: "var(--terracotta)" }}>Navratri 2026</em>, Oct 11 – Oct 19.
        </p>

        <div className="nights-grid" style={{ display: "grid", gridTemplateColumns: "repeat(9, 1fr)", gap: 12 }}>
          {[
            { n: 1, name: "Shailputri", date: "Oct 11", day: "Sun", color: "#E8732E", colorName: "orange" },
            { n: 2, name: "Brahmacharini", date: "Oct 12", day: "Mon", color: "#FFFFFF", colorName: "white" },
            { n: 3, name: "Chandraghanta", date: "Oct 13", day: "Tue", color: "#C72935", colorName: "red" },
            { n: 4, name: "Kushmanda", date: "Oct 14", day: "Wed", color: "#1E3A8A", colorName: "royal blue" },
            { n: 5, name: "Skandamata", date: "Oct 15", day: "Thu", color: "#E8A33D", colorName: "yellow" },
            { n: 6, name: "Katyayani", date: "Oct 16", day: "Fri", color: "#3F7D3A", colorName: "green" },
            { n: 7, name: "Kalaratri", date: "Oct 17", day: "Sat", color: "#9C9C9C", colorName: "grey" },
            { n: 8, name: "Mahagauri", date: "Oct 18", day: "", color: "#6B2D8C", colorName: "purple" },
            { n: 9, name: "Siddhidatri", date: "Oct 19", day: "", color: "#0E7C7B", colorName: "peacock green" },
          ].map(({ n, name, date, day, color, colorName }) => {
            const lightBg = ["#FFFFFF", "#E8A33D", "#9C9C9C"].includes(color);
            return (
              <div key={n} style={{ textAlign: "center" }}>
                <div style={{
                  height: 110,
                  background: color,
                  border: color === "#FFFFFF" ? "1.5px solid var(--ink)" : "none",
                  borderRadius: n % 2 ? "12px 4px 10px 6px / 6px 10px 4px 12px" : "4px 12px 6px 10px / 10px 6px 12px 4px",
                  position: "relative",
                  boxShadow: "2px 2px 0 var(--ink)",
                }}>
                  <div style={{
                    position: "absolute", top: 8, left: 10,
                    fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 24,
                    fontWeight: 700,
                    color: lightBg ? "var(--maroon)" : "rgba(255,255,255,0.9)",
                  }}>
                    {n}
                  </div>
                  <div style={{
                    position: "absolute", bottom: 8, right: 10,
                    fontFamily: "var(--font-handwrite)", fontSize: 14, lineHeight: 1,
                    color: lightBg ? "var(--maroon)" : "rgba(255,255,255,0.9)",
                    textAlign: "right",
                  }}>
                    {day}
                  </div>
                </div>
                <div style={{ marginTop: 8, fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16, color: "var(--terracotta)", lineHeight: 1 }}>
                  {date}
                </div>
                <div style={{ marginTop: 4, fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, color: "var(--maroon)", lineHeight: 1.1 }}>
                  {name}
                </div>
                <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 15, color: "var(--ink-soft)" }}>
                  {colorName}
                </div>
              </div>
            );
          })}
        </div>
        <style>{`
          @media (max-width: 1100px) { .nights-grid { grid-template-columns: repeat(3, 1fr) !important; } }
          @media (max-width: 520px)  { .nights-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        `}</style>
      </section>

      {/* WHAT TO WEAR / WHAT TO EXPECT */}
      <section className="expect-grid" style={{ padding: "30px 48px 80px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
        <div className="handbox" style={{ padding: 32 }}>
          <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            ✦ what to wear
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 36, color: "var(--maroon)", margin: "4px 0 16px" }}>
            chaniya choli or kediyu
          </h3>

          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 14px" }}>
            <strong style={{ color: "var(--maroon)" }}>Women:</strong>{" "}
            The anchor piece is the <em style={{ color: "var(--terracotta)" }}>chaniya choli</em> —
            a flared mirror-work skirt, fitted blouse, and dupatta — in that day's Navratri color.
            Modern takes swap in lehengas with cropped blouses, cape jackets, or Indo-western coord sets,
            all in lightweight georgette or cotton that moves well during hours of dancing.
            Heavy oxidized silver or gold jewelry, stacked bangles, and a bindi are standard.{" "}
            <strong style={{ color: "var(--maroon)" }}>Skip heels</strong> — juttis (flat embroidered
            slip-ons) or kolhapuris are the move; you'll be on your feet for four-plus hours.
          </p>

          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 14px" }}>
            <strong style={{ color: "var(--maroon)" }}>Men:</strong>{" "}
            The most common look today is an{" "}
            <strong style={{ color: "var(--maroon)" }}>embroidered kurta with churidar or slim-fit pants</strong>{" "}
            — it's festive, comfortable to dance in, and widely seen at both diaspora and Gujarat events.
            A <strong style={{ color: "var(--maroon)" }}>Nehru-collar sherwani jacket</strong> over a kurta
            is a step up for those who want a sharper look without going full traditional. The classic{" "}
            <em style={{ color: "var(--terracotta)" }}>kediyu</em> and{" "}
            <em style={{ color: "var(--terracotta)" }}>chorno</em> are still worn and always appreciated,
            but definitely skew more heritage/folk. Like women, men typically try to match the day's color
            somewhere in the outfit — a solid-color kurta is the easiest way to do that.
          </p>

          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0 }}>
            <strong style={{ color: "var(--maroon)" }}>The one rule everyone follows:</strong>{" "}
            wear the day's color, or at least carry it somewhere in your outfit.
          </p>
        </div>

        <div className="handbox" style={{ padding: 32, background: "var(--maroon)", color: "var(--cream)", border: "none", boxShadow: "4px 4px 0 var(--terracotta)" }}>
          <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--marigold)" }}>
            ✦ what a night looks like
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 36, color: "var(--cream)", margin: "4px 0 16px" }}>
            slow → fast → ferocious
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--cream-warm)" }}>
            Garba nights begin around dusk with a brief{" "}
            <em style={{ color: "var(--marigold)" }}>aarti</em> — a prayer in front of a central
            idol or image of the goddess, often surrounded by marigolds, diyas, and rangoli. Then the
            dancing starts. Hundreds (or thousands) of people form concentric circles and move
            counterclockwise in synchronized steps, clapping in rhythm to the dhol and live singing.
            The energy builds deliberately: early rounds are slow and meditative, almost devotional in
            feel. By mid-night the music accelerates, the circles multiply outward, new circles form
            inside the old ones, and the whole venue pulses — claps louder, steps faster, everyone
            dripping sweat and completely absorbed. Most big events also include{" "}
            <em style={{ color: "var(--marigold)" }}>Dandiya Raas</em>, where partners face each other
            and tap colorful wooden sticks in rhythm — a nod to the symbolic battle between Durga and
            the demon Mahishasura. Modern events regularly feature touring artists from India and
            Bollywood remixes alongside traditional folk music, and run well past midnight.
          </p>
        </div>
      </section>

      {/* MAKER'S NOTE */}
      <section style={{ padding: "0 48px 60px" }}>
        <div className="handbox" style={{ padding: 32, maxWidth: 760, margin: "0 auto" }}>
          <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            ✦ a small note from the maker
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, color: "var(--maroon)", margin: "4px 0 14px" }}>
            built by one Gujarati, in the U.S.
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0 }}>
            This site is created and run by a single Gujarati living in the U.S. Garba is enormous — every village,
            every family, every generation has its own variations, its own spellings, its own stories. I'm doing my
            best, but I'll get things wrong. If you spot a mistake — a transliteration that's off, a step I've
            mislabeled, a region I've credited incorrectly, a nuance I've flattened — please pardon the error and{" "}
            <a className="inline-touch-link" href="https://shivvtrivedi.com" target="_blank" rel="noopener noreferrer" style={{ color: "var(--terracotta)", textDecoration: "underline wavy" }}>
              reach out
            </a>. I'd love to learn from you and make this better.
          </p>
        </div>
      </section>

      {/* CREDITS */}
      <section style={{ padding: "0 48px 80px", textAlign: "center" }}>
        <HandDivider width={500} />
        <div style={{ marginTop: 30, fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
          made with love by
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 20 }}>
          <a href="https://shivvtrivedi.com" target="_blank" rel="noopener noreferrer" style={{ textAlign: "center", textDecoration: "none", color: "inherit" }}>
            <img
              src="https://shivvtrivedi.com/static/img/animation.gif"
              alt="Shiv Trivedi"
              referrerPolicy="no-referrer"
              style={{ width: 70, height: 70, borderRadius: "50%", objectFit: "cover", display: "block", margin: "0 auto", background: "var(--sage)" }}
            />
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--maroon)", marginTop: 10 }}>
              Shiv Trivedi
            </div>
            <div style={{ fontSize: 15, color: "var(--ink-soft)" }}>khelaiyo, nerd, guju</div>
            <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 16, color: "var(--terracotta)", marginTop: 2 }}>
              ✦ San Francisco
            </div>
          </a>
        </div>
      </section>

      <footer style={{ borderTop: "1px dashed rgba(42,24,16,0.3)", padding: "30px 48px 50px", display: "flex", justifyContent: "space-between" }}>
        <GarbashalaLogo size={22} />
        <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 17, color: "var(--terracotta)" }}>
          jai mata di ♡
        </span>
      </footer>
    </div>
  );
};

window.About = About;
