/* ============== ABOUT ============== */
function AboutPage({ navigate }) {
  window.useSeo({
    title: "About Larissa — Oil Painter in Highlands, Ontario",
    description: "Meet Larissa Svinoukhova — a Canadian oil painter working from a small studio overlooking Gooderham Lake. Florals, landscapes, and still life, painted by hand.",
    canonical: "https://larissaart.com/about",
    image: "https://larissaart.com/assets/about/04.jpg",
  });
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 140, paddingBottom: 80 }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 40px", textAlign: "center" }}>
          <div className="eyebrow" style={{ color: "var(--gold-deep)" }}>About the Artist</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 7vw, 110px)", marginTop: 16 }}>
            <em style={{ fontStyle: "italic" }}>Larissa</em>
          </h1>
          <div className="h-script" style={{ fontSize: 36, color: "var(--gold-deep)", marginTop: 8 }}>
            paints what she loves.
          </div>
          <p style={{ marginTop: 28, color: "var(--ink-soft)", fontSize: 18, lineHeight: 1.8, maxWidth: 720, margin: "28px auto 0" }}>
            I have lived in Ontario since 1998, and my journey into painting began much later than most.
            As a child, I loved drawing in pencil at school, but life moved in other directions and I
            never imagined I would one day become an artist.
          </p>
        </div>
      </section>

      {/* Full-bleed portrait */}
      <section style={{ position: "relative" }}>
        <div style={{ aspectRatio: "16/7", overflow: "hidden", position: "relative" }}>
          <img src="assets/larissa-studio.jpg" alt="Larissa at her easel"
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 60%, rgba(46,42,36,0.4) 100%)" }} />
          <div className="lf-studio-caption" style={{ position: "absolute", left: 40, bottom: 32, color: "var(--warm-white)", maxWidth: 460 }}>
            <div className="h-script lf-studio-caption-quote" style={{ fontSize: 32 }}>"My commute is six steps."</div>
            <div className="lf-studio-caption-meta" style={{ marginTop: 8, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.85 }}>
              The studio, 6:00 am, May
            </div>
          </div>
        </div>
      </section>

      {/* Editorial story */}
      <section style={{ padding: "120px 40px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 48, alignItems: "start" }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 80, color: "var(--gold)", lineHeight: 0.9, fontStyle: "italic" }}>E</div>
            <div>
              <p style={{ fontSize: 18.5, lineHeight: 1.85, color: "var(--ink)", margin: 0 }}>
                Everything changed in 2013, when I was in my early sixties and finally decided to
                follow a quiet dream I had carried for many years — to paint in colour.
              </p>
            </div>
          </div>

          <div style={{ marginTop: 60, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <p style={{ fontSize: 16, lineHeight: 1.85, color: "var(--ink-soft)", margin: 0 }}>
                I began with acrylics, teaching myself slowly through books, online tutorials,
                and many hours of practice. Later I discovered oil painting, and with it, a
                deeper connection to light, texture, and patience.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.85, color: "var(--ink-soft)", margin: 0 }}>
                In 2015, a close friend introduced me to the Old Masters and the Flemish
                seven-layer painting technique. I became fascinated by the process — the careful
                building of transparent layers, the months of drying, the way a painting slowly
                comes alive over time. My roses from that period still remind me of those first
                experiments and everything I was learning then.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <p style={{ fontSize: 16, lineHeight: 1.85, color: "var(--ink-soft)", margin: 0 }}>
                I continue to study today through online lessons, local art classes, and constant
                practice. I love painting landscapes, flowers, and still life subjects — sometimes
                with a brush, sometimes with a palette knife — but I always leave space for
                curiosity and new ideas.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.85, color: "var(--ink-soft)", margin: 0 }}>
                My work is rooted in realism, warmth, and simplicity. I want my paintings to feel
                peaceful and familiar, like small moments of beauty we often pass by too quickly.
                For me, painting is not only about technique, but about learning to truly see
                the world around us.
              </p>
            </div>
          </div>

          <div style={{ marginTop: 60, padding: "32px 40px", background: "var(--cream)", borderLeft: "3px solid var(--gold)" }}>
            <p style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 24, fontStyle: "italic", lineHeight: 1.5, color: "var(--ink)" }}>
              "The main thing is to keep improving my skills and to share, through my paintings,
              the beauty of the world around us and the love for the place where we live.
              I am still on the road to perfection."
            </p>
            <div className="h-script" style={{ fontSize: 28, color: "var(--gold-deep)", marginTop: 12 }}>— Larissa</div>
          </div>
        </div>
      </section>

      {/* Around the studio */}
      <section style={{ background: "var(--paper)", padding: "120px 40px" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto" }}>
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
            <div className="eyebrow">Around the Studio</div>
            <h2 className="h-display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", marginTop: 14 }}>
              A few photographs from <em style={{ fontStyle: "italic" }}>my corner of the world</em>.
            </h2>
          </div>
          <div style={{ marginTop: 70, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
            {[
              { img: "assets/about/01.jpg", title: "At the Easel",     note: "Still life in progress — a jug and three oranges, a sailboat photo pinned for reference." },
              { img: "assets/about/02.jpg", title: "The Brushes",      note: "Sorted, mostly. The ones with the most paint on the handle are the favourites." },
              { img: "assets/about/03.jpg", title: "By the Water",     note: "A favourite stop at the marina — the boat names sometimes find their way into a painting." },
              { img: "assets/about/04.jpg", title: "In the Garden",    note: "Painting outdoors in the flower garden — the kind of afternoon that makes the year." },
            ].map((d) => (
              <div key={d.title}>
                <div className="painting" style={{
                  aspectRatio: "3/4",
                  backgroundImage: `url("${d.img}")`,
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                }} />
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22 }}>{d.title}</div>
                  <div style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 6, lineHeight: 1.6 }}>{d.note}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Recognition */}
      <section style={{ padding: "120px 40px", maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">Selected Recognition</div>
          <h2 className="h-display" style={{ fontSize: "clamp(34px, 4vw, 52px)", marginTop: 14, fontStyle: "italic" }}>
            A quiet career,<br />gently noticed.
          </h2>
        </div>
        <ul className="lf-recognition" style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {[
            ["2014", "21st Annual Juried Art Exhibition <em>Through the Eyes of the Artist</em>, Lakeshore Arts (Apr–May)"],
            ["2016", "NPCC <em>The Big Chill</em> (January)"],
            ["2016", "National Open Juried Online Exhibition — SCA website (March–July)"],
            ["2016", "<em>Deck the Halls</em>, Nelson Park Gallery (NPCC) (Dec–Jan)"],
            ["2016", "TAG Art Gallery / Creative Centre, St. Catharines (November)"],
            ["2017", "Etobicoke Art Group — 53rd Annual Juried Exhibition (Jan–Feb)"],
            ["2017", "<em>Highlights 2017</em> — EAG Members' Choice Exhibit, NPCC (May–June)"],
            ["2017", "<em>Oh Canada</em>, NPCC (Aug–Sept)"],
            ["2017", "Humber Valley Art Club — Members' Choice Exhibition (Nov–Dec)"],
            ["2018", "26th Annual Juried Exhibition, NPCC (July–Aug)"],
            ["2024", "Barrie Art Club (Sept)"],
            ["2025", "Haliburton Rails End Gallery — <em>Legacy</em>"],
            ["2026", "Haliburton Rails End Gallery — <em>Science and Art</em>"],
          ].map(([y, t], i) => (
            <li key={`${y}-${i}`} className="lf-recognition-row" style={{
              padding: "14px 0", borderBottom: "1px solid var(--line-soft)",
            }}>
              <div style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: 14 }} className="lf-keep-grid">
                <span style={{ fontFamily: "var(--serif)", fontSize: 20, color: "var(--gold-deep)", fontStyle: "italic" }}>{y}</span>
                <span style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: t }} />
              </div>
            </li>
          ))}
          {/* 2026 — Haliburton Art in Public Spaces. Spans both columns so the
              five venues read as one block instead of getting split mid-list. */}
          <li className="lf-recognition-row lf-recognition-span" style={{
            padding: "14px 0", borderBottom: "1px solid var(--line-soft)",
          }}>
            <div style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: 14 }} className="lf-keep-grid">
              <span style={{ fontFamily: "var(--serif)", fontSize: 20, color: "var(--gold-deep)", fontStyle: "italic" }}>2026</span>
              <div style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.55 }}>
                Haliburton Art in Public Spaces:
                <ul style={{ listStyle: "disc", paddingLeft: 20, margin: "8px 0 0", color: "var(--ink-soft)" }}>
                  <li style={{ marginTop: 4 }}>Winter Camp Wanakita (March)</li>
                  <li style={{ marginTop: 4 }}>Haliburton Brewing — Tap Room Show (March–June)</li>
                  <li style={{ marginTop: 4 }}>Stanhope Library (March–June)</li>
                  <li style={{ marginTop: 4 }}>Sir Sam's Inn (May–Sept)</li>
                  <li style={{ marginTop: 4 }}>Agnes Jamieson Gallery (May–Sept)</li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </section>

      {/* CTA */}
      <section style={{
        background: "linear-gradient(135deg, var(--sky) 0%, var(--cream) 60%, var(--blush-soft) 100%)",
        padding: "120px 40px", textAlign: "center",
      }}>
        <div className="eyebrow">Step Inside</div>
        <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 72px)", marginTop: 14, maxWidth: 880, margin: "14px auto 0" }}>
          <em style={{ fontStyle: "italic" }}>Visit the gallery</em> or come to the studio.
        </h2>
        <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
          <button className="btn btn-primary" onClick={() => navigate("gallery")}>Enter the Gallery <Icon.ArrowR /></button>
          <button className="btn btn-ghost" onClick={() => navigate("collector")}>Plan a Studio Visit</button>
        </div>
      </section>
    </div>
  );
}

