/* TABLEAU — section building blocks. Exposed on window for app.jsx. */

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;
const SmallCaps = ({ children, ...rest }) => <span className="smallcaps" {...rest}>{children}</span>;

const SectionHead = ({ index, title, meta, id }) =>
<header className="sec-head reveal" id={id}>
    <div>
      <Eyebrow>{index}</Eyebrow>
    </div>
    <div>
      <h2 className="display" dangerouslySetInnerHTML={{ __html: title }} />
      {meta ? <p className="meta">{meta}</p> : null}
    </div>
  </header>;


const Pill = ({ children, variant = "outline", href = "#", ...rest }) => {
  const cls = variant === "solid" ? "pill pill-solid" : variant === "teal" ? "pill pill-teal" : variant === "light" ? "pill pill-light" : "pill";
  return <a className={cls} href={href} {...rest}>{children}</a>;
};

/* ---------- Top bar ---------- */
const TopBar = () =>
<div className="topbar">
    <div className="topbar-inner">
      <span className="topbar-spacer" aria-hidden="true"></span>
      <a className="brand" href="#top" aria-label="TABLEAU Sidetables — home">
        <img className="brand-logo" src="images/logo.png" alt="" />
        <span className="brand-word">Tableau<br /><em>Sidetables</em></span>
      </a>
      <div className="topbar-cta">
        <nav className="nav nav--right">
          <a href="#works">Works</a>
          <a href="#customize">Customize</a>
          <a href="#atelier">Atelier</a>
        </nav>
        <Pill href="#contact" variant="solid">Contact</Pill>
      </div>
    </div>
  </div>;


/* ---------- Hero ---------- */
const Hero = () =>
<section className="hero" id="top">
    <div className="wrap">
      <div className="hero-meta reveal">
        <span className="dot" />
        <SmallCaps>Est. 2025 · Roeselare — Belgium</SmallCaps>
        <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink-soft)' }}>An epoxy-cast atelier for memory.</span>
      </div>

      <h1 className="hero-h1 reveal">
        Shell, <em>cork</em>, <em>wing</em>&thinsp;—<br />
        and the table that <em>remembers.</em>
      </h1>

      <div className="hero-grid reveal">
        <div className="hero-copy">
          <p><strong style={{ fontWeight: 600 }}>TABLEAU Sidetables</strong> are hand-poured in optically-clear epoxy and finished by hand in a small Roeselare atelier. Each piece holds something gathered — shells from a low tide, beetle wings traded ethically, the corks of a hundred shared bottles — and casts them into a surface that lasts a lifetime.

        </p>
          <p style={{ marginBottom: 32 }}>Made mainly for interiors. Editioned and bespoke. No two are the same.

        </p>
          <div className="hero-cta">
            <Pill href="#works" variant="solid">Works →</Pill>
            <Pill href="#customize">Commission a piece →</Pill>
          </div>
        </div>
        <div style={{ paddingBottom: 4 }}>
          <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 16, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '6px 24px', alignItems: 'baseline' }}>
            <SmallCaps style={{ color: 'var(--ink-mute)' }}>Material</SmallCaps>
            <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 17 }}>UV-stable epoxy</span>
            <SmallCaps style={{ color: 'var(--ink-mute)' }}>Finish</SmallCaps>
            <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 17 }}>Mirror polish</span>
            <SmallCaps style={{ color: 'var(--ink-mute)' }}>Edition</SmallCaps>
            <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 17 }}>Limited — or only made for you</span>
            <SmallCaps style={{ color: 'var(--ink-mute)' }}>Lead time</SmallCaps>
            <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 17 }}>8 – 12 weeks</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ---------- Press strip ---------- */
const PRESS = ["Hand-poured epoxy", "Editioned & bespoke", "Shells · cork · wing", "UV-stable resin", "Mirror polish", "Roeselare atelier", "No two alike", "Cast for a lifetime", "Numbered runs of nine", "Your fragments, made surface"];
const Press = () => {
  const items = [...PRESS, ...PRESS];
  return (
    <div className="press">
      <div className="press-track">
        {items.map((p, i) =>
        <span className="press-item" key={i}>
            <span className="dot" />{p}
          </span>
        )}
      </div>
    </div>);

};

