// Events, About, Visit pages
const { useState: vUseState } = React;

// ----- EVENTS -----
function Events() {
  return (
    <div data-screen-label="06 Events">
      <section style={{ paddingTop: 72, paddingBottom: 48 }}>
        <div className="container">
          <Eyebrow>At the gallery</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 128px)", margin: "20px 0 0" }}>
            <em>Events</em>.
          </h1>
          <p style={{ maxWidth: 620, marginTop: 32, fontSize: 18, lineHeight: 1.65 }}>
            A national juried show every fall, artist spotlights through the year, and a calendar of openings, talks, and demonstrations. Stop in.
          </p>
        </div>
      </section>

      {/* Fresh Off The Easel hero */}
      <FadeUp>
        <section style={{ background: "var(--ink)", color: "#f6efde", padding: "112px 0", marginTop: 24 }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="hero-grid">
              <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 style={{ position: "absolute", top: 24, left: 24, background: "var(--gold)", color: "var(--ink)", padding: "8px 18px", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600 }}>2026 · Entry Open</div>
              </div>
              <div>
                <Eyebrow color="#c8bfae">Annual juried show · 2026</Eyebrow>
                <h2 className="display" style={{ fontSize: "clamp(56px, 6.4vw, 100px)", color: "#f6efde", margin: "20px 0 0", lineHeight: 0.98 }}>
                  <em>Fresh Off</em><br/>The Easel.
                </h2>
                <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.75, color: "#d8cfbf", maxWidth: 460 }}>
                  Our annual national juried art show — no theme, all media welcome. Six weeks on the gallery floor, judged by guest jurors, with a top prize of $1,000.
                </p>
                <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, borderTop: "1px solid #3a332a", borderBottom: "1px solid #3a332a", padding: "24px 0" }}>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Submission deadline</div>
                    <div className="display" style={{ fontSize: 26, fontStyle: "italic", color: "#f6efde", marginTop: 6 }}>Aug 30, 2026</div>
                    <div style={{ fontSize: 13, color: "#a89c87", marginTop: 2 }}>Midnight CST</div>
                  </div>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Show run</div>
                    <div className="display" style={{ fontSize: 26, fontStyle: "italic", color: "#f6efde", marginTop: 6 }}>Oct 3 — Nov 21</div>
                    <div style={{ fontSize: 13, color: "#a89c87", marginTop: 2 }}>Opening Sat, Oct 3</div>
                  </div>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Top prize</div>
                    <div className="display" style={{ fontSize: 26, color: "var(--gold)", marginTop: 6 }}>$1,000</div>
                  </div>
                  <div>
                    <div className="eyebrow" style={{ color: "#a89c87" }}>Eligibility</div>
                    <div className="display" style={{ fontSize: 26, fontStyle: "italic", color: "#f6efde", marginTop: 6 }}>National</div>
                    <div style={{ fontSize: 13, color: "#a89c87", marginTop: 2 }}>All media</div>
                  </div>
                </div>
                <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                  <a href="#/visit" className="btn" style={{ background: "var(--gold)", color: "var(--ink)" }}>Submit your work →</a>
                  <a href="#/visit" className="btn" style={{ background: "transparent", color: "#f6efde", border: "1px solid #f6efde" }}>Plan a visit</a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </FadeUp>

      {/* Past shows */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Past shows · selected" title={<>Twelve years of <em>Fresh Off</em><br/>The Easel.</>} />
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="past-shows-grid">
            {[
              { year: "2025", winner: "Maris Adler", title: "After the Rain", canvas: 6 },
              { year: "2024", winner: "Esteban Castro", title: "Vespertine", canvas: 8 },
              { year: "2023", winner: "Lila Walker", title: "White Bowl", canvas: 5 },
              { year: "2022", winner: "Rachel Quinn", title: "Coastal Drift", canvas: 1 },
            ].map(s => (
              <FadeUp key={s.year}>
                <div>
                  <ArtCanvas seed={s.canvas} ratio="4 / 5" src={s.img} />
                  <div style={{ marginTop: 14 }}>
                    <div className="eyebrow">{s.year} · Top prize</div>
                    <div className="display" style={{ fontSize: 22, fontStyle: "italic", marginTop: 6 }}>{s.title}</div>
                    <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>by {s.winner}</div>
                  </div>
                </div>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      {/* Monthly events + artist spotlight */}
      <hr className="hairline"/>
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }} className="hero-grid">
            <div>
              <Eyebrow>This month</Eyebrow>
              <h3 className="display" style={{ fontSize: 48, margin: "20px 0 32px" }}>On the <em>calendar</em>.</h3>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {[
                  { date: "May 17", title: "Kay Wyne — meet the artist", time: "Sat · 2 — 4 PM" },
                  { date: "May 24", title: "Shadowbox workshop with Nic", time: "Sat · 10 AM — Noon" },
                  { date: "Jun 7", title: "Bonnie Easley · solo show opening", time: "Sat · 5 — 7 PM" },
                  { date: "Jun 21", title: "Conservation framing demo", time: "Sat · 11 AM — Noon" },
                ].map((e, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr auto", gap: 20, alignItems: "baseline", padding: "20px 0", borderTop: i === 0 ? "1px solid var(--hairline)" : 0, borderBottom: "1px solid var(--hairline)" }}>
                    <div className="display" style={{ fontSize: 20, fontStyle: "italic", color: "var(--wine)" }}>{e.date}</div>
                    <div style={{ fontSize: 16, color: "var(--ink)" }}>{e.title}</div>
                    <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>{e.time}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <Eyebrow>Artist spotlight</Eyebrow>
              <h3 className="display" style={{ fontSize: 48, margin: "20px 0 32px" }}>In <em>conversation</em>.</h3>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                {ARTISTS.slice(0, 4).map(a => (
                  <a key={a.slug} href={"#/gallery/artists/" + a.slug} className="lift" style={{ textDecoration: "none", display: "block" }}>
                    <ArtCanvas seed={a.canvas} ratio="1 / 1" src={a.img} />
                    <div style={{ marginTop: 12 }}>
                      <div className="display" style={{ fontSize: 18, fontStyle: "italic" }}>{a.first} {a.last}</div>
                      <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginTop: 4 }}>Read interview →</div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ----- ABOUT -----
function About() {
  return (
    <div data-screen-label="07 About">
      <section style={{ paddingTop: 72, paddingBottom: 48 }}>
        <div className="container">
          <Eyebrow>Family owned · 60 years</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(56px, 7.2vw, 120px)", margin: "20px 0 0", lineHeight: 0.98 }}>
            <em>About</em> Dutch<br/>Art Gallery.
          </h1>
        </div>
      </section>

      {/* Heritage section */}
      <FadeUp>
        <section className="section">
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 80, alignItems: "center" }} className="hero-grid">
              <img src={IMG.HANS_AND_PAM} alt="Hans, Pam and Nic Massar" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
              <div>
                <Eyebrow>Our story</Eyebrow>
                <h2 className="display" style={{ fontSize: "clamp(44px, 5.4vw, 76px)", margin: "20px 0 32px" }}>
                  Celebrating <em>sixty</em> years.
                </h2>
                {COPY.whoWeAre.map((p, i) => (
                  <p key={i} style={{ fontSize: 17, lineHeight: 1.8, marginTop: i === 0 ? 0 : 18, color: "var(--ink-body)" }}>{p}</p>
                ))}
              </div>
            </div>
          </div>
        </section>
      </FadeUp>

      {/* Heritage stats */}
      <FadeUp>
        <section style={{ background: "var(--ink)", color: "#f6efde", padding: "80px 0" }}>
          <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }} className="stats-grid">
            <div>
              <div className="display" style={{ fontSize: "clamp(56px, 6vw, 88px)", color: "#f6efde", lineHeight: 1 }}>60+</div>
              <div className="eyebrow" style={{ color: "#a89c87", marginTop: 12 }}>Years in business</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: "clamp(56px, 6vw, 88px)", color: "#f6efde", lineHeight: 1 }}>7,000</div>
              <div className="eyebrow" style={{ color: "#a89c87", marginTop: 12 }}>Sq ft showroom</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: "clamp(56px, 6vw, 88px)", color: "#f6efde", lineHeight: 1 }}>80+</div>
              <div className="eyebrow" style={{ color: "#a89c87", marginTop: 12 }}>Represented artists</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: "clamp(56px, 6vw, 88px)", color: "var(--gold)", lineHeight: 1 }}>3</div>
              <div className="eyebrow" style={{ color: "#a89c87", marginTop: 12 }}>Massar generations</div>
            </div>
          </div>
        </section>
      </FadeUp>

      {/* The Family */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="The family" title={<>The <em>Massar</em> family.</>} sub="Three generations carrying forward Hans and Pam's love for original art and hand-crafted framing." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 64 }} className="family-grid">
            {FAMILY.map((f, i) => (
              <FadeUp key={f.name} delay={i * 100}>
                <div>
                  <img src={IMG[f.img]} alt={f.name} style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
                  <div style={{ marginTop: 20 }}>
                    <div className="eyebrow" style={{ color: "var(--wine)" }}>{f.role}</div>
                    <h3 className="display" style={{ fontSize: 32, fontStyle: "italic", margin: "8px 0 14px" }}>{f.name}</h3>
                    <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--ink-body)" }}>{f.line}</p>
                  </div>
                </div>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      {/* Extended team */}
      <hr className="hairline"/>
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="The bench" title={<>And our <em>team</em>.</>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 48 }} className="family-grid">
            {TEAM.map((t, i) => (
              <FadeUp key={t.name} delay={i * 80}>
                <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
                  <img src={IMG[t.img]} alt={t.name} style={{ width: 96, height: 96, objectFit: "cover", borderRadius: "50%" }} />
                  <div>
                    <div className="display" style={{ fontSize: 22, fontStyle: "italic" }}>{t.name}</div>
                    <div className="eyebrow" style={{ marginTop: 4 }}>{t.role}</div>
                  </div>
                </div>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      {/* Video tour */}
      <FadeUp>
        <section className="section">
          <div className="container">
            <a href="#" onClick={(e) => { e.preventDefault(); alert("Video tour coming soon."); }} style={{ display: "block", textDecoration: "none", position: "relative", overflow: "hidden" }} className="lift">
              <img src={IMG.VIDEO_TOUR} alt="Showroom tour" style={{ width: "100%", aspectRatio: "21/9", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(26,22,18,0.1) 0%, rgba(26,22,18,0.6) 100%)" }} />
              <div style={{ position: "absolute", left: 48, bottom: 48, color: "#f6efde" }}>
                <div className="eyebrow" style={{ color: "#c8bfae" }}>Take the tour</div>
                <h3 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "#f6efde", margin: "12px 0 0" }}>Step inside the <em>showroom</em>.</h3>
              </div>
              <div style={{ position: "absolute", right: 48, bottom: 48, width: 80, height: 80, borderRadius: "50%", background: "var(--gold)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="22" height="26" viewBox="0 0 22 26"><polygon points="0,0 0,26 22,13" fill="var(--ink)"/></svg>
              </div>
            </a>
          </div>
        </section>
      </FadeUp>
    </div>
  );
}

// ----- VISIT -----
function Visit() {
  const [form, setForm] = vUseState({ name: "", email: "", phone: "", subject: "Gallery Inquiry", message: "" });
  const [sent, setSent] = vUseState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <div data-screen-label="08 Visit">
      <section style={{ paddingTop: 72, paddingBottom: 48 }}>
        <div className="container">
          <Eyebrow>Lake Highlands · Dallas</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 128px)", margin: "20px 0 0" }}>
            <em>Visit</em> Us.
          </h1>
          <p style={{ maxWidth: 580, marginTop: 28, fontSize: 18, lineHeight: 1.65 }}>
            Stop in to browse. For larger framing projects, please schedule a consultation so we can give you our undivided attention.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64 }} className="visit-grid">
            {/* Form */}
            <div>
              <h2 className="display" style={{ fontSize: 40, margin: "0 0 32px" }}>Send an <em>inquiry</em>.</h2>
              {sent ? (
                <div style={{ padding: 40, border: "1px solid var(--hairline)", background: "var(--surface)" }}>
                  <Eyebrow color="var(--wine)">Received</Eyebrow>
                  <h3 className="display" style={{ fontSize: 32, fontStyle: "italic", margin: "12px 0 16px" }}>Thank you.</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.7 }}>We'll get back to you within one business day. For urgent framing projects, call us at <a href="tel:2143487350" style={{ color: "var(--wine)" }}>(214) 348-7350</a>.</p>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: "grid", gap: 20 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                    <Field label="Name"><input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></Field>
                    <Field label="Email"><input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></Field>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                    <Field label="Phone (optional)"><input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></Field>
                    <Field label="Subject">
                      <select value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })}>
                        <option>Gallery Inquiry</option>
                        <option>Custom Framing</option>
                        <option>Shadowbox Project</option>
                        <option>Fresh Off The Easel Submission</option>
                        <option>General Question</option>
                      </select>
                    </Field>
                  </div>
                  <Field label="Message"><textarea rows={6} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} required /></Field>
                  <button type="submit" className="btn btn-primary" style={{ alignSelf: "start" }}>Send inquiry →</button>
                </form>
              )}

              {/* Scheduling callout */}
              <div style={{ marginTop: 48, padding: 32, background: "#efe5ce", borderLeft: "3px solid var(--wine)" }}>
                <Eyebrow color="var(--wine)">For large projects</Eyebrow>
                <p style={{ marginTop: 16, fontFamily: "var(--display)", fontSize: 22, fontStyle: "italic", lineHeight: 1.5, color: "var(--ink)" }}>
                  "{COPY.scheduling}"
                </p>
              </div>
            </div>

            {/* Right column */}
            <aside style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <div>
                <Eyebrow>Address</Eyebrow>
                <p className="display" style={{ fontSize: 28, fontStyle: "italic", margin: "12px 0 0", lineHeight: 1.3 }}>
                  10233 Northwest Hwy<br/>Suite #420<br/>Dallas, TX 75238
                </p>
                <a className="btn-link" href="https://maps.google.com/?q=10233+Northwest+Hwy+%23420+Dallas+TX" target="_blank" rel="noopener" style={{ display: "inline-block", marginTop: 14 }}>Get directions ↗</a>
              </div>
              <div>
                <Eyebrow>Phone</Eyebrow>
                <a className="display" href="tel:2143487350" style={{ fontSize: 32, fontStyle: "italic", color: "var(--wine)", textDecoration: "none", display: "block", marginTop: 12 }}>(214) 348-7350</a>
              </div>
              <div>
                <Eyebrow>Hours</Eyebrow>
                <div style={{ display: "flex", flexDirection: "column", marginTop: 12, fontSize: 16, fontFamily: "var(--display)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid var(--hairline)" }}><span>Tuesday — Saturday</span><span style={{ fontStyle: "italic" }}>10 AM — 4 PM</span></div>
                  <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid var(--hairline)", color: "var(--muted)" }}><span>Sunday & Monday</span><span style={{ fontStyle: "italic" }}>Closed</span></div>
                </div>
              </div>
              <div>
                <Eyebrow>Email the team</Eyebrow>
                <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 12, fontSize: 14 }}>
                  <a href="mailto:pam@dutchartgallery.net"><strong style={{ color: "var(--ink)" }}>Pam</strong> · pam@dutchartgallery.net</a>
                  <a href="mailto:nic@dutchartgallery.net"><strong style={{ color: "var(--ink)" }}>Nic</strong> · nic@dutchartgallery.net</a>
                  <a href="mailto:gwen@dutchartgallery.net"><strong style={{ color: "var(--ink)" }}>Gwen</strong> · gwen@dutchartgallery.net</a>
                  <a href="mailto:rebecca@dutchartgallery.net"><strong style={{ color: "var(--ink)" }}>Rebecca</strong> · rebecca@dutchartgallery.net</a>
                </div>
              </div>

              {/* Mini map */}
              <div style={{ background: "#e0d4b8", aspectRatio: "5/4", position: "relative", overflow: "hidden", marginTop: 8 }}>
                <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"/>
                </svg>
                <div style={{ position: "absolute", left: "55%", top: "52%", transform: "translate(-50%, -100%)", textAlign: "center" }}>
                  <div style={{ width: 18, height: 18, background: "var(--wine)", borderRadius: "50% 50% 50% 0", transform: "rotate(-45deg)" }} />
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <label style={{ display: "block", marginBottom: 8 }}>{label}</label>
      {children}
    </div>
  );
}

Object.assign(window, { Events, About, Visit });