// Atelier-Seite

const About = () => {
  const { go } = useApp();
  return <>
    <section className="about-hero">
      <div className="about-hero-img"><Ph tone="dark" src="https://images.weserv.nl/?url=www.zincutec.eu/wp-content/uploads/2026/03/slider-team.jpg&w=2400" label="" alt="ZinCuTec Team Nürtingen"/></div>
      <div className="grad"/>
      <div className="t">
        <div className="eyebrow">Manufaktur für Metallmöbel · Nürtingen · Since 2000</div>
        <h1>Ruhig.<br/><span className="accent-word">Stark.</span> Präsent.</h1>
        <div className="right-col">
          <p>Wir sind Freunde. Verbunden durch Kreativität, angetrieben durch Leidenschaft. ZinCuTec entstand aus dem Mut, anders zu denken. Ein Kollektiv, das die Spielregeln des Möbeldesigns nicht gebrochen, sondern ignoriert hat. Unsere Wurzeln liegen in der Architektur: Raum, Material, Struktur.</p>
          <div className="ctas">
            <button className="btn" onClick={()=>go({page:'shop'})}>Kollektion entdecken <Icon name="arrow"/></button>
            <button className="btn ghost">Besuch buchen</button>
          </div>
        </div>
      </div>
    </section>

    {/* MANIFESTO */}
    <section style={{padding:'120px 28px', borderBottom:'1px solid var(--line)', background:'var(--paper-2)'}}>
      <div style={{maxWidth:1100, margin:'0 auto'}}>
        <div className="eyebrow">Manifest</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr', gap:0, marginTop:28}}>
          <p style={{fontFamily:'var(--display)', fontWeight:'var(--display-weight)', fontSize:'clamp(32px,3.4vw,52px)', lineHeight:1.15, letterSpacing:'-0.015em', margin:0, maxWidth:'22em', textWrap:'pretty'}}>
            <span className="accent-word">Verwurzelt in der Architektur</span> formen wir Materialien und Räume, bevor daraus Objekte entstehen.
          </p>
          <p style={{fontFamily:'var(--display)', fontWeight:'var(--display-weight)', fontSize:'clamp(28px,2.8vw,42px)', lineHeight:1.2, letterSpacing:'-0.01em', margin:'56px 0 0 auto', maxWidth:'22em', textAlign:'right', color:'var(--ink-2)', textWrap:'pretty'}}>
            Daraus entstehen Objekte, die mehr sind als Möbel: Dinge mit Haltung. Mit Charakter. Mit Seele.
          </p>
          <div style={{borderTop:'1px solid var(--line)', marginTop:80, paddingTop:40, display:'flex', justifyContent:'space-between', alignItems:'baseline', flexWrap:'wrap', gap:16}}>
            <div style={{fontFamily:'"JetBrains Mono",monospace', fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-3)'}}>Jung im Geist. Unabhängig von Natur.</div>
            <div style={{fontFamily:'var(--display)', fontSize:'clamp(24px,2.2vw,34px)', letterSpacing:'-0.01em'}}>Ruhig <span style={{color:'var(--ink-3)'}}>·</span> Stark <span style={{color:'var(--ink-3)'}}>·</span> <span className="accent-word">Präsent.</span></div>
          </div>
        </div>
      </div>
    </section>

    <div className="about-values">
      <div><div className="num">01</div><div className="t">Hier gemacht.</div><div className="d">Jedes Stück wird in Nürtingen geschnitten, geschweißt und veredelt. Nichts wird ausgelagert. Das Kollektiv arbeitet unter einem Dach, vom ersten Schnitt bis zum signierten Stempel.</div></div>
      <div><div className="num">02</div><div className="t">Klein gehalten.</div><div className="d">Achtundzwanzig Stücke im Katalog. Ein oder zwei Neuzugänge pro Jahr. Wir interessieren uns nicht für Kollektionen, die ablaufen.</div></div>
      <div><div className="num">03</div><div className="t">Zum Vererben gebaut.</div><div className="d">Unsere Stücke sind darauf ausgelegt, die Räume zu überdauern, in die sie kommen. Falls je etwas aufgearbeitet werden muss, machen wir es im Haus, kostenlos, ein Leben lang.</div></div>
      <div><div className="num">04</div><div className="t">Signiert und verzeichnet.</div><div className="d">Jedes Stück wird nummeriert, signiert und in unser Werkbuch eingetragen. In zwanzig Jahren wissen wir immer noch, wer Ihres gemacht hat.</div></div>
    </div>

    <section className="about-process">
      <div className="eyebrow">Wie ein Stück entsteht</div>
      <h2 style={{marginTop:14}}>Vier <span className="accent-word">Schritte.</span> Vier bis acht Wochen.</h2>
      <div className="steps">
        {[
          ['Schneiden','Das Blech wird auf einer hydraulischen Schere zugeschnitten. Keine Laser, die Kante verhält sich anders.'],
          ['Falten & schweißen','Von Hand gefaltet und TIG-geschweißt. Die Nähte werden unsichtbar geschliffen, die Oberfläche dann bis auf eine Ebene zurückgeschliffen.'],
          ['Veredeln','Gebürstet, patiniert oder geschwärzt, im Haus. Messing und Kupfer dürfen patinieren, wir lackieren nicht.'],
          ['Ruhen, stempeln, signieren','Jedes Stück ruht eine Woche vor der Endabnahme. Dann wird es gestempelt, signiert und eingetragen.'],
        ].map((s,i)=>(
          <div className="step" key={i}>
            <div className="n">SCHRITT {String(i+1).padStart(2,'0')}</div>
            <h4>{s[0]}</h4>
            <p>{s[1]}</p>
          </div>
        ))}
      </div>
    </section>

    <section className="split">
      <div className="txt">
        <div className="eyebrow">Das Team</div>
        <h3>Freunde, die zusammen <span className="accent-word">bauen.</span></h3>
          <p>Wir sind Freunde. Verbunden durch Kreativität, angetrieben durch Leidenschaft. Ein Kollektiv — kein Möbelhaus, keine Fabrik. Was wir machen, machen wir selbst.</p>
        <div style={{marginTop:24}}><button className="btn ghost">Werkstatt-Film ansehen</button></div>
      </div>
      <div className="img"><Ph tone="warm" src="https://images.weserv.nl/?url=www.zincutec.eu/wp-content/uploads/2026/03/castle-zincutec.jpg&w=1600" label="WERKSTATT · SIEMENSSTR. 9–11"/></div>
    </section>

    <section className="quote" style={{borderBottom:'1px solid var(--line)'}}>
      <div className="eyebrow">Gesehen in</div>
      <div className="press" style={{marginTop:32}}>
        <span>AD Germany</span><span>·</span><span>Wallpaper*</span><span>·</span><span>Architectural Digest</span><span>·</span><span>Dezeen</span><span>·</span><span>Domus</span>
      </div>
    </section>
  </>;
};

Object.assign(window, { About });