// Mobile Learn page — swipeable "marble shelf" replaces the desktop joystick stoneyard

const { useState: lnS, useEffect: lnE, useRef: lnR } = React;

const ARTICLES = [
  {
    id: "marble-restoration",
    category: "Stone Science",
    title: "Marble Countertop Restoration: Etch Removal & Polishing.",
    kicker: "How a dull, etched marble countertop is brought back to a like-new finish — and when it's worth the work.",
    pullquote: "Etching isn't a stain — it's a tiny chemical burn on the surface. The good news is it's fixable.",
    author: "Thomas Chow", date: "Jan 15, 2026", readTime: "7 min",
    palette: { bg: "linear-gradient(135deg, #F2EBE0, #E8DDC9)", veins: "#C9B493", text: "var(--ink)" },
  },
  {
    id: "stoneguard-everything",
    category: "StoneGuard",
    title: "Everything You Need to Know About StoneGuard.",
    kicker: "What the film is, how it's made, what it protects against, and why it's different from sealers.",
    pullquote: "Think of it as an invisible layer of armor, sized for your exact countertop, installed in a day.",
    author: "Thomas Chow", date: "Oct 21, 2025", readTime: "3 min",
    palette: { bg: "linear-gradient(135deg, #1E1B17, #2A2622)", veins: "#5C4A2E", text: "var(--bone)" },
  },
  {
    id: "why-marble-stains",
    category: "Stone Science",
    title: "Why Marble Stains (and How to Stop It).",
    kicker: "Why wine, lemon, and tomato leave their mark on marble — and what actually stops them.",
    pullquote: "Marble is made of the same stuff as antacid tablets. That's why acidic food eats into it.",
    author: "Thomas Chow", date: "Aug 20, 2025", readTime: "5 min",
    palette: { bg: "linear-gradient(135deg, #F5F2ED, #E0D8C9)", veins: "#9B8567", text: "var(--ink)" },
  },
  {
    id: "protect-with-power",
    category: "StoneGuard",
    title: "Protect Your Stone with the Power of StoneGuard.",
    kicker: "What a professional StoneGuard install actually looks like — from first visit through final hand-off.",
    pullquote: "One day of work. A lifetime of worry-free cooking, spilling, and living.",
    author: "M&T Team", date: "Oct 20, 2025", readTime: "3 min",
    palette: { bg: "linear-gradient(135deg, #3D2828, #6B1416)", veins: "#8B4A4C", text: "var(--bone)" },
  },
  {
    id: "benefits-of-mt",
    category: "StoneGuard",
    title: "The Benefits of Using M&T to Install StoneGuard.",
    kicker: "Why picking the right certified installer matters as much as the film itself.",
    pullquote: "Same two guys on every job — so the work stays as careful as the day we started.",
    author: "M&T Team", date: "Oct 16, 2025", readTime: "4 min",
    palette: { bg: "linear-gradient(135deg, #EEE9DF, #D9CFBC)", veins: "#A89878", text: "var(--ink)" },
  },
  {
    id: "lifesaver-marble",
    category: "StoneGuard",
    title: "How StoneGuard Could Be a Lifesaver for Marble Owners.",
    kicker: "The short read: why marble owners keep telling us StoneGuard is the single best decision they made after install.",
    pullquote: "Same countertop, same kids, same wine nights. One looks brand new. One doesn't.",
    author: "M&T Team", date: "Oct 24, 2023", readTime: "2 min",
    palette: { bg: "linear-gradient(135deg, #0F0E0D, #1A1714)", veins: "#3D3023", text: "var(--bone)" },
  },
];

const CATS = ["All", "Stone Science", "StoneGuard"];

