// Monteforma — main app shell
const { useState, useEffect, useRef, useMemo } = React;

function useScrolled(threshold = 8) {
  const [s, setS] = useState(false);
  useEffect(() => {
    const onScroll = () => setS(window.scrollY > threshold);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return s;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function Nav() {
  const scrolled = useScrolled();
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav__logo" aria-label="Monteforma home">
        <img src="assets/monogram-dark.png" alt="Monteforma" />
        <span className="mono" style={{fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase'}}>Monteforma</span>
      </a>
      <div className="nav__links">
        <a href="#services">Services</a>
        <a href="#quote">Quote</a>
        <a href="#materials">Materials</a>
        <a href="#finishes">Finishes</a>
        <a href="#work">Work</a>
        <a href="#process">Process</a>
        <a href="#contact">Contact</a>
      </div>
      <a href="#quote" className="btn btn-primary">Get a Quote <span aria-hidden>→</span></a>
    </nav>
  );
}

function Hero() {
  return (
    <section id="top" className="hero">
      <img className="hero__bg" src="assets/monogram-light.png" alt="" aria-hidden />
      <div className="wrap hero__inner">
        <div className="eyebrow" style={{color:'#B8AFA4', marginBottom: 32}}>
          ◆ Studio · Podgorica, Crna Gora · est. 2024
        </div>
        <h1 className="hero__title">
          Objects,<br/>
          <span className="em">printed</span> with<br/>
          precision<span style={{color:'var(--red)'}}>.</span>
        </h1>
        <div className="hero__sub">
          <p>
            A small studio in Montenegro turning ideas, sketches and CAD files into
            real, functional things — one layer at a time.
          </p>
          <div className="hero__cta">
            <a href="#quote" className="btn btn-light btn-arrow">Upload a model</a>
            <a href="#work" className="btn btn-ghost" style={{color:'#E8E4DD'}}>See the work</a>
          </div>
        </div>
      </div>
      <div className="hero__meta">
        <div><div className="k">Build volume</div><div className="v">256 × 256 × 256 mm</div></div>
        <div><div className="k">Layer height</div><div className="v">0.08 – 0.28 mm</div></div>
        <div><div className="k">Lead time</div><div className="v">24h – 5 days</div></div>
        <div><div className="k">Materials</div><div className="v">PLA · PETG · ABS · TPU</div></div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    'Custom 3D Printing', 'CAD Modelling', 'Rapid Prototyping',
    'Small-Batch Production', 'Decorative Objects', 'Functional Parts',
    'Architectural Models', 'Made in Crna Gora'
  ];
  return (
    <div className="marquee" aria-hidden>
      <div className="marquee__track">
        <span>{items.map((t, i) => <span key={i}>{t}</span>)}</span>
        <span>{items.map((t, i) => <span key={'b'+i}>{t}</span>)}</span>
      </div>
    </div>
  );
}

function Services() {
  const services = [
    { n: '01', name: 'Custom 3D Printing', desc: 'Send a model — STL, STEP, OBJ, 3MF — and we print it. Hobby projects, replacements, gifts, one-offs.' },
    { n: '02', name: 'CAD & Design Help', desc: 'Don\'t have a model yet? We turn sketches, dimensions or reference photos into print-ready CAD.' },
    { n: '03', name: 'Rapid Prototyping', desc: 'Iterate fast. Same-day prints on functional prototypes for product designers and engineers.' },
    { n: '04', name: 'Small-Batch Production', desc: 'Brackets, jigs, enclosures, signage — runs of 10 to 500 with consistent finish and tolerances.' },
    { n: '05', name: 'Decorative Objects & Toys', desc: 'Vases, planters, miniatures, board-game pieces, lamp shades — polished pieces with character.' },
  ];
  return (
    <section id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">— What we make</span>
            <h2 className="h-section">From the<br/>file to<br/>the part.</h2>
          </div>
          <p className="sec-head__r lede">
            Five things we do well. Pick one — or talk to us about something we haven't listed.
            Most jobs leave the studio in under a week.
          </p>
        </div>
        <div className="svc-list reveal">
          {services.map(s => (
            <a key={s.n} className="svc" href="#quote">
              <div className="svc__num">{s.n}</div>
              <div className="svc__name">{s.name}</div>
              <div className="svc__desc">{s.desc}</div>
              <div className="svc__arrow">→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-mark">
            <img src="assets/monogram-light.png" alt="Monteforma" />
            <p>A small 3D printing studio in Montenegro. Custom parts, prototypes and small-batch production — printed in-house on Bambu Lab P1S.</p>
          </div>
          <div className="footer-mono">
            <div style={{color:'#fff', marginBottom: 10}}>Studio</div>
            <a href="#services">Services</a>
            <a href="#quote">Get a quote</a>
            <a href="#materials">Materials</a>
            <a href="#finishes">Finishes</a>
            <a href="#work">Work</a>
          </div>
          <div className="footer-mono">
            <div style={{color:'#fff', marginBottom: 10}}>Contact</div>
            <a href="mailto:monteforma.co@gmail.com">Email</a>
            <a href="https://instagram.com/monteforma" target="_blank" rel="noreferrer">Instagram</a>
            <a href="#contact">WhatsApp</a>
            <a href="#contact">Studio visit</a>
          </div>
          <div className="footer-mono">
            <div style={{color:'#fff', marginBottom: 10}}>Where</div>
            <a>Podgorica</a>
            <a>Crna Gora · Montenegro</a>
            <a>Mon–Fri · 09—18</a>
            <a>Sat by appt.</a>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 Monteforma · All rights reserved</div>
          <div>◆ Made layer by layer in Montenegro</div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Services />
      <Quote />
      <Materials />
      <Finishes />
      <Gallery />
      <Process />
      <About />
      <Contact />
      <Footer />
    </>
  );
}

window.App = App;