/* ---------- Highlights row ---------- */
const HIGHLIGHTS = [
{ n: '№ 01', t: 'Shelly · low tide', img: 'images/shelly.jpg' },
{ n: '№ 02', t: 'Beetle · iridescence', img: 'images/beetle.jpg' },
{ n: '№ 03', t: 'Corky · cellar', img: 'images/corky.jpg' },
{ n: '№ 04', t: 'Gypsy', img: 'images/gypsy.jpg' },
{ n: '№ 05', t: 'Beetle 2.0', img: 'images/beetle2.jpg' }];

const Highlights = () =>
<section className="wrap" style={{ paddingTop: 0 }}>
    <div className="highlights reveal">
      {HIGHLIGHTS.map((h, i) =>
    <figure className="hl" key={i} style={!h.img ? { background: 'repeating-linear-gradient(45deg, var(--cream-deep) 0 8px, var(--cream-soft) 8px 16px)' } : undefined}>
          {h.img ?
      <img src={h.img} alt={h.t} /> :
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--ink-soft)', background: 'var(--cream)', padding: '5px 10px', border: '1px solid var(--hairline)' }}>Photo · interior</span>
              </div>
      }
          <figcaption className="hl-cap" style={!h.img ? { color: 'var(--ink-soft)', textShadow: 'none' } : undefined}>
            <span className="t">{h.t}</span>
            <span className="n">{h.n}</span>
          </figcaption>
        </figure>
    )}
    </div>
  </section>;


/* ---------- Works ---------- */
const WORKS = [
{
  span: '', img: 'images/shelly.jpg',
  name: 'Shelly', emName: null, meta: 'Table · Object 01 · 2024',
  body: 'A surface of low-tide finds &mdash; cowries, augers, mother-of-pearl &mdash; suspended in glass-clear epoxy on a birch-ply skin. Sized to a sofa or a balcony.'
},
{
  span: '', img: 'images/beetle.jpg',
  name: 'Beetle', emName: null, meta: 'Table · Object 02 · 2024',
  body: 'Iridescent jewel-beetle wings sourced from museum trade. The surface shifts from bottle-green to oil-blue as you walk past.'
},
{
  span: '', img: 'images/corky.jpg',
  name: 'Corky', emName: null, meta: 'Table · Object 03 · 2024',
  body: 'Two hundred wine corks from a shared cellar &mdash; end-grain, named, dated &mdash; cast into a coffee-height round on solid plywood.'
},
{
  span: '', img: 'images/gypsy.jpg', placeholder: 'Photo · Gypsy',
  name: 'Gypsy', emName: null, meta: 'Table · Object 04 · 2025',
  body: 'A wander-collected mix &mdash; sea-glass, brass trinkets, pressed wildflowers &mdash; suspended in a warm honey-amber pour. One of a kind.'
},
{
  span: '', img: 'images/beetle2.jpg', placeholder: 'Photo · Beetle 2.0',
  name: 'Beetle 2.0', emName: null, meta: 'Table · Object 05 · 2026',
  body: 'A radiating sunburst of iridescent jewel-beetle wings &mdash; copper, green and gold &mdash; cast around a polished central disc. The surface ignites under raking light.'
}];


const Works = () =>
<section id="works">
    <div className="wrap">
      <SectionHead
      index="01 — Works"
      title="Tables, <em>editioned</em> and limited."
      meta="A small, slowly-growing catalogue. Each object exists in a numbered run; the substrate, edge profile and base height can be tailored at order." />
    </div>

    <div className="works-full">
      {WORKS.map((w, i) =>
    <article className={`work-full reveal ${i % 2 ? 'align-right' : 'align-left'}`} key={i}>
          <div className="wf-media">
            {w.img ?
        <img src={w.img} alt={w.name} /> :
        <div className="wf-placeholder"><span>{w.placeholder}</span></div>}
          </div>
          <div className="wf-scrim" />
          <div className="wf-index">{String(i + 1).padStart(2, '0')}</div>
          <div className="wf-content">
            <div className="wf-count">{String(i + 1).padStart(2, '0')} / {String(WORKS.length).padStart(2, '0')}</div>
            <div className="wf-meta">{w.meta}</div>
            <h3 className="wf-name">{w.name}{w.emName ? <> &middot; <em>{w.emName}</em></> : null}</h3>
            <p className="wf-body" dangerouslySetInnerHTML={{ __html: w.body }} />
            <span className="wf-more">Open the gallery &rarr;</span>
          </div>
        </article>
    )}
    </div>
  </section>;


