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

const SHAPES = [
  { id:'stele', name:'Stele', meta:'Hochkant · klassisch' },
  { id:'kissen', name:'Kissen', meta:'Liegend · ruhig' },
  { id:'findling', name:'Findling', meta:'Natur · gebrochen' },
  { id:'herz', name:'Herz', meta:'Symbolisch · weich' },
  { id:'buch', name:'Buch', meta:'Aufgeschlagen · still' },
];
const STONES = [
  { id:'bahama', name:'Bahama Blue', meta:'Granit · poliert', color:'#3b4150', tone:'#222731'},
  { id:'aurora', name:'Aurora', meta:'Granit · multicolor', color:'#8c5a3f', tone:'#5b3a28'},
  { id:'carrara', name:'Carrara', meta:'Marmor · weiß', color:'#e8e4d8', tone:'#cfc8b7'},
  { id:'schwarz', name:'Schwarz Schweden', meta:'Granit · matt', color:'#1d1d1d', tone:'#0e0e0e'},
  { id:'serp', name:'Serpentinit', meta:'Edelgestein · grün', color:'#2c3a30', tone:'#16201a'},
];

function StonePreview({shape, stone, name, dates}){
  const c = stone.color, t = stone.tone;
  const props = {fill:`url(#stone-grad)`, stroke:'rgba(0,0,0,.18)', strokeWidth:'1'};
  let body;
  if(shape.id==='stele') body = <rect x="90" y="30" width="120" height="240" rx="4" {...props}/>;
  else if(shape.id==='kissen') body = <path d="M40,170 Q40,130 80,130 L220,130 Q260,130 260,170 L260,260 L40,260 Z" {...props}/>;
  else if(shape.id==='findling') body = <path d="M70,260 Q40,200 60,140 Q75,80 130,55 Q190,40 220,90 Q250,150 235,220 Q230,255 200,265 Q140,275 70,260 Z" {...props}/>;
  else if(shape.id==='herz') body = <path d="M150,265 C 60,200 60,110 110,90 C 140,78 150,100 150,120 C 150,100 160,78 190,90 C 240,110 240,200 150,265 Z" {...props}/>;
  else if(shape.id==='buch') body = (<>
    <path d="M40,150 Q150,120 150,140 L150,260 Q150,240 40,265 Z" {...props}/>
    <path d="M260,150 Q150,120 150,140 L150,260 Q150,240 260,265 Z" {...props}/>
    <path d="M150,140 L150,260" stroke="rgba(0,0,0,.2)" strokeWidth="1" fill="none"/>
  </>);
  const inscriptionY = shape.id==='kissen' ? 195 : shape.id==='findling' ? 160 : shape.id==='herz' ? 180 : 150;
  return (
    <svg className="stone-svg" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="stone-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c}/><stop offset="60%" stopColor={t}/><stop offset="100%" stopColor={c}/>
        </linearGradient>
        <pattern id="grain" patternUnits="userSpaceOnUse" width="4" height="4">
          <circle cx="1" cy="1" r=".5" fill="rgba(255,255,255,.04)"/>
          <circle cx="3" cy="3" r=".4" fill="rgba(0,0,0,.06)"/>
        </pattern>
      </defs>
      {body}
      <text x="150" y={inscriptionY} textAnchor="middle" fill="rgba(255,255,255,.85)"
        fontFamily="Cormorant Garamond, serif" fontSize="20" fontStyle="italic">{name||'\u00A0'}</text>
      <text x="150" y={inscriptionY+24} textAnchor="middle" fill="rgba(255,255,255,.7)"
        fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="2">{dates||'\u00A0'}</text>
    </svg>
  );
}

function Configurator(){
  const [shapeId,setShape] = useState('stele');
  const [stoneId,setStone] = useState('bahama');
  const [name,setName] = useState('');
  const [dates,setDates] = useState('');
  const shape = SHAPES.find(s=>s.id===shapeId);
  const stone = STONES.find(s=>s.id===stoneId);

  return (<>
    <div className="conf-stage">
      <div className="stage-head">
        <div className="stage-step">Vorschau · unverbindlich</div>
        <div className="stage-step" style={{color:'var(--stone)'}}>№ Entwurf {Math.abs((shapeId+stoneId).split('').reduce((a,c)=>a+c.charCodeAt(0),0)*7)%900+100}</div>
      </div>
      <div className="stage-canvas">
        <div className="stage-ground"/>
        <StonePreview shape={shape} stone={stone} name={name} dates={dates}/>
      </div>
      <div className="stage-meta">
        <div>{shape.name} · {stone.name}</div>
        <div>~ 6 Wochen Fertigung</div>
      </div>
    </div>

    <div className="conf-form">
      <div className="field-row">
        <span className="stage-step">Schritt 01 — Form</span>
        <h4>Welche Form passt?</h4>
        <div className="opts">
          {SHAPES.map(s=>(
            <button key={s.id} className={'opt'+(s.id===shapeId?' is-on':'')} onClick={()=>setShape(s.id)}>
              <span className="opt-name">{s.name}</span>
              <span className="opt-meta">{s.meta}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="field-row">
        <span className="stage-step">Schritt 02 — Stein</span>
        <h4>Welcher Naturstein?</h4>
        <div className="opts">
          {STONES.map(s=>(
            <button key={s.id} className={'opt'+(s.id===stoneId?' is-on':'')} onClick={()=>setStone(s.id)}>
              <span className="opt-name"><span className="opt-dot" style={{background:s.color}}/>{s.name}</span>
              <span className="opt-meta">{s.meta}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="field-row">
        <span className="stage-step">Schritt 03 — Inschrift</span>
        <h4>Name &amp; Daten</h4>
        <input className="txt" placeholder="Name" value={name} onChange={e=>setName(e.target.value)}/>
        <input className="txt" placeholder="1934 — 2024" value={dates} onChange={e=>setDates(e.target.value)} style={{marginTop:14}}/>
      </div>
      <a className="btn btn-primary" href={`mailto:carmen.mohr@grabmale-mohr.de?subject=Beratungsanfrage%20Grabmal&body=Form:%20${shape.name}%0AStein:%20${stone.name}%0AInschrift:%20${encodeURIComponent(name)}%20${encodeURIComponent(dates)}`}>
        Entwurf an Carmen Mohr senden <span className="arrow">→</span>
      </a>
    </div>
  </>);
}

ReactDOM.createRoot(document.getElementById('configurator')).render(<Configurator/>);