/* global React, Reveal, RevealLines, MagneticButton, Footer */
const { useState: useState_e, useEffect: useEffect_e } = React;

const JOURNAL_ARTICLES = [
  {
    slug: "the-through-tenon",
    cat: "On craft",
    date: "March 04, 2026",
    read: "8 min",
    title: "On the through-tenon, and why we leave it proud.",
    dek: "A short defense of the most visible joint in the workshop — and why hiding it would be a small kind of dishonesty.",
    img: "assets/detail-tenon.jpg",
  },
  {
    slug: "vietnamese-acacia",
    cat: "On materials",
    date: "February 14, 2026",
    read: "12 min",
    title: "Why Vietnamese acacia, and the case for it.",
    dek: "We've used the same plantation cooperative for nine years. A few words on what we're after, and why this is the wood for the way we work.",
    img: "assets/vestfjord-shelf.jpg",
  },
  {
    slug: "astrid-vance-profile",
    cat: "The designer",
    date: "January 22, 2026",
    read: "15 min",
    title: "Astrid Vance has been drawing the same sofa for nine years.",
    dek: "A studio visit with Delina Living's only designer, and a sketchbook tour from 2017 to last Tuesday.",
    img: "assets/atelier-hero.jpg",
  },
  {
    slug: "first-apartment-buyers",
    cat: "Letter",
    date: "December 08, 2025",
    read: "5 min",
    title: "An open letter to first-apartment buyers.",
    dek: "Buy fewer pieces. Wait longer. Spend more once. A note for the customer we built the company for.",
    img: "assets/romsdalen-bed.jpg",
  },
  {
    slug: "fifty-year-warranty",
    cat: "On business",
    date: "November 19, 2025",
    read: "9 min",
    title: "The fifty-year warranty, explained without the marketing voice.",
    dek: "What it actually covers, what it doesn't, and how we expect to honor it in 2076.",
    img: "assets/sognefjord-bone.jpg",
  },
  {
    slug: "spring-04-notes",
    cat: "Spring/Summer 2026",
    date: "October 30, 2025",
    read: "6 min",
    title: "Notes from the floor of Catalog Vol. 04.",
    dek: "Twenty-two new pieces this spring — three of them genuinely new, the rest small refinements. Here's what changed and why.",
    img: "assets/hardanger-sideboard.jpg",
  },
];

