// Home page
const { useState: hUseState, useEffect: hUseEffect, useMemo: hUseMemo } = React;

function Home() {
  // Pick the featured artist work for the hero
  const heroArtist = ARTISTS.find(a => a.slug === "kay-wyne");
  const featuredStrip = ARTISTS.filter(a => [3300, 3800, 4200, 5400, 2400, 2200, 1980, 1880].includes(a.price)).slice(0, 8);

  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section className="section-lg" style={{ paddingTop: 72, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }} className="hero-grid">
            <FadeUp>
              <Eyebrow>Family Owned · Dallas · 60 Years</Eyebrow>
              <h1 className="display" style={{ fontSize: "clamp(56px, 7.2vw, 112px)", margin: "28px 0 0", letterSpacing: "-0.02em", lineHeight: 0.98 }}>
                <em>Original</em> fine art<br/>and <em>custom</em> framing,<br/>tailored to fit<br/>your style.
              </h1>
              <p style={{ marginTop: 32, fontSize: 18, maxWidth: 480, lineHeight: 1.65 }}>
                Representing 80+ local and national artists in a 7,000 square foot showroom in Lake Highlands — three generations of the Massar family at the easel and the framing bench.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
                <a href="#/gallery" className="btn btn-primary">Browse the Gallery →</a>
                <a href="#/framing" className="btn btn-ghost">Custom Framing</a>
              </div>
            </FadeUp>
            <FadeUp delay={120}>
              <div style={{ position: "relative" }}>
                <ArtCanvas seed={heroArtist.canvas} ratio="4 / 5" framed src={heroArtist.img} />
                <div style={{ position: "absolute", bottom: -28, left: -28, background: "var(--bg)", padding: "18px 24px", border: "1px solid var(--hairline)" }}>
                  <div className="eyebrow">Now on view</div>
                  <div className="display" style={{ fontSize: 24, fontStyle: "italic", marginTop: 6 }}>{heroArtist.featured}</div>
                  <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{heroArtist.first} {heroArtist.last} · {heroArtist.medium}</div>
                </div>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* TAGLINE RIBBON */}
      <FadeUp>
        <div style={{ borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", padding: "22px 0", textAlign: "center" }}>
          <div className="eyebrow" style={{ fontSize: 12, letterSpacing: "0.35em" }}>
            <em style={{ color: "var(--wine)", fontStyle: "italic", fontFamily: "var(--display)", textTransform: "none", letterSpacing: "0.04em", fontSize: 18, marginRight: 14 }}>Representing</em>
            Local & National Artists
            <span style={{ display: "inline-block", margin: "0 22px", color: "var(--hairline)" }}>·</span>
            7,000 sq ft showroom
            <span style={{ display: "inline-block", margin: "0 22px", color: "var(--hairline)" }}>·</span>
            1,500+ framing samples
            <span style={{ display: "inline-block", margin: "0 22px", color: "var(--hairline)" }}>·</span>
            Annual juried show
          </div>
        </div>
      </FadeUp>

      {/* TWO PATHS */}
      <section className="section">
        <div className="container">
          <FadeUp>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 40, alignItems: "end", marginBottom: 56 }}>
              <SectionHead eyebrow="Two wings · One family" title={<><em>Where</em> would you like<br/>to start?</>} />
              <p style={{ maxWidth: 380, justifySelf: "end", color: "var(--muted)", fontSize: 15, lineHeight: 1.7 }}>
                We're a gallery and a framing shop under one roof. They share a family, a bench, and a passion — but each deserves its own moment.
              </p>
            </div>
          </FadeUp>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }} className="paths-grid">
            <FadeUp>
              <a href="#/gallery" style={{ textDecoration: "none", display: "block" }} className="lift">
                <div style={{ position: "relative", background: "#1A1612", padding: 40, minHeight: 520, display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "hidden" }}>
                  <div style={{ position: "absolute", inset: 0, opacity: 0.65 }}>
                    <div style={{ position: "absolute", top: 24, right: 24, width: 200, height: 240, ...paintedCanvas(8) }}/>
                    <div style={{ position: "absolute", top: 180, right: 180, width: 160, height: 200, ...paintedCanvas(3) }}/>
                    <div style={{ position: "absolute", bottom: 60, right: 80, width: 180, height: 220, ...paintedCanvas(6) }}/>
                  </div>
                  <div style={{ position: "relative", color: "#f6efde" }}>
                    <div className="eyebrow" style={{ color: "#c8bfae" }}>One — The Gallery</div>
                  </div>
                  <div style={{ position: "relative", color: "#f6efde" }}>
                    <h3 className="display" style={{ fontSize: 64, color: "#f6efde", margin: 0 }}>The <em>Gallery</em></h3>
                    <p style={{ marginTop: 16, maxWidth: 380, fontSize: 15, color: "#d8cfbf" }}>
                      80+ represented artists. Original oil, watercolor, sculpture, mixed media, and limited editions — from $250 to museum-quality pieces.
                    </p>
                    <div className="btn-link" style={{ color: "#f6efde", borderColor: "#f6efde", marginTop: 24, display: "inline-block" }}>View Artists →</div>
                  </div>
                </div>
              </a>
            </FadeUp>
            <FadeUp delay={120}>
              <a href="#/framing" style={{ textDecoration: "none", display: "block" }} className="lift">
                <div style={{ position: "relative", background: "var(--wine)", padding: 40, minHeight: 520, display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "hidden", color: "#f6efde" }}>
                  <img src={IMG.SVC_CUSTOM} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.32, mixBlendMode: "multiply" }}/>
                  <div style={{ position: "relative" }}>
                    <div className="eyebrow" style={{ color: "#e3c9c8" }}>Two — The Frame Shop</div>
                  </div>
                  <div style={{ position: "relative" }}>
                    <h3 className="display" style={{ fontSize: 64, color: "#f6efde", margin: 0 }}>The <em>Frame Shop</em></h3>
                    <p style={{ marginTop: 16, maxWidth: 380, fontSize: 15 }}>
                      Over 1,500 framing samples. 3 museum-quality glass options. Hand-crafted by Nic, our Custom Framing Guru. Shadowbox specialists.
                    </p>
                    <div className="btn-link" style={{ color: "#f6efde", borderColor: "#f6efde", marginTop: 24, display: "inline-block" }}>Custom Framing →</div>
                  </div>
                </div>
              </a>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* FEATURED ARTISTS STRIP */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container">
          <FadeUp>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
              <SectionHead eyebrow="On the walls this season" title={<>Featured <em>artists</em></>} />
              <a href="#/gallery" className="btn-link" style={{ alignSelf: "end" }}>Browse all 80+ artists →</a>
            </div>
          </FadeUp>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }} className="featured-grid">
            {featuredStrip.map((a, i) => (
              <FadeUp key={a.slug} delay={i * 60}>
                <a href={"#/gallery/artists/" + a.slug} className="lift" style={{ textDecoration: "none", display: "block" }}>
                  <ArtCanvas seed={a.canvas} ratio="4 / 5" src={a.img} />
                  <div style={{ marginTop: 16 }}>
                    <div className="display" style={{ fontSize: 22, fontStyle: "italic" }}>{a.featured}</div>
                    <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", marginTop: 4 }}>{a.first} {a.last}</div>
                  </div>
                </a>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      {/* FAMILY STORY PREVIEW */}
      <section className="section-lg">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="hero-grid">
            <FadeUp>
              <img src={IMG.HANS_AND_PAM} alt="Hans and Pam Massar" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
            </FadeUp>
            <FadeUp delay={120}>
              <Eyebrow>Three generations · One workshop</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(40px, 4.8vw, 64px)", margin: "20px 0 28px", textWrap: "balance" }}>
                <em>Three generations</em> of family framing.
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.75, maxWidth: 460 }}>
                Hans and Pam Massar have been finding original art and custom framing for Dallas for sixty years. Their son Nic — our "Custom Framing Guru" — joined the family business and brings his own expertise to every shadowbox and frame design.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.75, maxWidth: 460, marginTop: 18 }}>
                We're a family-run gallery, and it shows in every conversation.
              </p>
              <a href="#/about" className="btn-link" style={{ display: "inline-block", marginTop: 32 }}>About our family →</a>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* FRESH OFF THE EASEL */}
      <FadeUp>
        <section style={{ background: "var(--ink)", color: "#f6efde", padding: "112px 0" }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 80, alignItems: "center" }} className="hero-grid">
              <div>
                <Eyebrow color="#c8bfae">Annual Juried Show</Eyebrow>
                <h2 className="display" style={{ fontSize: "clamp(48px, 5.6vw, 84px)", margin: "20px 0 0", color: "#f6efde" }}>
                  <em>Fresh Off</em><br/>The Easel <span style={{ color: "var(--gold)" }}>2026</span>
                </h2>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28, marginTop: 48, padding: "28px 0", borderTop: "1px solid #3a332a", borderBottom: "1px solid #3a332a" }}>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Show Run</div>
                    <div className="display" style={{ fontSize: 22, color: "#f6efde", marginTop: 6 }}>Oct 3 — Nov 21</div>
                  </div>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Submit By</div>
                    <div className="display" style={{ fontSize: 22, color: "#f6efde", marginTop: 6 }}>Aug 30</div>
                  </div>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Top Prize</div>
                    <div className="display" style={{ fontSize: 22, color: "var(--gold)", marginTop: 6 }}>$1,000</div>
                  </div>
                </div>
                <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                  <a href="#/events" className="btn" style={{ background: "var(--gold)", color: "var(--ink)" }}>Visit the show</a>
                  <a href="#/events" className="btn" style={{ background: "transparent", color: "#f6efde", border: "1px solid #f6efde" }}>Submit your work</a>
                </div>
              </div>
              <div style={{ position: "relative" }}>
                <img src={IMG.FRESH_EASEL} alt="Fresh Off The Easel 2026 Call for Entry" style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover" }} />
              </div>
            </div>
          </div>
        </section>
      </FadeUp>

      {/* FRAMING PROJECTS STRIP */}
      <section className="section">
        <div className="container">
          <FadeUp>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
              <SectionHead eyebrow="From the framing bench" title={<>Selected <em>projects</em></>} />
              <a href="#/framing/inspiration" className="btn-link">Explore framing inspiration →</a>
            </div>
          </FadeUp>
          <div className="scroll-x" style={{ marginRight: -32, paddingRight: 32 }}>
            {FRAMING_PROJECTS.slice(0, 8).map((p, i) => (
              <div key={p.slug} style={{ width: 320 }}>
                <FadeUp delay={i * 50}>
                  <a href="#/framing/inspiration" className="lift" style={{ textDecoration: "none", display: "block" }}>
                    <div style={{ padding: 18, background: "#f0e8d4", boxShadow: "0 0 0 1px var(--gold) inset" }}>
                      <ArtCanvas seed={p.canvas} ratio="4 / 3" src={p.img} />
                    </div>
                    <div style={{ marginTop: 16 }}>
                      <div className="eyebrow">{p.category}</div>
                      <div className="display" style={{ fontSize: 22, fontStyle: "italic", marginTop: 6 }}>{p.title}</div>
                    </div>
                  </a>
                </FadeUp>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <FadeUp>
        <section style={{ background: "#efe5ce", padding: "112px 0" }}>
          <div className="container-narrow">
            <Eyebrow>Why people return</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginTop: 56 }} className="testimonial-grid">
              {TESTIMONIALS.slice(0, 4).map((t) => (
                <div key={t.name}>
                  <p className="quote">{t.quote}</p>
                  <div style={{ marginTop: 18 }}>
                    <div className="display" style={{ fontSize: 18, fontStyle: "italic" }}>— {t.name}</div>
                    <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", marginTop: 4 }}>{t.context}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </FadeUp>

      {/* VISIT STRIP */}
      <section className="section-lg">
        <div className="container">
          <FadeUp>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="hero-grid">
              <div>
                <Eyebrow>Lake Highlands · Dallas</Eyebrow>
                <h2 className="display" style={{ fontSize: "clamp(48px, 5.6vw, 84px)", margin: "20px 0 32px" }}>
                  Come <em>visit</em>.
                </h2>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36 }}>
                  <div>
                    <div className="eyebrow">Address</div>
                    <p style={{ fontSize: 17, marginTop: 10, color: "var(--ink)" }}>10233 Northwest Hwy<br/>Suite #420<br/>Dallas, TX 75238</p>
                  </div>
                  <div>
                    <div className="eyebrow">Hours</div>
                    <p style={{ fontSize: 17, marginTop: 10, color: "var(--ink)" }}>Tue – Sat<br/>10 AM – 4 PM<br/><span className="text-muted" style={{ fontSize: 14 }}>Closed Sun & Mon</span></p>
                  </div>
                </div>
                <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap" }}>
                  <a className="btn btn-primary" href="https://maps.google.com/?q=10233+Northwest+Hwy+%23420+Dallas+TX" target="_blank" rel="noopener">Get Directions</a>
                  <a className="btn btn-ghost" href="tel:2143487350">(214) 348-7350</a>
                </div>
              </div>
              <div style={{ background: "#e0d4b8", aspectRatio: "5 / 4", position: "relative", overflow: "hidden" }}>
                {/* Stylized map placeholder */}
                <svg viewBox="0 0 400 320" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
                  <rect width="400" height="320" fill="#e0d4b8"/>
                  <path d="M 0 200 L 400 180" stroke="#c4b48f" strokeWidth="14" fill="none"/>
                  <path d="M 0 200 L 400 180" stroke="#f6efde" strokeWidth="2" strokeDasharray="6 6" fill="none"/>
                  <path d="M 60 0 L 80 320" stroke="#c4b48f" strokeWidth="8" fill="none"/>
                  <path d="M 260 0 L 280 320" stroke="#c4b48f" strokeWidth="8" fill="none"/>
                  <path d="M 0 80 L 400 90" stroke="#cdbe98" strokeWidth="4" fill="none"/>
                  <path d="M 0 280 L 400 280" stroke="#cdbe98" strokeWidth="4" fill="none"/>
                  <text x="20" y="40" fontFamily="Inter" fontSize="10" fill="#807466" letterSpacing="2">LAKE HIGHLANDS</text>
                  <text x="200" y="220" fontFamily="Inter" fontSize="9" fill="#807466" letterSpacing="2">NW HWY</text>
                </svg>
                {/* Pin */}
                <div style={{ position: "absolute", left: "55%", top: "52%", transform: "translate(-50%, -100%)", textAlign: "center" }}>
                  <div style={{ width: 16, height: 16, background: "var(--wine)", borderRadius: "50% 50% 50% 0", transform: "rotate(-45deg)", boxShadow: "0 6px 12px -4px rgba(107,45,44,0.5)" }} />
                  <div style={{ marginTop: 14, background: "var(--bg)", padding: "8px 14px", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink)", whiteSpace: "nowrap", border: "1px solid var(--hairline)" }}>Dutch Art Gallery</div>
                </div>
              </div>
            </div>
          </FadeUp>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });