/* App — KLANT REVIEW MODE
   Tabs voor variant + page · linear scroll (geen zoom) · inline feedback per section
*/

const VARIANTS = [
  { id: 'v1', label: 'V1 · Simpel / clean', color: '#394A58' },
  { id: 'v2', label: 'V2 · Modern vernieuwend', color: '#FF6900' },
  { id: 'v3', label: 'V3 · Creatief + motion', color: '#0a141c' },
];
const PAGES = [
  { id: 'home', label: 'Homepage', subtitle: '/' },
  { id: 'about', label: 'Over ons', subtitle: '/over-ons/' },
  { id: 'pd', label: 'Xinno Private Desktop', subtitle: '/de-online-werkplek/xinno-private-desktop/' },
];
const COMPONENT_MAP = {
  v1: { home: () => <V1Home/>, about: () => <V1About/>, pd: () => <V1PrivateDesktop/> },
  v2: { home: () => <V2Home/>, about: () => <V2About/>, pd: () => <V2PrivateDesktop/> },
  v3: { home: () => <V3Home/>, about: () => <V3About/>, pd: () => <V3PrivateDesktop/> },
};

/* Feedback panel — opens a textarea on screen, saves to localStorage, exports as txt */
function FeedbackPanel({ variant, page }) {
  const [open, setOpen] = React.useState(false);
  const [text, setText] = React.useState('');
  const key = `feedback-${variant}-${page}`;

  React.useEffect(() => {
    setText(localStorage.getItem(key) || '');
  }, [key]);

  const save = (val) => {
    setText(val);
    localStorage.setItem(key, val);
  };

  const exportAll = () => {
    let out = `XINNO FEEDBACK · ${new Date().toLocaleString('nl-NL')}\n\n`;
    for (const v of VARIANTS) {
      for (const p of PAGES) {
        const k = `feedback-${v.id}-${p.id}`;
        const val = localStorage.getItem(k);
        if (val && val.trim()) {
          out += `═══ ${v.label} — ${p.label} ═══\n${val.trim()}\n\n`;
        }
      }
    }
    if (out.trim() === `XINNO FEEDBACK · ${new Date().toLocaleString('nl-NL')}`) {
      alert('Geen feedback ingevuld nog');
      return;
    }
    const blob = new Blob([out], { type: 'text/plain' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `xinno-feedback-${Date.now()}.txt`;
    a.click();
  };

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        style={{
          position: 'fixed', right: 24, bottom: 24, zIndex: 999,
          background: '#FF6900', color: '#fff', border: 0, borderRadius: 999,
          padding: '14px 22px', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14,
          boxShadow: '0 6px 24px rgba(255,105,0,0.45)', cursor: 'pointer',
        }}
      >
        💬 Feedback op deze pagina
      </button>
    );
  }

  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 999,
      width: 380, background: '#fff', borderRadius: 12,
      boxShadow: '0 12px 48px rgba(0,0,0,0.18)', border: '1px solid #DEE1E7',
      overflow: 'hidden',
    }}>
      <div style={{ background: '#394A58', color: '#fff', padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
          FEEDBACK · {VARIANTS.find(v=>v.id===variant)?.label.split('·')[0].trim()} · {PAGES.find(p=>p.id===page)?.label}
        </div>
        <button onClick={() => setOpen(false)} style={{ background: 'transparent', border: 0, color: '#fff', fontSize: 18, cursor: 'pointer', padding: 0, lineHeight: 1 }}>×</button>
      </div>
      <textarea
        value={text}
        onChange={e => save(e.target.value)}
        placeholder="Wat vind je goed? Wat moet anders? Wees specifiek (bijv: 'hero foto te donker', 'service-cards te dicht op elkaar', 'oranje knop saai')&#10;&#10;Tip: gebruik blokjes:&#10;HERO: ...&#10;SERVICES: ...&#10;TESTIMONIALS: ..."
        style={{
          width: '100%', minHeight: 200, padding: 16, border: 0, outline: 'none',
          fontFamily: "'Inter', sans-serif", fontSize: 14, lineHeight: 1.55, resize: 'vertical',
        }}
      />
      <div style={{ padding: '12px 16px', borderTop: '1px solid #DEE1E7', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fafaf7' }}>
        <span style={{ fontSize: 12, color: '#7B8896' }}>{text.length > 0 ? '✓ Opgeslagen lokaal' : 'Typ je feedback'}</span>
        <button
          onClick={exportAll}
          style={{ background: '#FF6900', color: '#fff', border: 0, borderRadius: 6, padding: '8px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter' }}
        >
          📥 Download alle feedback
        </button>
      </div>
    </div>
  );
}

function ReviewApp() {
  const [variant, setVariant] = React.useState('v1');
  const [page, setPage] = React.useState('home');

  // Update URL hash so klant can deep-link
  React.useEffect(() => {
    window.location.hash = `${variant}-${page}`;
  }, [variant, page]);

  // Read hash on mount
  React.useEffect(() => {
    const h = window.location.hash.replace('#', '');
    const [v, p] = h.split('-');
    if (VARIANTS.find(x => x.id === v)) setVariant(v);
    if (PAGES.find(x => x.id === p)) setPage(p);
  }, []);

  const Component = COMPONENT_MAP[variant][page];
  const currentVariant = VARIANTS.find(v => v.id === variant);
  const currentPage = PAGES.find(p => p.id === page);

  return (
    <div>
      {/* TOP REVIEW BAR */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(8px)',
        borderBottom: '1px solid #DEE1E7', padding: '14px 24px',
        display: 'flex', alignItems: 'center', gap: 24, fontFamily: 'Inter, sans-serif',
      }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#7B8896', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          XINNO REVIEW
        </div>

        {/* Variant switcher */}
        <div style={{ display: 'flex', gap: 4, background: '#EFF1F4', borderRadius: 8, padding: 4 }}>
          {VARIANTS.map(v => (
            <button
              key={v.id}
              onClick={() => setVariant(v.id)}
              style={{
                background: variant === v.id ? '#fff' : 'transparent',
                color: variant === v.id ? '#0a0a0a' : '#7B8896',
                border: 0, padding: '8px 14px', borderRadius: 6,
                fontSize: 13, fontWeight: variant === v.id ? 600 : 500,
                cursor: 'pointer', fontFamily: 'Inter',
                boxShadow: variant === v.id ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
                transition: 'all .15s',
              }}
            >
              {v.label}
            </button>
          ))}
        </div>

        {/* Page switcher */}
        <div style={{ display: 'flex', gap: 4, background: '#EFF1F4', borderRadius: 8, padding: 4, marginLeft: 'auto' }}>
          {PAGES.map(p => (
            <button
              key={p.id}
              onClick={() => setPage(p.id)}
              style={{
                background: page === p.id ? '#fff' : 'transparent',
                color: page === p.id ? '#0a0a0a' : '#7B8896',
                border: 0, padding: '8px 14px', borderRadius: 6,
                fontSize: 13, fontWeight: page === p.id ? 600 : 500,
                cursor: 'pointer', fontFamily: 'Inter',
                boxShadow: page === p.id ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
                transition: 'all .15s',
              }}
            >
              {p.label}
            </button>
          ))}
        </div>
      </header>

      {/* ACTIVE PAGE — full bleed, normal scroll */}
      <main style={{ position: 'relative' }}>
        <Component key={`${variant}-${page}`} />
      </main>

      {/* FEEDBACK PANEL */}
      <FeedbackPanel variant={variant} page={page} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ReviewApp />);