/* global React, ReactDOM */
const { useState } = React;

const MATS = [
  { id:'granit', name:'Granit', sub:'Hartgestein',
    color:'#3a3633', accent:'linear-gradient(135deg,#2a2622 0%,#56504a 50%,#2a2622 100%)',
    img:'/static/img/black-curve-double.jpg',
    info:[['Härte','6–7 Mohs'],['Politur','Hochglanz · matt · gestockt'],['Witterung','Sehr beständig']],
    desc:'Der klassische Stein für Grabmale. Granit nimmt jede Bearbeitung an — vom rohen Bruch bis zur Spiegelpolitur. Wir führen Bahama Blue, Schwarz Schweden, Aurora und indische Mehrfarb-Granite aus geprüfter Herkunft.'},
  { id:'marmor', name:'Marmor', sub:'Weiches Edelgestein',
    color:'#dcd3c4', accent:'linear-gradient(135deg,#f2ecdf 0%,#cfc4b3 50%,#f2ecdf 100%)',
    img:'/static/img/showroom-marble-book.jpg',
    info:[['Härte','3–4 Mohs'],['Politur','Seidenmatt · Hochglanz'],['Witterung','Patiniert mit der Zeit']],
    desc:'Der Stein der bildhauerischen Arbeit. Marmor erlaubt feinste Reliefs, weiche Übergänge, klassische Formen. Wir verarbeiten Carrara, Lasa und Thassos — auch für Innen- und Denkmalsarbeiten.'},
  { id:'schiefer', name:'Schiefer', sub:'Spaltgestein',
    color:'#3e4146', accent:'linear-gradient(135deg,#2c2f33 0%,#56595e 50%,#2c2f33 100%)',
    img:'/static/img/carving-stairs.jpg',
    info:[['Härte','3–4 Mohs'],['Politur','Naturspaltrauh · geschliffen'],['Witterung','Frostfest · matt']],
    desc:'Schiefer ist still, dunkel, anti-glänzend. Ideal für reduzierte, moderne Stelen und für Schrifttafeln, die ihre Schönheit aus der natürlichen Spaltfläche beziehen. Mosel- und Mayener Schiefer aus europäischen Brüchen.'},
  { id:'sandstein', name:'Sandstein', sub:'Heimatgestein',
    color:'#b58a5d', accent:'linear-gradient(135deg,#a87a4e 0%,#d7b58a 50%,#a87a4e 100%)',
    img:'/static/img/grave-flowers-arch.jpg',
    info:[['Härte','3–5 Mohs'],['Politur','Bossiert · gestockt'],['Witterung','Weich, atmend']],
    desc:'Der Stein des Saarlandes. Warm, atmend, alternd. Wir verwenden roten und gelben Sandstein für historische Restaurierungen und für Grabmale, die zur Landschaft sprechen wollen.'},
  { id:'serpentin', name:'Serpentinit', sub:'Grünes Edelgestein',
    color:'#2f3a32', accent:'linear-gradient(135deg,#1f2a22 0%,#4d5b4c 50%,#1f2a22 100%)',
    img:'/static/img/stele-pocketwatch.jpg',
    info:[['Härte','5–6 Mohs'],['Politur','Tiefer Glanz'],['Witterung','Sehr beständig']],
    desc:'Tief dunkelgrün, fast schwarz im Schatten — dafür im Licht von einer fast metallischen Tiefe. Selten verwendet, aber von besonderer Wirkung für unverwechselbare Werkstücke.'},
];

function Materials(){
  const [id,setId] = useState('granit');
  const m = MATS.find(x=>x.id===id);
  return (<>
    <div className="mat-nav">
      {MATS.map(x=>(
        <button key={x.id} className={x.id===id?'is-on':''} onClick={()=>setId(x.id)}>
          <span className="mat-swatch" style={{background:x.accent}}/>
          <span className="mat-name">{x.name} <em>{x.sub}</em></span>
          <span className="mat-arrow">→</span>
        </button>
      ))}
    </div>
    <div className="mat-detail">
      <div className="mat-img"><img src={m.img} alt={m.name}/></div>
      <div className="mat-info">
        {m.info.map(([k,v])=>(<div key={k}><div className="info-lbl">{k}</div><div className="info-val">{v}</div></div>))}
      </div>
      <p className="mat-desc">{m.desc}</p>
    </div>
  </>);
}

ReactDOM.createRoot(document.getElementById('materials')).render(<Materials/>);