// Shared data + tokens for all three design directions.
// Brand-specific values are loaded from window.BRAND_CONFIG (injected
// inline in each HTML page before this script via apply_brand.py).
// Czech copy is the same across directions — directions differ in voice/layout.

const _CFG = window.BRAND_CONFIG || {};
const _KONTAKT = _CFG.kontakt || {};

const BRAND = {
  name: _CFG.firma || '',
  shortName: _CFG.shortName || '',
  location: _CFG.location || '',
  owner: _CFG.owner || '',
  phone: _KONTAKT.phone || '',
  phoneDisplay: _KONTAKT.phoneDisplay || _KONTAKT.phone || '',
  email: _KONTAKT.email || '',
  address: _KONTAKT.address || '',
  since: _KONTAKT.since || '',  // empty when scrape didn't find founding year — templates must check truthy before rendering "od roku X"
  domain: _CFG.domain || '',
  tagline: _CFG.tagline || '',
  subtitle: _CFG.subtitle || '',
  logoPath: _CFG.logo_path || 'assets/logo.png',
  heroPhoto: _CFG.hero_photo || '',
  heroPhotos: (_CFG.hero_photos && _CFG.hero_photos.length > 0) ? _CFG.hero_photos : (_CFG.hero_photo ? [_CFG.hero_photo] : []),
  ownerPhoto: _CFG.owner_photo || '',
  palette: _CFG.palette || { background: '#F2EBDC', primary: '#A02122', accent: '#5C3A1F' },
  stats: _CFG.stats || [],
  statsAlt: _CFG.stats_alt || _CFG.stats || [],
};

const CATEGORIES = _CFG.categories || [];

// Synthesize PROJECTS from CATEGORIES + hero_photos if scrape returned empty.
// Templates expect non-empty PROJECTS array (MistrCard, Tradice, etc).
const _HEROS = _CFG.hero_photos && _CFG.hero_photos.length > 0
  ? _CFG.hero_photos
  : (_CFG.hero_photo ? [_CFG.hero_photo] : []);

const _SYNTH_PROJECTS = (CATEGORIES.length > 0)
  ? CATEGORIES.slice(0, 9).map((c, i) => ({
      id: `synth-${c.id}-${i}`,
      title: c.label,
      year: 2024 - (i % 3),
      place: _CFG.location || 'Realizace',
      material: '',
      img: _HEROS[i % Math.max(_HEROS.length, 1)] || '',
      cat: c.id,
    }))
  : [];

const PROJECTS = (_CFG.projects && _CFG.projects.length > 0)
  ? _CFG.projects
  : _SYNTH_PROJECTS;

const FILTERS = [
  { id: 'all', label: 'Vše' },
  ...CATEGORIES.map(c => ({ id: c.id, label: c.label })),
];

// Steps in the process — same for all directions.
const PROCESS = [
  { n: '01', title: 'Konzultace', body: 'Sejdeme se u Vás nebo u nás v dílně. Posloucháme, měříme, ptáme se.' },
  { n: '02', title: 'Návrh a kalkulace', body: 'Připravíme vizualizaci a cenovou nabídku. Nic se neplatí dopředu.' },
  { n: '03', title: 'Výroba', body: 'Vyrábíme v naší dílně. Žádné předané subdodávky.' },
  { n: '04', title: 'Montáž', body: 'Přijedeme, namontujeme, uklidíme po sobě. Záruka 5 let.' },
];

// ── Shared SVG: small monoline icons for categories / process. ──────────────
const Icon = ({ name, size = 24, color = 'currentColor', strokeWidth = 1.4 }) => {
  const s = strokeWidth;
  const paths = {
    kuchyne: <g><rect x="3" y="6" width="18" height="4" /><rect x="3" y="12" width="18" height="8" /><line x1="9" y1="14" x2="9" y2="18" /><line x1="15" y1="14" x2="15" y2="18" /></g>,
    interiery: <g><path d="M3 20V9l9-6 9 6v11" /><path d="M9 20v-6h6v6" /></g>,
    dvere: <g><rect x="6" y="3" width="12" height="18" /><circle cx="15" cy="12" r="0.5" fill={color} /></g>,
    skrine: <g><rect x="4" y="3" width="16" height="18" /><line x1="12" y1="3" x2="12" y2="21" /><circle cx="10" cy="12" r="0.5" fill={color} /><circle cx="14" cy="12" r="0.5" fill={color} /></g>,
    zahrady: <g><path d="M3 20h18" /><path d="M5 20V10l7-5 7 5v10" /><path d="M3 10h18" /></g>,
    ostatni: <g><circle cx="12" cy="12" r="2" /><circle cx="12" cy="12" r="8" /></g>,
    arrow: <path d="M5 12h14m-5-5l5 5-5 5" />,
    phone: <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />,
    mail: <g><rect x="3" y="5" width="18" height="14" /><path d="M3 7l9 7 9-7" /></g>,
    pin: <g><path d="M12 22s8-7.5 8-13a8 8 0 0 0-16 0c0 5.5 8 13 8 13z" /><circle cx="12" cy="9" r="2.5" /></g>,
    plus: <g><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
    leaf: <path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14zM5 19l7-7" />,
    chisel: <path d="M3 21l4-4M7 17l10-10 4 4L11 21l-4-4z" />,
    quote: <path d="M7 7v6c0 2-1.5 4-4 4M17 7v6c0 2-1.5 4-4 4" />,
    star: <path d="M12 3l2.6 5.3 5.9.9-4.3 4.2 1 5.9L12 16.6 6.8 19.3l1-5.9L3.5 9.2l5.9-.9L12 3z" />,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={s} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name]}
    </svg>
  );
};

// Tiny placeholder for an image that hasn't loaded — wood-toned shimmer.
const ImgFallback = ({ tone = '#A06B3B' }) => (
  <div style={{
    position: 'absolute', inset: 0,
    background: `linear-gradient(135deg, ${tone}33 0%, ${tone}66 50%, ${tone}33 100%)`,
  }} />
);

// Image with fallback color + lazy load.
const Img = ({ src, alt = '', style, tone, fit = 'cover', pos = 'center' }) => (
  <div style={{ position: 'relative', overflow: 'hidden', ...style }}>
    <ImgFallback tone={tone} />
    <img
      src={src}
      alt={alt}
      loading="lazy"
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: fit, objectPosition: pos,
        display: 'block',
      }}
    />
  </div>
);

Object.assign(window, {
  BRAND, CATEGORIES, PROJECTS, FILTERS, PROCESS,
  Icon, Img, ImgFallback,
});