/* ============== COLLECTOR ============== */
function CollectorPage({ navigate }) {
  window.useSeo({
    title: "The Collector Experience · Larissa Fine Art",
    description: "What happens when you collect a painting from Larissa's studio — hand-crating, worldwide shipping, and a small letter from the artist in every package.",
    canonical: "https://larissaart.com/collector",
  });
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 140, paddingBottom: 80 }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 40px",
                       display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--gold-deep)" }}>Collector Experience</div>
            <h1 className="h-display" style={{ fontSize: "clamp(54px, 6.8vw, 100px)", margin: "16px 0 0", lineHeight: 0.98 }}>
              <em style={{ fontStyle: "italic" }}>The painting</em><br />
              arrives like a letter<br />
              you've been waiting for.
            </h1>
            <p style={{ marginTop: 28, color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.75, maxWidth: 540 }}>
              Acquiring a painting from the studio is meant to be quiet, considered, and gladdening.
              Here is exactly what happens between the moment you press the button and the morning
              the crate is on your doorstep — and the years that follow.
            </p>
          </div>
          <div>
            <Painting p={window.PAINTINGS.find(p => p.section === "featured") || window.PAINTINGS[0]} aspect="4/5" tag={false} className="lift-shadow" />
          </div>
        </div>
      </section>

      {/* Process timeline */}
      <section style={{ background: "var(--cream)", padding: "120px 40px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <div style={{ textAlign: "center" }}>
            <div className="eyebrow">The Process</div>
            <h2 className="h-display" style={{ fontSize: "clamp(34px, 4vw, 56px)", marginTop: 14 }}>
              From <em style={{ fontStyle: "italic" }}>studio</em> to <em style={{ fontStyle: "italic" }}>your wall</em>.
            </h2>
          </div>

          <div className="lf-timeline" style={{ marginTop: 70, position: "relative" }}>
            <div className="lf-timeline-line" style={{ position: "absolute", left: 40, top: 0, bottom: 0, width: 1, background: "var(--gold)", opacity: 0.4 }} />
            {[
              { day: "Day 1", title: "Your choice", body: "You confirm the painting. We hold it under your name immediately and remove it from circulation." },
              { day: "Day 2", title: "Studio note", body: "Larissa writes you a short, hand-signed note about the work. It travels with the painting." },
              { day: "Days 2–4", title: "Crating", body: "Hand-wrapped in acid-free tissue, glassine, and a custom wooden crate built for the painting." },
              { day: "Day 5", title: "Shipment", body: "Canada 5–10 days · USA 7–12 · International 10–18." },
              { day: "Arrival", title: "A small ceremony", body: "Inside the crate: the painting, the artist's note, and one small dried wildflower from the studio garden." },
            ].map((s, i) => (
              <div key={i} className="lf-keep-grid lf-timeline-row" style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 40, paddingBottom: 48, position: "relative" }}>
                <div style={{ position: "relative" }}>
                  <div style={{
                    width: 18, height: 18, borderRadius: 999,
                    background: "var(--ivory)", border: "2px solid var(--gold)",
                    position: "absolute", left: 31, top: 6,
                  }} />
                  <div style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--gold-deep)", textTransform: "uppercase", marginLeft: 64, marginTop: 4 }}>
                    {s.day}
                  </div>
                </div>
                <div data-day={s.day} style={{ paddingLeft: 8 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 26, lineHeight: 1.2 }}>{s.title}</div>
                  <p style={{ marginTop: 8, color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.7, maxWidth: 600 }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Promises */}
      <section style={{ padding: "120px 40px", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div className="eyebrow">Studio Promises</div>
          <h2 className="h-display" style={{ fontSize: "clamp(34px, 4vw, 56px)", marginTop: 14, fontStyle: "italic" }}>Three small certainties.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {[
            { t: "One of one", b: "No prints, no reproductions, no editions. Your painting exists nowhere else in the world." },
            { t: "Signed on the front", b: "Every work is signed by Larissa in oil on the front and again on the back." },
            { t: "Museum-quality packaging", b: "Built for the painting. Yours to keep, beautifully made." },
          ].map((p) => (
            <div key={p.t} style={{
              padding: 32, background: "var(--warm-white)",
              border: "1px solid var(--line-soft)", borderRadius: 2,
              transition: "transform 280ms ease, box-shadow 280ms ease",
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 999,
                background: "var(--blush-soft)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: "var(--gold-deep)", marginBottom: 18,
              }}><Icon.Check /></div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.3 }}>{p.t}</div>
              <p style={{ marginTop: 10, color: "var(--ink-soft)", fontSize: 14.5, lineHeight: 1.7 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ background: "var(--paper)", padding: "120px 40px" }}>
        <div style={{ maxWidth: 900, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 50 }}>
            <div className="eyebrow">Common Questions</div>
            <h2 className="h-display" style={{ fontSize: "clamp(32px, 3.8vw, 50px)", marginTop: 14, fontStyle: "italic" }}>
              Anything before you decide.
            </h2>
          </div>
          {[
            ["Do paintings arrive framed?", "Paintings arrive unframed for safer travel and so you can choose a frame that suits your home. Larissa recommends a simple natural-oak floater or a hand-finished gold leaf for florals. We are happy to recommend framers in your city."],
            ["Can I return a painting?", "Yes — within 14 days of arrival, with original packaging. We arrange the return. Your peace of mind is the entire point."],
            ["Do you ship outside Canada?", "Worldwide. We have shipped to 18 countries including the UK, France, Australia, Norway, New Zealand and Japan. International duties are paid by the buyer."],
            ["Can I visit the studio?", "Yes, by appointment. Please contact by email. Tea and the lake are included."],
          ].map(([q, a], i) => <Accordion key={i} title={q}>{a}</Accordion>)}
        </div>
      </section>

      {/* Contact CTA */}
      <section style={{ padding: "120px 40px", textAlign: "center", maxWidth: 800, margin: "0 auto" }}>
        <div className="h-script" style={{ fontSize: 48, color: "var(--gold-deep)" }}>
          Write to me — I would love to hear.
        </div>
        <p style={{ marginTop: 14, color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.7 }}>
          For commissions, studio visits, or any question at all.
        </p>
        <div className="lf-contact-cta" style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
          <a href="mailto:hello@larissaart.com" className="btn btn-primary">hello@larissaart.com</a>
          <button className="btn btn-ghost" onClick={() => navigate("gallery")}>Browse the Gallery</button>
        </div>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;
window.CollectorPage = CollectorPage;