// Monteforma — Gallery, Process, About, Contact
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

function Gallery() {
  const projects = [
    { name: 'Vase 03 — "Karst"', tag: 'Decorative · PLA · Bone White', accent: '#E8E4DD', dark: false },
    { name: 'Drone arm bracket', tag: 'Functional · PETG · Carbon', accent: '#1F4D6E', dark: true },
    { name: 'Boardgame minis × 24', tag: 'Small batch · Resin-finish PLA', accent: '#3C5C3F', dark: true },
    { name: 'Workshop desk caddy', tag: 'Prototype · ABS · Charcoal', accent: '#2A2826', dark: true },
    { name: 'Architectural model — Kotor', tag: 'Display · PLA · Bone', accent: '#EFEAE0', dark: false },
    { name: 'Replacement gear', tag: 'Repair · PETG · Black', accent: '#16161A', dark: true },
    { name: 'Lamp shade — "Lovćen"', tag: 'Decorative · PLA · Translucent', accent: '#C8D6CD', dark: false },
    { name: 'Cable comb × 80', tag: 'Production · PETG · Forest', accent: '#1F3A2C', dark: true },
  ];
  const [i, setI] = useS2(0);
  const trackRef = useR2(null);
  const [step, setStep] = useS2(540 + 24);

  useE2(() => {
    const calc = () => {
      const card = trackRef.current?.querySelector('.g-card');
      if (card) setStep(card.offsetWidth + 24);
    };
    calc();
    window.addEventListener('resize', calc);
    return () => window.removeEventListener('resize', calc);
  }, []);

  const max = projects.length - 1;
  const go = (d) => setI(p => Math.max(0, Math.min(max, p + d)));

  return (
    <section id="work">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">— Selected work</span>
            <h2 className="h-section">Recent<br/>prints.</h2>
          </div>
          <p className="sec-head__r lede">
            A rolling shelf of pieces that have left the studio in the past few months —
            decorative, functional and somewhere in between.
          </p>
        </div>
        <div className="gallery-track-wrap reveal">
          <div className="gallery-track" ref={trackRef} style={{transform: `translateX(${-i * step}px)`}}>
            {projects.map((p, idx) => (
              <div key={idx} className="g-card">
                <div className="g-card__img" style={{background: p.accent}}>
                  <div className="ph" style={{color: p.dark ? '#FFFFFF80' : '#14110F66'}}>
                    [ photo · {p.name.split(' ')[0]} ]
                  </div>
                </div>
                <div className="g-card__meta">
                  <div className="name">{p.name}</div>
                  <div className="tag">{p.tag}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="g-controls reveal">
          <button className="g-btn" onClick={()=>go(-1)} disabled={i===0} aria-label="Previous">
            <span style={{fontSize: 18}}>←</span>
          </button>
          <button className="g-btn" onClick={()=>go(1)} disabled={i===max} aria-label="Next">
            <span style={{fontSize: 18}}>→</span>
          </button>
          <span className="g-counter">{String(i+1).padStart(2,'0')} — {String(projects.length).padStart(2,'0')}</span>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', t: 'Brief', d: 'A WhatsApp, email or a coffee at the studio. Send a sketch, photo or CAD file — whatever you have.' },
    { n: '02', t: 'Quote', d: 'A fixed price within hours. No surprises later — we confirm material, finish and lead time before we start.' },
    { n: '03', t: 'Print', d: 'Sliced and printed in-house on Bambu Lab P1S. Watched by a real human, not just a webcam.' },
    { n: '04', t: 'Hand-off', d: 'Pickup in Podgorica or shipped across Montenegro and the region. Photos of the part before it leaves.' },
  ];
  return (
    <section id="process" className="process">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">— How it works</span>
            <h2 className="h-section" style={{color:'var(--bg)'}}>Four steps<br/>to a part.</h2>
          </div>
          <p className="sec-head__r lede" style={{color:'#C9C0B5'}}>
            We keep the loop short. Most jobs go from "got the file" to "ready for pickup" in
            under five working days, often the same week.
          </p>
        </div>

        <div className="steps reveal">
          {steps.map(s => (
            <div key={s.n} className="step">
              <div className="n">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>

        <div className="printer-card reveal">
          <div>
            <div className="pmono">◆ The machine on the bench</div>
            <h3 style={{color:'var(--bg)'}}>Bambu Lab P1S</h3>
            <p>
              Enclosed, multi-material capable, fast. We chose the P1S for its balance
              of speed, accuracy and reliability — letting us turn around small jobs in
              a day and run small batches overnight without babysitting.
            </p>
          </div>
          <div className="spec-grid">
            <div><div className="k">Build volume</div><div className="v">256³ mm</div></div>
            <div><div className="k">Tolerance</div><div className="v">±0.2 mm typ.</div></div>
            <div><div className="k">Layer range</div><div className="v">0.08 – 0.28</div></div>
            <div><div className="k">Top speed</div><div className="v">500 mm/s</div></div>
            <div><div className="k">Enclosed</div><div className="v">Yes — ABS ready</div></div>
            <div><div className="k">Multi-colour</div><div className="v">Up to 4 (AMS)</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about">
      <div className="wrap">
        <div className="about-grid reveal">
          <div>
            <span className="eyebrow" style={{color:'#B8AFA4'}}>— Studio</span>
            <h2 className="h-section" style={{color:'var(--bg)', marginTop: 18}}>Small studio,<br/>big bed.</h2>
            <p>
              Monteforma is a one-bench studio in Podgorica run by makers who like
              the smell of warm PLA in the morning. We work with hobbyists, designers
              and engineers — the projects we say yes to are the ones we'd want to do
              ourselves.
            </p>
            <div className="about-meta">
              <div><div className="k">Location</div><div className="v">Podgorica</div></div>
              <div><div className="k">Founded</div><div className="v">2024</div></div>
              <div><div className="k">Email</div><div className="v" style={{fontSize: 18}}>monteforma.co@gmail.com</div></div>
              <div><div className="k">Instagram</div><div className="v">@monteforma</div></div>
            </div>
          </div>
          <div>
            <div style={{
              aspectRatio: '4/5', borderRadius: 4,
              background: 'repeating-linear-gradient(135deg, #FFFFFF12 0 16px, #FFFFFF06 16px 17px)',
              border: '1px dashed #FFFFFF40',
              position: 'relative'
            }}>
              <div style={{position:'absolute', inset: 24, border: '1px dashed #FFFFFF26', borderRadius: 4}} />
              <div style={{
                position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--font-mono)', fontSize: 11, letterSpacing:'0.18em', textTransform:'uppercase', color:'#FFFFFF80'
              }}>
                [ studio photo ]
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = useS2(false);
  const [data, setData] = useS2({ name: '', email: '', msg: '' });

  return (
    <section id="contact">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">— Talk to us</span>
            <h2 className="h-section">Tell us<br/>what to make.</h2>
          </div>
          <p className="sec-head__r lede">
            For quick questions, message us on WhatsApp or Viber — usually back within an hour
            during work hours. For longer briefs, drop us a note below.
          </p>
        </div>

        <div className="contact-grid reveal">
          <form className="contact-form" onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
            {!sent ? (
              <>
                <input className="input" placeholder="Your name" value={data.name} onChange={e=>setData({...data, name: e.target.value})} required />
                <input className="input" type="email" placeholder="Email or phone" value={data.email} onChange={e=>setData({...data, email: e.target.value})} required />
                <textarea className="textarea" placeholder="What do you need printed?" value={data.msg} onChange={e=>setData({...data, msg: e.target.value})} rows={4} required />
                <button className="btn btn-primary btn-arrow" type="submit" style={{alignSelf:'flex-start', marginTop: 8}}>Send brief</button>
              </>
            ) : (
              <div style={{padding: '40px 0'}}>
                <div className="eyebrow" style={{marginBottom: 12, color:'var(--green-deep)'}}>◆ Sent</div>
                <h3 className="h-card" style={{margin:'0 0 16px'}}>Hvala, {data.name || 'friend'}.</h3>
                <p className="lede">We'll be back to you shortly. In the meantime, feel free to ping us on WhatsApp.</p>
              </div>
            )}
          </form>

          <div className="contact-side">
            <a className="contact-link" href="mailto:monteforma.co@gmail.com">
              <div className="l">
                <span className="k">Email · best for briefs</span>
                <span className="v">monteforma.co@gmail.com</span>
              </div>
              <span className="pill">↗ Compose</span>
            </a>
            <a className="contact-link ig" href="https://instagram.com/monteforma" target="_blank" rel="noreferrer">
              <div className="l">
                <span className="k">Instagram · DMs open</span>
                <span className="v">@monteforma</span>
              </div>
              <span className="pill">↗ Follow</span>
            </a>
            <a className="contact-link wa" href="https://wa.me/38267000000" target="_blank" rel="noreferrer">
              <div className="l">
                <span className="k">WhatsApp</span>
                <span className="v">+382 67 000 000</span>
              </div>
              <span className="pill">↗ Open</span>
            </a>
            <a className="contact-link" href="#">
              <div className="l">
                <span className="k">Studio</span>
                <span className="v">Podgorica · By appt.</span>
              </div>
              <span className="pill">Map ↗</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gallery, Process, About, Contact });