const { useState, useEffect, useRef } = React;

/* ------------------------------- Tweak defaults ------------------------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "honeyMoss",
  "heroLayout": "split",
  "showMarquee": true,
  "showSplash": true,
  "embedVideos": false
}/*EDITMODE-END*/;

// Palettes pulled from the logo (cream/yellow ground + paint splash colors).
// Each palette defines: bg (page), ink (text), accent (primary), accent2 (secondary), tags (3 tag colors).
const PALETTES = {
  stainedGlass: {
    name: "Stained Glass",
    bg: "#F5E9C8", paper: "#FAF3DD",
    ink: "#1A1410", inkSoft: "#3A2F26",
    accent: "#2E5BD8", accent2: "#3FA85C",
    tags: ["#E2412A", "#2E5BD8", "#3FA85C"],
  },
  cobaltLeaf: {
    name: "Cobalt & Leaf",
    bg: "#F5E9C8", paper: "#FAF3DD",
    ink: "#1A1410", inkSoft: "#3A2F26",
    accent: "#2E5BD8", accent2: "#F2A93B",
    tags: ["#2E5BD8", "#3FA85C", "#F2A93B"],
  },
  emberAmber: {
    name: "Ember & Amber",
    bg: "#F5E9C8", paper: "#FAF3DD",
    ink: "#1A1410", inkSoft: "#3A2F26",
    accent: "#E2412A", accent2: "#F2A93B",
    tags: ["#E2412A", "#F2A93B", "#3FA85C"],
  },
  meadow: {
    name: "Meadow",
    bg: "#F5E9C8", paper: "#FAF3DD",
    ink: "#1A1410", inkSoft: "#3A2F26",
    accent: "#3FA85C", accent2: "#2E5BD8",
    tags: ["#3FA85C", "#2E5BD8", "#F2A93B"],
  },
  inkwell: {
    name: "Inkwell",
    bg: "#F5E9C8", paper: "#FAF3DD",
    ink: "#1A1410", inkSoft: "#3A2F26",
    accent: "#1A1410", accent2: "#E2412A",
    tags: ["#1A1410", "#E2412A", "#F2A93B"],
  },
  honeyMoss: {
    name: "Honey & Moss",
    bg: "#F5E9C8", paper: "#FAF3DD",
    ink: "#1A1410", inkSoft: "#3A2F26",
    accent: "#F2A93B", accent2: "#3FA85C",
    tags: ["#F2A93B", "#3FA85C", "#2E5BD8"],
  },
};

/* ------------------------------- Icons ------------------------------- */
const I = {
  yt: (props) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-5.8 31 31 0 0 0-.5-5.8zM9.6 15.5v-7l6.3 3.5-6.3 3.5z"/>
    </svg>
  ),
  ig: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/>
    </svg>
  ),
  tt: (props) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M19.6 7.7a6.3 6.3 0 0 1-3.9-1.4v8.5a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6 0 .9.1V12a2.7 2.7 0 1 0 1.9 2.6V2h2.7a4 4 0 0 0 4 4v1.7z"/>
    </svg>
  ),
  shop: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M4 7h16l-1.4 11.2a2 2 0 0 1-2 1.8H7.4a2 2 0 0 1-2-1.8L4 7z"/>
      <path d="M9 10V6a3 3 0 1 1 6 0v4"/>
    </svg>
  ),
  play: (props) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}><path d="M8 5v14l11-7z"/></svg>
  ),
  arrow: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
};

/* ------------------------------- Data ------------------------------- */
const VIDEOS = [
  { id: "CL8XI_ae3Qo", title: "Painting blossoms onto cobalt glass", tag: "Latest", duration: "12 min" },
  { id: "t1do9qbKfXg", title: "Layering color: glass painting basics", tag: "Tutorial", duration: "9 min" },
  { id: "EGxLsbUgsCs", title: "A wine glass becomes a garden", tag: "Studio", duration: "15 min" },
];

const PRODUCTS = [
  { name: "Hand-painted vase, no. 04", category: "Originals", price: "$148", color: "p1" },
  { name: "Wildflower wine glass set", category: "Sets of two", price: "$96", color: "p2" },
  { name: "Botanical pitcher", category: "Originals", price: "$210", color: "p3" },
];