function LearnHero() {
  return (
    <section style={{ paddingTop: "calc(var(--nav-h) + 32px)", paddingBottom: 28, background: "var(--bone)" }}>
      <div className="container">
        <LineEyebrow style={{ marginBottom: 20 }}>The Stoneyard · Field Notes</LineEyebrow>
        <h1 className="serif" style={{ fontSize: 52, lineHeight: 0.98, letterSpacing: "-0.022em", marginBottom: 22 }}>
          <Reveal>Notes from</Reveal>
          <Reveal delay={140}>
            <span style={{ color: "var(--maroon)", fontStyle: "italic", display: "block" }}>the stoneyard.</span>
          </Reveal>
        </h1>
        <Reveal delay={300}>
          <p className="body">
            Plain-spoken articles on stone, what damages it, what protects it, and what we've learned in many years of installs across the tri-state.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// Marble "slab" card — gradient stone face with veining + content
function SlabCard({ a, onOpen, idx }) {
  const isDark = a.palette.text === "var(--bone)";
  return (
    <button
      onClick={() => onOpen(a)}
      style={{
        position: "relative",
        background: a.palette.bg,
        color: a.palette.text,
        height: 480,
        width: "100%",
        textAlign: "left",
        padding: 22,
        display: "flex", flexDirection: "column",
        overflow: "hidden",
        cursor: "pointer",
      }}
    >
      {/* Veining decoration */}
      <svg viewBox="0 0 200 300" preserveAspectRatio="none" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        opacity: 0.4, pointerEvents: "none",
      }}>
        <path d="M-10 60 Q60 80, 100 50 T220 120 L220 130 Q150 100, 80 130 T-10 100 Z" fill={a.palette.veins} opacity="0.5"/>
        <path d="M-10 200 Q70 180, 120 220 T220 200 L220 210 Q140 240, 60 230 T-10 240 Z" fill={a.palette.veins} opacity="0.35"/>
        <path d="M20 0 Q40 80, 30 160 T70 300" stroke={a.palette.veins} strokeWidth="0.6" fill="none" opacity="0.45"/>
        <path d="M120 0 Q150 100, 130 220 T180 300" stroke={a.palette.veins} strokeWidth="0.5" fill="none" opacity="0.35"/>
      </svg>

      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", marginBottom: "auto" }}>
        <div className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7 }}>
          {a.category}
        </div>
        <div className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.6, fontVariantNumeric: "tabular-nums" }}>
          {String(idx + 1).padStart(2, "0")}
        </div>
      </div>

      <div style={{ position: "relative" }}>
        <h3 className="serif" style={{
          fontSize: 26, lineHeight: 1.08, letterSpacing: "-0.018em", marginBottom: 12,
          textWrap: "balance",
        }}>{a.title}</h3>
        <p style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.8, marginBottom: 14 }}>{a.kicker}</p>
        <div className="mono" style={{
          fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase",
          opacity: 0.7,
          marginBottom: 14,
        }}>
          {a.author} · {a.date}
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 14,
          borderTop: `1px solid ${isDark ? "rgba(245,242,237,0.2)" : "rgba(20,20,18,0.15)"}`,
        }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.75 }}>
            Read · {a.readTime}
          </span>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/>
          </svg>
        </div>
      </div>
    </button>
  );
}

function LearnShelf({ onOpen }) {
  const [filter, setFilter] = lnS("All");
  const filtered = filter === "All" ? ARTICLES : ARTICLES.filter(a => a.category === filter);
  return (
    <section style={{ background: "var(--bone)", paddingBottom: 60 }}>
      {/* Filter chips */}
      <div className="no-scrollbar" style={{
        display: "flex", gap: 8,
        overflowX: "auto",
        padding: "8px var(--gutter) 22px",
      }}>
        {CATS.map(c => (
          <button
            key={c}
            onClick={() => setFilter(c)}
            style={{
              padding: "9px 16px",
              fontSize: 12, letterSpacing: "0.04em",
              border: "1px solid " + (filter === c ? "var(--ink)" : "var(--line)"),
              background: filter === c ? "var(--ink)" : "transparent",
              color: filter === c ? "var(--bone)" : "var(--ink)",
              whiteSpace: "nowrap", flexShrink: 0,
              transition: "all .25s ease",
              borderRadius: 99,
            }}
          >
            {c}
            <span className="mono" style={{
              marginLeft: 8, fontSize: 10, opacity: 0.5,
              fontVariantNumeric: "tabular-nums",
            }}>
              {c === "All" ? ARTICLES.length : ARTICLES.filter(a => a.category === c).length}
            </span>
          </button>
        ))}
      </div>

      <SwipeCarousel
        items={filtered}
        width="84%"
        renderItem={(a, i) => <SlabCard a={a} idx={i} onOpen={onOpen} />}
      />
    </section>
  );
}