/* ---------- Customize ---------- */
const Customize = () =>
<section id="customize">
    <div className="wrap">
      <div className="customize reveal">
        <div>
          <Eyebrow>02 — Customize</Eyebrow>
          <h2>Your fragments,<br /><em>made surface.</em></h2>
          <p>
            Most TABLEAU pieces can be tailored &mdash; silhouette, scale, edge profile, base, the material you bring. Tell us your starting point; the atelier replies with a moodboard, a quote and a slot in the pour calendar within a week.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Pill href="#contact" variant="teal">Start a commission →</Pill>
            <Pill href="#howitsmade" variant="light">Read the process →</Pill>
          </div>
        </div>
        <div className="customize-aside">
          <div className="specbox"><div className="k">Diameter</div><div className="v">35 — 110 cm</div></div>
          <div className="specbox"><div className="k">Height</div><div className="v">30 — 65 cm</div></div>
          <div className="specbox"><div className="k">Edge</div><div className="v">live · bevel · ribbon</div></div>
          <div className="specbox"><div className="k">Base</div><div className="v">birch · oak · steel · corian · alu · leather</div></div>
        </div>
      </div>
    </div>
  </section>;


/* ---------- Atelier ---------- */
const STEPS = [
{ num: '01 · Gather', verb: 'Collect', h: 'You bring the fragment', body: 'Anything that holds. Cleaned, sorted, weighed by the atelier on receipt.', tech: 'Shells · cork · seed · wing · stub' },
{ num: '02 · Compose', verb: 'Arrange', h: 'On the substrate', body: 'A slow composition on birch-ply — rhythm, density, where light should pool. Photographed for sign-off.', tech: 'Hand · CAD overlay · approval' },
{ num: '03 · Pour', verb: 'Pour', h: 'In two passes', body: 'A seal coat, then a flood. Optically-clear, UV-stable epoxy, vacuum-degassed to chase out the bubbles.', tech: 'Two-part · 1:1 · 24-hr cure' },
{ num: '04 · Cure', verb: 'Cure', h: 'Pressure & time', body: 'Seventy-two hours at controlled temperature. The surface settles flat, glassy, free of memory of how it began.', tech: '72hr · 21°C · pressure-pot' },
{ num: '05 · Finish', verb: 'Finish', h: 'Sand · seal · base', body: 'Edges turned on the lathe, sanded to 3000-grit, finished mirror or matte. Mounted to the chosen base.', tech: 'Mirror · oil · brushed brass' }];


const Atelier = () =>
<section id="atelier">
    <div className="wrap">
      <SectionHead
      index="03 — Atelier"
      title="An old material, <em>a slow ritual.</em>" />
    
      <div className="atelier-head reveal">
        <div className="atelier-photo"><img src="images/atelier.jpg" alt="The TABLEAU atelier — a Hermle PF 1000 mill cutting a cast resin table blank" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
        <div>
          <h3 style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 500, fontSize: 36, lineHeight: 1.1 }}>
            A small <em style={{ fontStyle: 'italic', color: 'var(--teal-deep)' }}>resin atelier</em> in Roeselare &mdash; founded 2025.
          </h3>
          <p className="lede" style={{ marginTop: 24, maxWidth: "534px" }}>TABLEAU Sidetables was started by product designer,  furniture maker and material explorer <strong style={{ fontWeight: 600 }}>Jorgen Nys</strong>. Each table is a small archive — one trip, one season, one cellar — sealed flat by epoxy and finished by hand.

        </p>
          <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.55, maxWidth: '52ch', marginTop: 16 }}>
            The atelier accepts a small number of bespoke commissions per quarter. Editioned pieces are made in numbered runs of nine; once a run is complete, the composition is retired.
          </p>
        </div>
      </div>

      <div className="stats reveal">
        <div className="stat"><div className="n">2025</div><div className="l">Atelier founded</div></div>
        <div className="stat"><div className="n">05</div><div className="l">TYPE WORKS</div></div>
        <div className="stat"><div className="n">12+</div><div className="l">Bespoke commissions</div></div>
        <div className="stat"><div className="n">∞</div><div className="l">Memory configurations</div></div>
      </div>

      <div id="howitsmade" style={{ paddingTop: 96, scrollMarginTop: 80 }}>
        <div className="process-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 24, borderBottom: '1px solid var(--hairline)' }}>
          <h3 style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 500, fontSize: 36 }}>From <em style={{ fontStyle: 'italic', color: 'var(--teal-deep)' }}>fragment</em> to <em style={{ fontStyle: 'italic', color: 'var(--teal-deep)' }}>finish. How it's made?</em></h3>
          <SmallCaps style={{ color: 'var(--ink-mute)' }}>The Five Steps · Gather → Compose → Pour → Cure → Finish</SmallCaps>
        </div>
        <div className="process reveal">
          {STEPS.map((s, i) =>
        <div className="step" key={i} style={{ '--i': i }}>
              <div className="num">{s.num}</div>
              <div className="verb">{s.verb}</div>
              <h4>{s.h}</h4>
              <p>{s.body}</p>
              <div className="tech">{s.tech}</div>
            </div>
        )}
        </div>
      </div>

      <div className="quote reveal">
        <div><Eyebrow>Founder’s note</Eyebrow></div>
        <div>
          <blockquote>“A table can hold a glass of wine. We thought it could hold the cork too.”</blockquote>
          <cite>— TABLEAU, Roeselare</cite>
        </div>
      </div>
    </div>
  </section>;


