/* Garbashala — Homepage */

const Home = () => {
  const basics = ["be-taali", "tran-taali", "hinch", "dodhiyu"];
  const featured = basics
    .map((slug) => window.GARBA_STEPS.find((s) => s.slug === slug))
    .filter(Boolean);
  return (
    <div className="paper-bg" style={{ minHeight: 1400, fontFamily: "var(--font-body)", color: "var(--ink)" }}>
      <NavBar active="home" />

      {/* HERO */}
      <section style={{ position: "relative", padding: "60px 48px 40px", overflow: "hidden" }}>
        {/* decorative chakra background */}
        <div style={{ position: "absolute", right: -120, top: -80, opacity: 0.18 }}>
          <Chakra size={520} color="var(--terracotta)" />
        </div>
        <div style={{ position: "absolute", left: 30, bottom: 20, opacity: 0.5 }}>
          <Feather size={120} rotate={-15} />
        </div>

        <div style={{ maxWidth: 760, position: "relative" }}>
          <a className="stamp" href="#/about/nine-nights" style={{ marginBottom: 20, textDecoration: "none", cursor: "pointer" }}>
            <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "var(--terracotta)" }} />
            Navratri 2026 · Oct 11-19
          </a>

          <h1 style={{
            fontFamily: "var(--font-display)", fontStyle: "italic",
            fontSize: 124, lineHeight: 0.92, margin: "12px 0 0",
            color: "var(--maroon)", letterSpacing: "-0.02em",
          }}>
            learn every<br/>
            <span style={{ color: "var(--terracotta)", position: "relative" }}>
              garba step
              <svg viewBox="0 0 600 30" width="600" height="30" style={{ position: "absolute", left: 0, bottom: -16 }}>
                <DrawPath d="M5 20 Q 150 4 300 18 T 595 12" stroke="var(--marigold)" strokeWidth="3.5" duration={2.2} delay={0.4} />
              </svg>
            </span>
            <span style={{ color: "var(--ink)" }}>,<br/></span>
            <Handwrite
              size={104}
              color="var(--ink)"
              speed={0.9}
              delay={1.6}
              style={{
                fontFamily: "var(--font-handwrite)",
                lineHeight: 0.92,
                letterSpacing: "-0.01em",
              }}
            >one at a time.</Handwrite>
          </h1>

          <p style={{
            fontFamily: "var(--font-body)", fontSize: 22, lineHeight: 1.5,
            maxWidth: 560, marginTop: 50, color: "var(--ink-soft)",
          }}>
            A free, friendly library of every garba step we can find — with slow-motion video,
            foot-by-foot diagrams, and a song to practice along to. Made for diaspora kids,
            aunties, beginners, anyone with a wobbly first <em>be taali</em>.
          </p>

          <div className="hero-actions" style={{ display: "flex", gap: 16, marginTop: 36, alignItems: "center" }}>
            <a href="#/step/be-taali" style={{
              background: "var(--terracotta)", color: "var(--paper)",
              border: "none",
              padding: "16px 28px",
              borderRadius: "16px 6px 14px 8px / 8px 14px 6px 16px",
              fontFamily: "var(--font-display)", fontStyle: "italic",
              fontSize: 20, fontWeight: 700,
              boxShadow: "3px 3px 0 var(--maroon)",
              textDecoration: "none",
              display: "inline-block",
            }}>
              start with Be Taali →
            </a>
            <a href="#/library" style={{
              textDecoration: "none",
              transform: "rotate(-2deg)", display: "inline-block",
            }}>
              <Handwrite size={26} color="var(--terracotta)" speed={1.4}>or browse all steps</Handwrite>
              <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 24, color: "var(--terracotta)", marginLeft: 6 }}>↘</span>
            </a>
          </div>
        </div>

        {/* photo placeholder collage on right */}
        <div className="hero-collage" style={{
          position: "absolute", right: 64, top: 110,
          width: 380, height: 460,
        }}>
          <div style={{
            position: "absolute", left: 30, top: 0, width: 220, height: 290,
            background: "linear-gradient(135deg, #C4502A, #9C3A1C)",
            borderRadius: "8px 32px 8px 32px",
            transform: "rotate(-4deg)",
            boxShadow: "4px 4px 0 var(--maroon)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "rgba(255,255,255,0.6)", fontFamily: "var(--font-handwrite)", fontSize: 18,
          }}>
            <span style={{ transform: "rotate(0deg)", textAlign: "center", padding: 16 }}>
              [ photo of dancers<br/>spinning around a diya ]
            </span>
            <div className="tape" style={{ top: -10, left: 60, transform: "rotate(-6deg)" }} />
          </div>
          <div style={{
            position: "absolute", right: 0, top: 110, width: 200, height: 240,
            background: "var(--marigold)",
            borderRadius: "32px 8px 32px 8px",
            transform: "rotate(5deg)",
            boxShadow: "4px 4px 0 var(--terracotta-deep)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--maroon)", fontFamily: "var(--font-handwrite)", fontSize: 18,
            textAlign: "center", padding: 16,
          }}>
            [ close-up of feet<br/>in jutti shoes ]
            <div className="tape" style={{ bottom: -10, right: 30, transform: "rotate(8deg)", background: "rgba(196,80,42,0.5)" }} />
          </div>
          <div style={{
            position: "absolute", left: 0, bottom: 0, width: 170, height: 170,
            background: "var(--sage)",
            borderRadius: "50%",
            transform: "rotate(-3deg)",
            boxShadow: "3px 3px 0 var(--ink)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--cream)", fontFamily: "var(--font-handwrite)", fontSize: 16,
            textAlign: "center", padding: 16,
          }}>
            [ marigold<br/>garland ]
          </div>
        </div>
      </section>

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

      {/* HOW IT WORKS */}
      <section style={{ padding: "70px 48px 50px" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24, marginBottom: 40, flexWrap: "wrap" }}>
          <span style={{ transform: "rotate(-3deg)", display: "inline-block", fontFamily: "var(--font-handwrite)", fontSize: 22, color: "var(--terracotta)" }}>
            ↓ <Handwrite size={22} color="var(--terracotta)" speed={1.5}>how this works</Handwrite> ↓
          </span>
          <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 54, margin: 0, color: "var(--maroon)" }}>
            three things on every step page
          </h2>
        </div>

        <div className="how-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {[
            {
              n: 1, title: "watch", sub: "a slow-motion loop",
              body: "Every step has a video that loops slowly. As you scroll, it shrinks into a corner companion — so it's still dancing while you read.",
              icon: <svg viewBox="0 0 80 80" width="80" height="80" fill="none">
                <rect x="6" y="14" width="68" height="48" rx="6" stroke="var(--terracotta)" strokeWidth="2" fill="var(--cream-warm)" />
                <polygon points="32,30 32,46 50,38" fill="var(--terracotta)" />
                <circle cx="14" cy="22" r="2" fill="var(--marigold)" />
              </svg>,
            },
            {
              n: 2, title: "trace", sub: "foot by foot",
              body: "A top-down diagram shows where the left and right foot go on every beat — color-coded, with arrows. Photos of a dancer underneath.",
              icon: <svg viewBox="0 0 80 80" width="80" height="80" fill="none">
                <g transform="translate(20 14)">
                  <ellipse cx="8" cy="20" rx="6" ry="9" fill="var(--terracotta)" />
                  <ellipse cx="8" cy="11" rx="2" ry="3" fill="var(--terracotta)" />
                  <ellipse cx="32" cy="44" rx="6" ry="9" fill="var(--sage)" />
                  <ellipse cx="32" cy="35" rx="2" ry="3" fill="var(--sage)" />
                </g>
                <path d="M30 38 Q 44 38 56 50" stroke="var(--ink)" strokeWidth="1.4" fill="none" strokeDasharray="3 2" />
                <polygon points="56,50 52,46 52,52" fill="var(--ink)" />
              </svg>,
            },
            {
              n: 3, title: "practice", sub: "with a real song",
              body: "Each step pairs with a public-domain garba track and a waveform you can scrub. Loop the chorus, slow the tempo, learn at your own speed.",
              icon: <svg viewBox="0 0 80 80" width="80" height="80" fill="none">
                <rect x="6" y="28" width="68" height="24" rx="3" fill="var(--cream-warm)" stroke="var(--terracotta)" strokeWidth="1.5" />
                {Array.from({ length: 22 }).map((_, i) => (
                  <rect key={i} x={10 + i * 3} y={32 + (i % 4) * 1} width="1.6"
                        height={16 - (i % 5) * 2 + (i % 3) * 3} fill="var(--terracotta)" opacity="0.8" />
                ))}
                <circle cx="40" cy="64" r="6" fill="var(--marigold)" stroke="var(--maroon)" strokeWidth="1.5" />
              </svg>,
            },
          ].map(({ n, title, sub, body, icon }) => (
            <div key={n} className="handbox" style={{ padding: 28, position: "relative" }}>
              <div style={{ position: "absolute", top: -18, left: 24 }}>
                <NumberStamp n={n} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12, marginTop: 12 }}>
                <div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 36, margin: 0, color: "var(--maroon)", textTransform: "lowercase" }}>
                    {title}
                  </h3>
                  <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 20, color: "var(--terracotta)" }}>
                    {sub}
                  </span>
                </div>
                {icon}
              </div>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-soft)", margin: 0 }}>
                {body}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED STEPS */}
      <section id="library" style={{ padding: "60px 48px", background: "var(--cream-warm)", position: "relative" }}>
        <div className="bandhani" style={{ position: "absolute", inset: 0, opacity: 0.18, pointerEvents: "none" }} />
        <div style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 30 }}>
            <div>
              <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 24, color: "var(--terracotta)" }}>
                <Handwrite size={24} color="var(--terracotta)" speed={1.4}>pick one to learn tonight</Handwrite> ✦
              </span>
              <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 54, margin: "8px 0 0", color: "var(--maroon)" }}>
                start with the basics
              </h2>
            </div>
            <a href="#/library" style={{ color: "var(--terracotta)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, textDecoration: "underline wavy" }}>
              see all steps →
            </a>
          </div>

          <div className="featured-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
            {featured.map((s, i) => (
              <a key={s.slug} href={`#/step/${s.slug}`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <article style={{
                background: "var(--paper)",
                border: "1.5px solid var(--ink)",
                borderRadius: i % 2 === 0 ? "16px 4px 14px 6px / 6px 14px 4px 16px" : "4px 16px 6px 14px / 14px 6px 16px 4px",
                padding: 14,
                transform: `rotate(${[-1, 1, -0.5, 0.8][i]}deg)`,
                boxShadow: "3px 3px 0 var(--ink)",
              }}>
                <div style={{
                  height: 180,
                  background: `linear-gradient(135deg, ${s.color}, ${s.color}dd)`,
                  borderRadius: 6,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-handwrite)", fontSize: 16,
                  position: "relative", overflow: "hidden",
                }}>
                  <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    [ looping gif ]
                  </span>
                  <span style={{ position: "absolute", top: 8, right: 8, background: "rgba(255,255,255,0.85)", color: s.color, padding: "2px 8px", borderRadius: 12, fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 12 }}>
                    ▶ 0:24
                  </span>
                </div>
                <div style={{ padding: "12px 4px 4px" }}>
                  <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                    <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, margin: 0, color: "var(--maroon)" }}>
                      {s.name.toLowerCase()}
                    </h3>
                    <Difficulty level={s.difficulty} />
                  </div>
                  <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>
                    {s.gujarati} · {s.meaning}
                  </div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.5, margin: "8px 0 12px", color: "var(--ink-soft)" }}>
                    {s.summary}
                  </p>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                    <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 12 }}>♪ {s.beats} beats</span>
                    <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 12 }}>{s.tempo}</span>
                  </div>
                </div>
              </article>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* QUOTE / WHY */}
      <section className="quote-section" style={{ padding: "90px 48px", display: "flex", gap: 60, alignItems: "center", position: "relative" }}>
        <div style={{ flex: 1, position: "relative" }}>
          <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 200, color: "var(--terracotta)", opacity: 0.18, position: "absolute", left: -10, top: -80, lineHeight: 1 }}>
            "
          </span>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 44, lineHeight: 1.15, color: "var(--maroon)", margin: 0, position: "relative" }}>
            "I grew up watching my mom's feet at Navratri and never knew the names of what she was doing.
            <span style={{ color: "var(--terracotta)" }}> garba shala is the auntie I wish I had on YouTube.</span>"
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 28 }}>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--sage)" }} />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, color: "var(--ink)" }}>Priya R.</div>
              <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 17, color: "var(--terracotta)" }}>diaspora dancer, New Jersey</div>
            </div>
          </div>
        </div>

        <div style={{ flexBasis: 320 }}>
          <div className="handbox" style={{ padding: 28, 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)" }}>p.s.</div>
            <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 30, margin: "6px 0 12px", color: "var(--cream)" }}>
              free forever, no signup
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, margin: 0, color: "var(--cream-warm)" }}>
              No ads. No paywall. Garba belongs to everyone —we just made the photos and footnotes
              easier to find.
            </p>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ borderTop: "1px dashed rgba(42,24,16,0.3)", padding: "40px 48px 60px", display: "flex", justifyContent: "space-between" }}>
        <GarbashalaLogo size={22} />
        <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-soft)", textAlign: "right" }}>
          made in 🇺🇸 · est. 2026<br/>
          <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 17, color: "var(--terracotta)" }}>
            jai mata di ♡
          </span>
        </div>
      </footer>
    </div>
  );
};

window.Home = Home;