/* ------------------------------- Components ------------------------------- */
function Nav({ accent }) {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <img src="assets/logo.jpg" alt="Glass Art Lab" />
          <span className="name">Glass Art Lab</span>
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#videos">Videos</a>
          <a href="#gallery">Gallery</a>
          <a href="#shop">Shop</a>
          <a href="https://www.youtube.com/@GlassArtLab" target="_blank" rel="noopener noreferrer" className="cta" style={{ background: accent }}>
            Subscribe ↗
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ accent, accent2, tags = [], showSplash, layout }) {
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="hero-grid" style={ layout === "centered" ? { gridTemplateColumns: "1fr", textAlign: "center" } : {}}>
          <div>
            <div className="eyebrow">
              <span className="dot" style={{ background: accent }}></span>
              <span>Painting on Glass · Est. Glass Art Lab</span>
            </div>
            <h1 className="headline">
              Brushstrokes<br/>that turn glass<br/>into a <em style={{ color: accent }}>garden.</em>
            </h1>
            <p className="lede" style={ layout === "centered" ? { margin: "0 auto 36px" } : {}}>
              Hi, I'm the artist behind Glass Art Lab. I paint flowers, leaves and small wild things onto vases, glasses and pitchers — and I film every step on YouTube so you can paint along.
            </p>
            <div className="cta-row" style={ layout === "centered" ? { justifyContent: "center" } : {}}>
              <a className="btn btn-primary" href="https://www.youtube.com/@GlassArtLab" target="_blank" rel="noopener noreferrer">
                <I.yt width="18" height="18"/> Watch on YouTube
              </a>
              <a className="btn btn-ghost" href="#shop">
                <I.shop width="18" height="18"/> Visit the shop
              </a>
            </div>
          </div>
          { layout === "split" && (
            <div className="hero-art">
              {showSplash && <div className="splash" style={{ top: -28, right: -28, background: accent, opacity: .9 }}/>}
              <img src="assets/hero.jpg" alt="Rainbow chevron painted glass cube — Glass Art Lab" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
              <div className="hero-tag t1" style={{ background: tags[0] || accent, color: "#fff" }}>Original work</div>
              <div className="hero-tag t2" style={{ background: tags[1] || accent2, color: "#fff" }}>▶ 4.5K subscribers</div>
              <div className="hero-tag t3" style={{ background: tags[2] || accent, color: "#fff" }}>New video Friday</div>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

function Marquee({ show, tags = [] }) {
  if (!show) return null;
  const items = ["Painting on glass", "Hand-made originals", "Tutorials every Friday", "Shipped from the studio"];
  const colors = [tags[0] || "#E2412A", tags[1] || "#2E5BD8", tags[2] || "#3FA85C", tags[0] || "#F2A93B"];
  const row = items.map((t, i) => (
    <span key={i}><span className="star" style={{ background: colors[i % colors.length] }}></span>{t}</span>
  ));
  return (
    <div className="strip">
      <div className="strip-track">
        {row}{row}{row}
      </div>
    </div>
  );
}

function About({ accent }) {
  return (
    <section className="about" id="about">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num">01 — About</div>
            <h2 style={{ marginTop: 12 }}>The studio,<br/><em style={{ color: accent }}>in my words.</em></h2>
          </div>
        </div>
        <div className="about-grid">
          <div className="about-img">
            <img src="assets/about.jpg" alt="Glowing painted glass votive with green leaves on cobalt — Glass Art Lab studio" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div>
            <p>I started painting on glass because the surface refuses to behave. Paint pools, slides, catches the light wrong, then suddenly catches it perfectly — and there's a flower where there wasn't one before. I never quite know what a piece will look like until the last layer is dry.</p>
            <p>Every video on the channel is filmed in my home studio, usually with the cat doing laps in the background. I share the messy parts too — the wobbly first lines, the colors that didn't work, the things I had to scrape off and start over. That's the part I think makes painting feel possible.</p>
            <p>If you'd like to paint along, the channel is the best place to start. If you'd like to take home an original, the shop is opening soon. Either way — thank you for being here.</p>
            <div className="signature">— Painted with love</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function VideoCard({ v, embed }) {
  const [open, setOpen] = useState(false);
  const playing = embed || open;
  return (
    <div className={"video-card" + (playing ? " embedded" : "")}>
      <div className="video-thumb" onClick={() => setOpen(true)} role="button" aria-label={`Play ${v.title}`}>
        {playing ? (
          <iframe
            src={`https://www.youtube.com/embed/${v.id}?autoplay=${open ? 1 : 0}&rel=0`}
            title={v.title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        ) : (
          <>
            <img src={`https://i.ytimg.com/vi/${v.id}/hqdefault.jpg`} alt={v.title} loading="lazy"/>
            <div className="play-btn"><span><I.play width="24" height="24" style={{ marginLeft: 3 }}/></span></div>
          </>
        )}
      </div>
      <div className="video-meta">
        <h3 className="vt">{v.title}</h3>
        <div className="vd">
          <span className="pill">{v.tag}</span>
          <span>{v.duration}</span>
        </div>
      </div>
    </div>
  );
}

function Videos({ accent, embed }) {
  return (
    <section id="videos">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num">02 — Watch</div>
            <h2 style={{ marginTop: 12 }}>Featured <em style={{ color: accent }}>videos</em>.</h2>
          </div>
          <p className="section-sub">A few favorites from the channel. New tutorials and studio sessions go up most Fridays — subscribe so you don't miss them.</p>
        </div>
        <div className="videos-grid">
          {VIDEOS.map(v => <VideoCard key={v.id} v={v} embed={embed}/>)}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
          <a className="btn btn-primary" href="https://www.youtube.com/@GlassArtLab" target="_blank" rel="noopener noreferrer">
            <I.yt width="18" height="18"/> See all videos
          </a>
        </div>
      </div>
    </section>
  );
}

function Gallery({ accent }) {
  const tiles = [
    { cls: "g1", src: "assets/gallery/g1.jpg", label: "Ireland keepsake jar" },
    { cls: "g2", src: "assets/gallery/g2.jpg", label: "Glowing votive — golden mosaic" },
    { cls: "g3", src: "assets/gallery/g3.jpg", label: "Blue rose on copper" },
    { cls: "g4", src: "assets/gallery/g4.jpg", label: "Wildflower stained-glass panel" },
    { cls: "g5", src: "assets/gallery/g5.jpg", label: "Dahlia in flame" },
    { cls: "g6", src: "assets/gallery/g6.jpg", label: "Crimson chrysanthemum" },
    { cls: "g7", src: "assets/gallery/g7.jpg", label: "Sunflower on crimson" },
    { cls: "g8", src: "assets/gallery/g8.jpg", label: "Little village votive" },
  ];
  return (
    <section className="gallery" id="gallery">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num">03 — Gallery</div>
            <h2 style={{ marginTop: 12 }}>A few <em>painted things</em>.</h2>
          </div>
          <p className="section-sub">Past pieces, studio shots, and works-in-progress — a window into the workbench.</p>
        </div>
        <div className="gallery-grid">
          {tiles.map((t, i) => (
            <div key={i} className={"tile " + t.cls}>
              <img src={t.src} alt={t.label} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
              <div className="tile-caption">{t.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Shop({ accent }) {
  return (
    <section id="shop">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num">04 — Shop</div>
            <h2 style={{ marginTop: 12 }}>Take home<br/>an <em style={{ color: accent }}>original</em>.</h2>
            <div className="construction">Shop opening soon · Shopify under construction</div>
          </div>
          <p className="section-sub">A small batch of hand-painted pieces, signed and packed in the studio. When the shop opens, this is where you'll find them.</p>
        </div>
        <div className="shop-grid">
          {PRODUCTS.map((p, i) => (
            <a key={i} className={"product " + p.color} href="#" onClick={(e)=>e.preventDefault()}>
              <div className="product-img">
                <div className="frame"></div>
                <div className="stripes"></div>
                <div className="ph">[ Product photo ]</div>
              </div>
              <div className="product-meta">
                <div>
                  <h3 className="pn">{p.name}</h3>
                  <div className="pc">{p.category}</div>
                </div>
                <div className="pp">{p.price}</div>
              </div>
            </a>
          ))}
        </div>
        <div className="shop-cta">
          <a className="btn btn-primary" href="#" onClick={(e)=>e.preventDefault()} style={{ background: accent, color: "#fff" }}>
            <I.shop width="18" height="18"/> Notify me when the shop opens
          </a>
        </div>
      </div>
    </section>
  );
}

function Newsletter({ accent }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;
    // Avoid double-injection on re-render
    if (containerRef.current.querySelector("script[data-uid='a4b9a2d455']")) return;
    const s = document.createElement("script");
    s.async = true;
    s.setAttribute("data-uid", "a4b9a2d455");
    s.src = "https://alienrealms.kit.com/a4b9a2d455/index.js";
    containerRef.current.appendChild(s);
  }, []);

  return (
    <div className="wrap">
      <div className="news" style={{ background: accent }}>
        <div className="news-grid">
          <div>
            <h2>Letters from <em>the studio.</em></h2>
            <p>Once a month, I send a note with what's drying on the workbench, what's heading to the shop, and what video is up next. No noise — just glass.</p>
          </div>
          <div ref={containerRef} className="kit-form-host"></div>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <img src="assets/logo.jpg" alt="" style={{ width: 56, height: 56, borderRadius: 10 }}/>
              <div className="name">Glass Art Lab</div>
            </div>
            <p>Painting on glass — videos, originals and the occasional tutorial, made in a sunlit home studio.</p>
          </div>
          <div className="foot-col">
            <h4>Explore</h4>
            <a href="#about">About</a>
            <a href="#videos">Videos</a>
            <a href="#gallery">Gallery</a>
            <a href="#shop">Shop</a>
          </div>
          <div className="foot-col">
            <h4>Watch</h4>
            <a href="https://www.youtube.com/@GlassArtLab" target="_blank" rel="noopener noreferrer">YouTube channel ↗</a>
            <a href="https://www.youtube.com/@GlassArtLab/videos" target="_blank" rel="noopener noreferrer">All videos ↗</a>
            <a href="https://www.youtube.com/@GlassArtLab?sub_confirmation=1" target="_blank" rel="noopener noreferrer">Subscribe ↗</a>
          </div>
          <div className="foot-col">
            <h4>Elsewhere</h4>
            <a href="https://www.instagram.com/glassartlab/" target="_blank" rel="noopener noreferrer">Instagram · @glassartlab ↗</a>
            <a href="https://www.tiktok.com/@glassartlab" target="_blank" rel="noopener noreferrer">TikTok ↗</a>
            <a href="mailto:info@glassartlab.com">Email the studio</a>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© {new Date().getFullYear()} Glass Art Lab · All works hand-painted</div>
          <div>Made with brushes, glass, and a lot of patience</div>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------------- Tweaks panel ------------------------------- */
function PaletteSwatch({ p, active, onClick }) {
  return (
    <button
      onClick={onClick}
      title={p.name}
      style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "6px 8px", borderRadius: 8, cursor: "pointer",
        background: active ? "rgba(0,0,0,.06)" : "transparent",
        border: active ? ".5px solid rgba(0,0,0,.2)" : ".5px solid transparent",
        width: "100%", textAlign: "left", font: "inherit", color: "inherit",
      }}>
      <div style={{ display: "flex", borderRadius: 6, overflow: "hidden", border: ".5px solid rgba(0,0,0,.1)" }}>
        <div style={{ width: 14, height: 18, background: p.bg }}/>
        <div style={{ width: 14, height: 18, background: p.accent }}/>
        <div style={{ width: 14, height: 18, background: p.accent2 }}/>
        <div style={{ width: 14, height: 18, background: p.ink }}/>
      </div>
      <span style={{ fontSize: 11.5 }}>{p.name}</span>
    </button>
  );
}

function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {Object.entries(PALETTES).map(([k, p]) => (
            <PaletteSwatch
              key={k}
              p={p}
              active={tweaks.palette === k}
              onClick={() => setTweak("palette", k)}
            />
          ))}
        </div>
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio
          label="Layout"
          value={tweaks.heroLayout}
          options={[
            { value: "split", label: "Split" },
            { value: "centered", label: "Centered" },
          ]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakToggle
          label="Paint splash"
          value={tweaks.showSplash}
          onChange={(v) => setTweak("showSplash", v)}
        />
      </TweakSection>
      <TweakSection label="Sections">
        <TweakToggle
          label="Marquee strip"
          value={tweaks.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
        <TweakToggle
          label="Auto-embed videos"
          value={tweaks.embedVideos}
          onChange={(v) => setTweak("embedVideos", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ------------------------------- App ------------------------------- */
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const palette = PALETTES[tweaks.palette] || PALETTES.stainedGlass;
  const accent = palette.accent;
  const accent2 = palette.accent2;

  // Apply palette to CSS variables
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--cream", palette.bg);
    r.setProperty("--paper", palette.paper);
    r.setProperty("--ink", palette.ink);
    r.setProperty("--ink-soft", palette.inkSoft);
    r.setProperty("--accent", palette.accent);
    r.setProperty("--accent2", palette.accent2);
  }, [tweaks.palette]);

  return (
    <>
      <Nav accent={accent}/>
      <Hero accent={accent} accent2={accent2} tags={palette.tags} showSplash={tweaks.showSplash} layout={tweaks.heroLayout}/>
      <Marquee show={tweaks.showMarquee} tags={palette.tags}/>
      <About accent={accent}/>
      <Videos accent={accent} embed={tweaks.embedVideos}/>
      <Gallery accent={accent} tags={palette.tags}/>
      <Shop accent={accent}/>
      <Newsletter accent={accent}/>
      <Footer/>
      <Tweaks tweaks={tweaks} setTweak={setTweak}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);