// "Woher's kommt" — stilisierte Mittelmeer-Karte mit Herkunftspfeilen nach Taunusstein
function Herkunft() {
  const { t } = useT();
  const TS = { x:430, y:130 };
  const tsLabel = (t('herkunft.origins') || [])[0] ? null : null; // unused, see below
  // Koordinaten sprachneutral; Labels und Items aus i18n
  const coords = [
    { x:740, y:230 },
    { x:560, y:340 },
    { x:430, y:330 },
    { x:290, y:170 },
    { x:680, y:430 },
  ];
  const data = (t('herkunft.origins') || []).map((o, i) => ({ ...coords[i], ...o }));

  const arc = (a, b) => {
    const mx = (a.x+b.x)/2;
    const my = Math.min(a.y, b.y) - 80;
    return `M${a.x},${a.y} Q${mx},${my} ${b.x},${b.y}`;
  };

  const headline = t('herkunft.headline');
  const headlineEm = t('herkunft.headlineEm');
  const idx = headline.indexOf(headlineEm);
  const before = idx >= 0 ? headline.slice(0, idx) : headline;
  const after  = idx >= 0 ? headline.slice(idx + headlineEm.length) : '';

  return (
    <section id="herkunft" className="hk-sec" style={{ background:'var(--paper)' }}>
      <div className="container">
        <div className="hk-grid">
          <div>
            <span className="eyebrow">{t('herkunft.eyebrow')}</span>
            <h2 style={{ marginTop:8 }}>{before}<span className="hand" style={{ color:'var(--brick)', fontSize:'1.15em', display:'inline-block', transform:'rotate(-2deg)' }}>{headlineEm}</span>{after}</h2>
            <p style={{ marginTop:18, color:'var(--ink-2)', fontSize:'clamp(15px,4vw,17px)' }}>{t('herkunft.body')}</p>
            <div style={{ marginTop:24, display:'grid', gap:12 }}>
              {data.map((o,i)=>(
                <div key={i} style={{ display:'grid', gridTemplateColumns:'auto 1fr', gap:14, alignItems:'baseline', paddingBottom:12, borderBottom:'1px dashed var(--line)' }}>
                  <span style={{ fontFamily:'var(--font-display)', fontSize:20, fontWeight:600, color:'var(--brick)' }}>{o.label}</span>
                  <span style={{ fontSize:14, color:'var(--ink-2)' }}>{o.items}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="keep-ltr" style={{ position:'relative', background:'var(--bg-2)', borderRadius:10, border:'1px solid var(--line)', padding:18, overflow:'hidden' }}>
            <svg viewBox="0 0 1000 600" style={{ width:'100%', height:'auto', display:'block' }}>
              <defs>
                <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="1" fill="var(--line)"/>
                </pattern>
                <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                  <path d="M0,0 L10,5 L0,10 z" fill="var(--brick)"/>
                </marker>
              </defs>
              <rect width="1000" height="600" fill="url(#dots)"/>

              <path d="M50,100 Q150,80 280,120 L420,140 Q500,160 600,150 L780,200 Q900,260 950,400 L900,500 Q700,540 500,500 Q300,470 150,420 Q60,350 50,250 Z"
                fill="color-mix(in oklab, var(--bg) 80%, var(--gold) 12%)" stroke="var(--line)" strokeWidth="1.5" opacity=".85"/>
              <path d="M280,120 Q400,200 500,260 Q620,320 700,280 Q780,250 820,320"
                fill="none" stroke="var(--ink-2)" strokeWidth=".8" opacity=".25" strokeDasharray="4 4"/>

              {data.map((o,i)=>(
                <path key={i} d={arc(o, TS)} fill="none" stroke="var(--brick)" strokeWidth="1.6" markerEnd="url(#arrow)" opacity=".7" strokeDasharray="6 4">
                  <animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2s" repeatCount="indefinite"/>
                </path>
              ))}

              {data.map((o,i)=>(
                <g key={i}>
                  <circle cx={o.x} cy={o.y} r="6" fill="var(--gold)" stroke="var(--ink)" strokeWidth="1.5"/>
                  <text x={o.x} y={o.y+22} fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink)" textAnchor="middle" letterSpacing=".06em">{(o.label || '').toUpperCase()}</text>
                </g>
              ))}

              <g>
                <circle cx={TS.x} cy={TS.y} r="22" fill="var(--brick)" opacity=".15">
                  <animate attributeName="r" from="14" to="34" dur="2s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" from=".4" to="0" dur="2s" repeatCount="indefinite"/>
                </circle>
                <circle cx={TS.x} cy={TS.y} r="10" fill="var(--brick)" stroke="var(--paper)" strokeWidth="3"/>
                <text x={TS.x} y={TS.y-18} fontFamily="var(--font-display)" fontSize="18" fontWeight="700" fill="var(--ink)" textAnchor="middle">Taunusstein</text>
                <text x={TS.x} y={TS.y-3} fontFamily="var(--font-mono)" fontSize="9" fill="var(--brick)" textAnchor="middle" letterSpacing=".14em">AZRA MARKT</text>
              </g>
            </svg>
          </div>
        </div>
      </div>
      <style>{`
        .hk-sec{ padding-block:48px; }
        .hk-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
        @media (min-width: 600px){
          .hk-sec{ padding-block:64px; }
          .hk-grid{ gap:36px; }
        }
        @media (min-width: 900px){
          .hk-sec{ padding-block:96px; }
          .hk-grid{ grid-template-columns:.85fr 1.15fr; gap:48px; }
        }
      `}</style>
    </section>
  );
}
window.Herkunft = Herkunft;