function JournalPage({ onNavigate }) {
  return (
    <main className="journal" data-screen-label="Journal">
      <div className="journal-head">
        <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— The Journal · Volume 09</div></Reveal>
        <Reveal delay={120}>
          <h1 className="t-h1" style={{ marginTop: 24, maxWidth: "16ch" }}>
            <RevealLines lines={[<span key="a">A few hundred</span>, <span key="b" style={{ fontStyle: "italic" }}>essays from the atelier.</span>]} gap={120} />
          </h1>
        </Reveal>
        <Reveal delay={400}>
          <p className="dek" style={{ marginTop: 40, maxWidth: "52ch" }}>
            One letter a month, occasionally two. Long-form notes on materials, joinery, the people in the shop, and the business of building furniture slowly in 2026.
          </p>
        </Reveal>
      </div>

      <div className="journal-grid">
        {JOURNAL_ARTICLES.map((a, i) => (
          <Reveal key={a.slug} delay={(i % 2) * 100} className="journal-card">
            <a onClick={() => onNavigate("journal-article")} data-cursor="Read" href="#" style={{ display: "block" }}>
              <div className="img" style={{ backgroundImage: `url(${a.img})` }}></div>
            </a>
            <div className="meta">{a.cat} · {a.date} · {a.read} read</div>
            <a onClick={() => onNavigate("journal-article")} data-cursor="Read" href="#">
              <h3>{a.title}</h3>
            </a>
            <p className="dek">{a.dek}</p>
          </Reveal>
        ))}
      </div>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   JOURNAL ARTICLE — the through-tenon
================================================= */
function JournalArticlePage({ onNavigate }) {
  return (
    <main data-screen-label="Article">
      <section className="article-hero">
        <div>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— On craft · Mar 04, 2026 · 8 min read</div></Reveal>
          <Reveal delay={120}>
            <h1 className="t-h1" style={{ marginTop: 24, maxWidth: "18ch" }}>
              On the through-tenon, and <span style={{ fontStyle: "italic" }}>why we leave it proud.</span>
            </h1>
          </Reveal>
        </div>
        <Reveal delay={300}>
          <div className="meta" style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start" }}>
            <span>By Astrid Vance</span>
            <span>Photographs — David Yu</span>
            <span style={{ marginTop: 16, color: "var(--accent)" }}>Share — <a href="#" data-cursor="Copy" style={{ borderBottom: "1px solid currentColor" }}>copy link</a></span>
          </div>
        </Reveal>
      </section>

      <Reveal variant="img"><div className="article-feature" style={{ backgroundImage: "url(assets/detail-tenon.jpg)" }}></div></Reveal>

      <article className="article-body">
        <p>
          The first time I sat in a Hans Wegner CH25, I looked at the chair upside down for about ten minutes. The joint that holds the back to the seat — a through-tenon, slightly proud, finished with a chamfer — was the entire reason the chair was beautiful. It was also the entire reason it would still be a chair in 2074. I built the first Delina Living sofa around that joint.
        </p>
        <p>
          We get asked, mostly by industry people, why we don't hide it. The trade convention is to bury the through-tenon under a leg cap or a piece of veneer — to make the leg look monolithic, like it grew that way. We have nothing against that approach; it just isn't ours. Delina Living's pieces are held together by the geometry of the wood itself, not by hardware, and we want you to see that.
        </p>

        <h3>What "proud" means, and why two millimeters.</h3>
        <p>
          The through-tenon protrudes from the leg by exactly 2mm. This number is not arbitrary. At 1mm it reads as an accident; at 3mm it catches your sleeve when you stand up. At 2mm, the tenon is unambiguously a decision, but it sits below the radius of your thumb when you run your hand down the leg.
        </p>
        <p>
          You can feel for it from across the room, in low light, with your eyes closed. We've tested this with about thirty visitors to the showroom — including a furniture writer who couldn't find the chamfer detail on a competitor's chair until I pointed it out. On a Delina Living, you find it within four seconds. That's the point.
        </p>

        <div className="pull-quote">
          The piece is held together by the geometry of the wood itself, not by hardware. We want you to see that.
        </div>

        <h3>The honest version of the cost.</h3>
        <p>
          A through-tenon takes about forty minutes longer to cut, fit and finish than the equivalent dowel-and-screw joint. Multiplied across our twenty-two pieces and the average four leg joints per piece, that's roughly three additional hours of labor per sofa — at our shop rate, about $180. We do not charge separately for it. It is, in the dry parlance of the trade, the cost of being who we say we are.
        </p>
        <p>
          If you bought a Delina Living piece in the last five years, the through-tenon you're looking at right now will look better in another five. The hardwax oil finish deepens slightly, the end-grain darkens a half-shade against the long grain. Wegner's chair is sixty years old and still doing this. We hope ours will do the same.
        </p>

        <h3>A note on imitations.</h3>
        <p>
          We've seen a few competitors begin to ship "exposed joinery" pieces over the last eighteen months. Some are honest through-tenons; many are decorative caps glued to the leg. You can tell which by knocking on the top of the joint — a real through-tenon rings differently than a glued cap. It's a small thing to know. We're glad we live in a world where it matters.
        </p>

        <p style={{ marginTop: 48, color: "var(--ink-mute)", fontStyle: "italic" }}>
          — Astrid is the founder and only designer of Delina Living. She writes most months from the studio in Los Angeles, sometimes from the bench at the atelier.
        </p>
      </article>

      <section className="related" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="head">
          <Reveal><h3 className="t-h2"><span style={{ fontStyle: "italic" }}>More from the journal.</span></h3></Reveal>
          <Reveal delay={200}>
            <MagneticButton className="btn btn--ghost" data-cursor="View" onClick={() => onNavigate("journal")}>
              <span>All essays</span><span className="arrow">→</span>
            </MagneticButton>
          </Reveal>
        </div>
        <div className="related-grid">
          {JOURNAL_ARTICLES.slice(1, 4).map((a, i) => (
            <Reveal key={a.slug} delay={i * 100} variant="img">
              <div onClick={() => onNavigate("journal-article")} data-cursor="Read" style={{ cursor: "none" }}>
                <div style={{ aspectRatio: "5/4", backgroundImage: `url(${a.img})`, backgroundSize: "cover", backgroundPosition: "center", marginBottom: 16, backgroundColor: "var(--bone-deep)" }}></div>
                <div className="t-mono" style={{ color: "var(--ink-mute)", marginBottom: 6 }}>{a.cat} · {a.read}</div>
                <h4 style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 24, letterSpacing: "-0.005em" }}>{a.title}</h4>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* =================================================
   ATELIER — full About / brand story page
================================================= */
function AtelierPage({ onNavigate }) {
  return (
    <main data-screen-label="Atelier">
      {/* HERO */}
      <section className="hero" style={{ background: "var(--ink)" }}>
        <div className="hero-image" style={{ backgroundImage: "url(assets/atelier-hero.jpg)" }}></div>
        <div className="hero-grain"></div>
        <div className="hero-content">
          <div>
            <Reveal><div className="t-eyebrow" style={{ color: "rgba(242,235,224,0.55)" }}>— The studio, Los Angeles · The atelier, Vietnam</div></Reveal>
            <h1 className="t-display hero-title" style={{ marginTop: 32 }}>
              <RevealLines lines={["Drawn in L.A.,", <span key="i" style={{ fontStyle: "italic" }}>built in Vietnam,</span>, "the slow way."]} gap={120} />
            </h1>
          </div>
          <div></div>
        </div>
      </section>

      {/* OPENER */}
      <section className="story">
        <div className="story-grid" style={{ alignItems: "start" }}>
          <Reveal>
            <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Founded 2017</div>
            <h2 className="t-h2" style={{ marginTop: 20, maxWidth: "16ch" }}>
              We make fifty-nine pieces a year, ten of them signature. <span style={{ fontStyle: "italic" }}>That's on purpose.</span>
            </h2>
          </Reveal>
          <div className="col" style={{ gap: 24 }}>
            <Reveal delay={200}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", textWrap: "pretty" }}>
                Delina Living started in 2017 as a partnership between a one-person design studio in Los Angeles and a small woodworking shop outside Saigon. The premise was inconvenient — that the modern furniture category had quietly stopped caring about the things that made furniture worth owning, and that the people who still cared, the ones doing the careful joinery, were largely overseas. We bought the workshop. We have grown to twelve people across the two locations. The bandsaw is no longer borrowed.
              </p>
            </Reveal>
            <Reveal delay={350}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", textWrap: "pretty" }}>
                We do not run sales. We do not work with the speculative factory model that dominates the category. We do not change our catalog more than twice a year. Every piece is drawn by Astrid Vance in Los Angeles, prototyped on the bench at our Vietnam atelier with a master joiner she has worked with since 2017, and built to order in batches of one. Lead time is eight weeks. There are no exceptions, and we are not flexible on this.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* TICKER */}
      <section className="press">
        <div className="ticker">
          <span>Designed in Los Angeles · Built in Vietnam</span>
          <span>Designed in Los Angeles · Built in Vietnam</span>
          <span>Designed in Los Angeles · Built in Vietnam</span>
          <span>Designed in Los Angeles · Built in Vietnam</span>
        </div>
      </section>

      {/* PROCESS TIMELINE */}
      <section className="section section--bone-warm">
        <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— The eight-week process</div></Reveal>
        <Reveal delay={120}><h2 className="t-h2" style={{ marginTop: 16, maxWidth: "20ch" }}>From your order to <span style={{ fontStyle: "italic" }}>your living room,</span> step by step.</h2></Reveal>
        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line-strong)" }}>
          {[
            ["Wk 01", "Wood selection", "Boards marked from the kiln rack at our atelier — same plantation cooperative, same kiln, same year as the prototype. We chalk your name on them."],
            ["Wk 02–03", "Frame & joinery", "Mortise-and-tenon, hand-cut. Dry-fit, taken apart, glued and pinned. The frame is then left for ten days while the wood relaxes."],
            ["Wk 04–06", "Upholstery & finish", "Eight-way hand-tied springs over jute. Down-and-feather wrap. Six coats of hardwax oil, hand-rubbed with 0000 steel wool between coats."],
            ["Wk 07–08", "Delivery", "Ocean-freighted to the US, then a two-person white-glove team books a two-hour window with you. Placed in your room. Packaging hauled out the same day."],
          ].map(([w, t, b], i) => (
            <Reveal key={i} delay={i * 100} style={{ padding: "40px 24px 0 0", borderRight: i < 3 ? "1px solid var(--line)" : "0" }}>
              <div className="t-eyebrow" style={{ color: "var(--accent)" }}>{w}</div>
              <h4 style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 26, marginTop: 16, letterSpacing: "-0.005em" }}>{t}</h4>
              <p className="t-body" style={{ marginTop: 12, color: "var(--ink-soft)" }}>{b}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* DESIGNER */}
      <section className="story" style={{ background: "var(--bone)" }}>
        <div className="story-grid">
          <Reveal variant="img">
            <div style={{ aspectRatio: "4/5", backgroundImage: "url(assets/astrid-sketches.jpg)", backgroundSize: "cover", backgroundPosition: "center" }}></div>
          </Reveal>
          <div className="story-text col" style={{ gap: 28 }}>
            <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— The designer</div></Reveal>
            <Reveal delay={120}><h3 className="t-h2"><span style={{ fontStyle: "italic" }}>Astrid Vance</span> has been drawing the same sofa for nine years.</h3></Reveal>
            <Reveal delay={300}>
              <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", textWrap: "pretty" }}>
                Astrid trained at RISD, spent six years at Maharam, and started Delina Living because she wanted to design fewer things, more carefully. She works from the Los Angeles studio and flies to the atelier roughly once a quarter — every prototype is signed off in person, on the bench. She is the sole designer on every piece in the catalog. The Sognefjord sofa, our flagship, has gone through eleven revisions since 2017 — most of them invisible to the buyer. The current version is a millimeter taller at the arm than the one we shipped in March.
              </p>
            </Reveal>
            <Reveal delay={400}>
              <MagneticButton className="btn btn--ghost" data-cursor="Read" onClick={() => onNavigate("journal-article")}>
                <span>Read the studio profile</span><span className="arrow">→</span>
              </MagneticButton>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PROOF */}
      <section className="proof">
        <Reveal>
          <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— By the numbers</div>
          <h2 className="t-h2" style={{ marginTop: 18, maxWidth: "20ch" }}>The atelier in nine years.</h2>
        </Reveal>
        <div className="proof-grid" style={{ marginTop: 64 }}>
          {[
            { num: "12", suf: "", lbl: "People across the LA studio and the Vietnam atelier, including two upholsterers and one finisher." },
            { num: "59", suf: "", lbl: "Pieces in the active catalog, ten of them designated Signature — the bestselling archetypes refined for our atelier." },
            { num: "1,420", suf: "", lbl: "Pieces shipped to date, mostly to the contiguous United States." },
            { num: "0", suf: "", lbl: "Days we've ever been sold out. Made-to-order means there is no stock." },
          ].map((s, i) => (
            <Reveal key={i} delay={i * 100} className="stat">
              <div className="num">{s.num}<span style={{ fontStyle: "normal", fontSize: "0.4em", marginLeft: 6, letterSpacing: "0.04em" }}>{s.suf}</span></div>
              <div className="lbl">{s.lbl}</div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="section section--dark" style={{ textAlign: "center" }}>
        <Reveal>
          <h2 className="t-display" style={{ fontSize: "clamp(56px, 9vw, 168px)", maxWidth: "16ch", margin: "0 auto" }}>
            Come visit the <span style={{ fontStyle: "italic" }}>workshop.</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="t-body t-body-lg" style={{ maxWidth: "50ch", margin: "32px auto 40px", color: "rgba(242,235,224,0.75)" }}>
            The LA showroom is open Tue–Sat, walk-ins welcome. Atelier visits at our Vietnam workshop are by appointment, with thirty days notice — we'll have coffee on.
          </p>
        </Reveal>
        <Reveal delay={400}>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <MagneticButton className="btn btn--bone" data-cursor="View" onClick={() => onNavigate("showrooms")}>
              <span>Showrooms & visits</span><span className="arrow">→</span>
            </MagneticButton>
            <MagneticButton className="btn" style={{ color: "var(--bone)", borderColor: "rgba(242,235,224,0.4)" }} data-cursor="Write" onClick={() => onNavigate("contact")}>
              <span>Write to us</span>
            </MagneticButton>
          </div>
        </Reveal>
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

window.JournalPage = JournalPage;
window.JournalArticlePage = JournalArticlePage;
window.AtelierPage = AtelierPage;