/* ---------- Contact ---------- */
const Contact = () =>
<section id="contact">
    <div className="wrap">
      <SectionHead
      index="04 — Contact"
      title="Let’s preserve <em>something singular.</em>"
      meta="Visits to the Roeselare atelier are by appointment. Bring the fragment if you can &mdash; it is faster to design with the material in the room." />
    
      <div className="contact reveal">
        <div className="contact-info" style={{ borderTop: '1px solid var(--hairline)' }}>
          <div>
            <div className="k">Atelier</div>
            <div className="v">Meenseheirweg 216<br />8800 Roeselare · Belgium</div>
          </div>
          <div>
            <div className="k">Email</div>
            <div className="v"><a href="mailto:info@tableausidetables.com" style={{ borderBottom: '1px solid var(--hairline)' }}>info@tableausidetables.com</a></div>
            <div className="k" style={{ marginTop: 24 }}>Phone</div>
            <div className="v"><a href="tel:+32000000000" style={{ borderBottom: '1px solid var(--hairline)' }}>+32 (0) 476401275</a></div>
          </div>
          <div>
            <div className="k">Visits</div>
            <div className="v">By appointment</div>
            <div className="k" style={{ marginTop: 24 }}>Lead time</div>
            <div className="v">8 — 12 weeks</div>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ---------- Footer ---------- */
const Footer = () =>
<footer>
    <div className="wrap">
      <div className="foot-grid foot">
        <div>
          <a className="brand" href="#top" style={{ marginBottom: 16 }} aria-label="TABLEAU Sidetables — home">
            <img className="brand-logo brand-logo--lg" src="images/logo.png" alt="" />
            <span className="brand-word brand-word--lg">Tableau<br /><em>Sidetables</em></span>
          </a>
          <p>Epoxy-cast sidetables from Roeselare. Original, durable, hand-finished objects — for collectors, restaurants and rooms that want a piece that exists nowhere else.

        </p>
        </div>
        <div>
          <h5>INSIDE</h5>
          <ul>
            <li><a href="#works">Works</a></li>
            <li><a href="#atelier">Atelier</a></li>
            <li><a href="#customize">Customize</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Follow</h5>
          <ul>
            <li><a href="https://instagram.com/tableau_sidetables" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href="https://www.facebook.com/Tableausidetables" target="_blank" rel="noopener">Facebook</a></li>
            <li><a href="mailto:info@tableausidetables.com">Email</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 TABLEAU Side Tables &mdash; Roeselare · Belgium</span>
        <span>Site &middot; <em style={{ fontFamily: 'var(--display)', fontStyle: 'italic' }}>proposal · v1</em></span>
      </div>
    </div>
  </footer>;


/* expose */
Object.assign(window, { TopBar, Hero, Press, Highlights, Works, Customize, Atelier, Contact, Footer, SectionHead, Eyebrow, SmallCaps, Pill });