function LearnGrid({ onOpen }) {
  return (
    <section style={{ padding: "20px 0 60px", background: "var(--bone)" }}>
      <div className="container">
        <LineEyebrow style={{ marginBottom: 18 }}>All Articles</LineEyebrow>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {ARTICLES.map((a, i) => (
            <Reveal key={a.id} delay={i * 40}>
              <button onClick={() => onOpen(a)} style={{
                width: "100%", padding: "20px 0", textAlign: "left",
                borderBottom: "1px solid var(--line)",
                display: "flex", alignItems: "flex-start", gap: 16,
              }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--mute)", paddingTop: 4, fontVariantNumeric: "tabular-nums" }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--maroon)", marginBottom: 6 }}>
                    {a.category}
                  </div>
                  <div className="serif" style={{ fontSize: 19, letterSpacing: "-0.01em", lineHeight: 1.2, marginBottom: 6 }}>
                    {a.title}
                  </div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mute)" }}>
                    {a.author} · {a.date} · {a.readTime}
                  </div>
                </div>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ marginTop: 8, color: "var(--mute)" }}>
                  <path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/>
                </svg>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// Article modal — bottom-sheet style
function ArticleSheet({ article, onClose }) {
  const open = !!article;
  lnE(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  if (!article && !open) return null;
  return (
    <>
      <div className={"m-sheet-backdrop" + (open ? " open" : "")} onClick={onClose}/>
      <div className={"m-sheet" + (open ? " open" : "")} style={{ maxHeight: "94vh" }}>
        <div className="m-sheet__handle"/>
        {article && (
          <>
            <div className="m-sheet__head" style={{ flexDirection: "column", alignItems: "flex-start", gap: 0, padding: "18px var(--gutter) 14px" }}>
              <div style={{ display: "flex", width: "100%", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--maroon)" }}>
                    {article.category} · {article.readTime}
                  </div>
                </div>
                <button onClick={onClose} aria-label="Close" style={{ padding: 8, marginTop: -6, marginRight: -6 }}>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                </button>
              </div>
              <h2 className="serif" style={{ fontSize: 26, lineHeight: 1.1, letterSpacing: "-0.015em", marginTop: 8 }}>
                {article.title}
              </h2>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mute)", marginTop: 10 }}>
                by {article.author} · {article.date}
              </div>
            </div>
            <div className="m-sheet__body">
              <p className="body" style={{ fontSize: 15, marginBottom: 22 }}>{article.kicker}</p>
              <blockquote className="serif" style={{
                fontSize: 22, lineHeight: 1.25, letterSpacing: "-0.01em",
                borderLeft: "1px solid var(--maroon)",
                paddingLeft: 16, margin: "26px 0", color: "var(--ink)",
              }}>
                <span style={{ color: "var(--maroon)" }}>"</span>{article.pullquote}<span style={{ color: "var(--maroon)" }}>"</span>
              </blockquote>
              <p className="body" style={{ marginBottom: 14 }}>
                This is a placeholder for the full article body. In the real site, this sheet would render the article's full markdown content with images, callouts, and inline diagrams.
              </p>
              <p className="body" style={{ marginBottom: 14 }}>
                We kept the mobile reading experience to a single sheet so it stays focused — no fighting the back button, no losing scroll position. Swipe down to close.
              </p>
              <p className="body">
                Each article links to a deep-dive in our archive, plus related articles further down the page.
              </p>
            </div>
            <div className="m-sheet__foot">
              <button className="btn btn-primary" style={{ flex: 1 }} onClick={onClose}>
                Read full article
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M1 6h10m0 0L6 1m5 5L6 11" stroke="currentColor" strokeWidth="1.3"/></svg>
              </button>
            </div>
          </>
        )}
      </div>
    </>
  );
}

Object.assign(window, { LearnHero, LearnShelf, LearnGrid, ArticleSheet, ARTICLES });