// Direction 5 — SHOWROOM
// B2B catalog premium. Multi-region showroom feel, grid catalog,
// professional confident layout. References: Sykora (36 studií),
// HANÁK Centrum, RTC Czech, Boffi. Vibe: established big-brand kitchen maker.
//
// Distinct from Tradice (which is archive/magazine heritage):
//   - 3-image collage hero (not single fullbleed)
//   - "Studia" / showroom locator section (multi-location framing)
//   - 6-card catalog grid (kuchyně, skříně, dveře, okna, schody, interiéry)
//   - 4-step horizontal process timeline
//   - 3-col testimonials grid
//   - Multi-column footer sitemap

const _mixSh = (hex, target, amount) => {
  const h = hex.replace('#', '');
  const t = target.replace('#', '');
  const r = Math.round(parseInt(h.slice(0, 2), 16) * (1 - amount) + parseInt(t.slice(0, 2), 16) * amount);
  const g = Math.round(parseInt(h.slice(2, 4), 16) * (1 - amount) + parseInt(t.slice(2, 4), 16) * amount);
  const b = Math.round(parseInt(h.slice(4, 6), 16) * (1 - amount) + parseInt(t.slice(4, 6), 16) * amount);
  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
};

// Hardcoded — Showroom je B2B catalog s warm gold/brass. NE pull z BRAND.palette.
const showroomTokens = {
  bg: '#F5F5F0',
  bgAlt: '#FAF7F2',
  bgDark: '#2D2018',
  ink: '#2D2018',
  ink2: '#5A4A3A',
  ink3: '#9A8A7A',
  gold: '#B8916C',          // warm gold/brass (hardcoded)
  goldSoft: _mixSh('#B8916C', '#FFFFFF', 0.5),
  brand: '#2D2018',
  rule: '#2D201814',
  ruleStrong: '#2D201828',
};

const shDisplay = (size) => ({
  fontFamily: '"Fraunces", "Source Serif Pro", serif',
  fontWeight: 600, fontSize: size,
  lineHeight: size > 56 ? 1.04 : 1.15,
  letterSpacing: '-0.02em',
  margin: 0,
});
const shLabel = {
  fontFamily: '"Inter", -apple-system, sans-serif',
  fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase',
  fontWeight: 600,
};
const shBody = {
  fontFamily: '"Inter", -apple-system, sans-serif',
  fontSize: 15, lineHeight: 1.65, fontWeight: 400,
};

// ============================================================================
// DESKTOP — 1440 wide
// ============================================================================
const ShowroomDesktop = () => {
  const t = showroomTokens;
  return (
    <div style={{
      width: 1440, fontFamily: '"Inter", -apple-system, sans-serif',
      color: t.ink, background: t.bg,
    }}>
      <ShowroomTopbar t={t} />
      <ShowroomNav t={t} />
      <ShowroomHero t={t} />
      <ShowroomStudia t={t} />
      <ShowroomCatalog t={t} />
      <ShowroomProcess t={t} />
      <ShowroomTestimonials t={t} />
      <ShowroomFooter t={t} />
    </div>
  );
};

// ── TOP UTILITY BAR ────────────────────────────────────────────────────────
const ShowroomTopbar = ({ t }) => (
  <div style={{
    background: t.bgDark, color: t.bgAlt,
    padding: '10px 80px',
    display: 'flex', justifyContent: 'space-between',
    fontSize: 12, letterSpacing: '-0.005em',
  }}>
    <div style={{ display: 'flex', gap: 24 }}>
      <span>📍 {BRAND.location || 'Naše dílna'} · vždy otevřeno po telefonu</span>
    </div>
    <div style={{ display: 'flex', gap: 24 }}>
      <a href={`tel:${BRAND.phone}`} style={{ color: t.bgAlt, textDecoration: 'none', fontWeight: 500 }}>
        {BRAND.phoneDisplay}
      </a>
      <a href={`mailto:${BRAND.email}`} style={{ color: t.bgAlt, textDecoration: 'none' }}>
        {BRAND.email}
      </a>
    </div>
  </div>
);

const ShowroomNav = ({ t }) => (
  <nav style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '24px 80px',
    background: t.bg,
    borderBottom: `1px solid ${t.rule}`,
  }}>
    <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 54, width: 'auto' }} />
    <div style={{ display: 'flex', gap: 40, fontSize: 14, fontWeight: 500 }}>
      {['Kuchyně', 'Skříně', 'Interiéry', 'Realizace', 'Studia', 'Kontakt'].map(l => (
        <a key={l} href="#" style={{ color: t.ink, textDecoration: 'none' }}>{l}</a>
      ))}
    </div>
    <a href="#kontakt" style={{
      padding: '14px 28px', background: t.gold, color: t.bgDark,
      textDecoration: 'none', fontSize: 14, fontWeight: 600,
    }}>
      Naceňte projekt
    </a>
  </nav>
);

// ── HERO — 3-image collage + bold headline ────────────────────────────────
const ShowroomHero = ({ t }) => {
  const heros = (BRAND.heroPhotos && BRAND.heroPhotos.length) ? BRAND.heroPhotos : [BRAND.heroPhoto];
  const [a, b, c] = [heros[0] || '', heros[1] || heros[0] || '', heros[2] || heros[0] || ''];
  return (
    <section style={{
      padding: '80px 80px 120px',
      borderBottom: `1px solid ${t.rule}`,
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{ ...shLabel, color: t.gold, marginBottom: 24 }}>
            {BRAND.since ? `OD ROKU ${BRAND.since}` : 'NA TRHU LÉTA'} · {BRAND.location || 'ČR'}
          </div>
          <h1 style={{ ...shDisplay(64), color: t.ink, marginBottom: 32 }}>
            Vyrábíme kuchyně a&nbsp;interiéry <span style={{ color: t.gold, fontStyle: 'italic' }}>po&nbsp;celé&nbsp;ČR.</span>
          </h1>
          <p style={{ ...shBody, fontSize: 17, color: t.ink2, maxWidth: 460, marginBottom: 40 }}>
            {BRAND.tagline || 'Kompletní řešení interiérů — od kuchyní přes vestavěné skříně po dveře a okna. Vlastní výroba, vlastní montáž.'}
          </p>
          <div style={{ display: 'flex', gap: 16 }}>
            <a href="#catalog" style={{
              padding: '18px 32px', background: t.ink, color: t.bgAlt,
              textDecoration: 'none', fontSize: 14, fontWeight: 600,
            }}>
              Prohlédnout katalog
            </a>
            <a href="#studia" style={{
              padding: '18px 32px', background: 'transparent', color: t.ink,
              textDecoration: 'none', fontSize: 14, fontWeight: 600,
              border: `1px solid ${t.ruleStrong}`,
            }}>
              Naše studio
            </a>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gridTemplateRows: '1fr 1fr', gap: 12, aspectRatio: '4/3' }}>
          <div style={{ gridRow: 'span 2', position: 'relative', overflow: 'hidden', background: t.bgAlt }}>
            <Img src={a} alt="" tone={t.goldSoft} style={{ position: 'absolute', inset: 0 }} />
          </div>
          <div style={{ position: 'relative', overflow: 'hidden', background: t.bgAlt }}>
            <Img src={b} alt="" tone={t.goldSoft} style={{ position: 'absolute', inset: 0 }} />
          </div>
          <div style={{ position: 'relative', overflow: 'hidden', background: t.bgAlt }}>
            <Img src={c} alt="" tone={t.goldSoft} style={{ position: 'absolute', inset: 0 }} />
          </div>
        </div>
      </div>
    </section>
  );
};

// ── STUDIA (showroom locator — even if 1 location, frame as professional) ─
const ShowroomStudia = ({ t }) => (
  <section id="studia" style={{ padding: '120px 80px', background: t.bgAlt, borderBottom: `1px solid ${t.rule}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, marginBottom: 64, alignItems: 'baseline' }}>
      <div>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>01 · Naše dílna</div>
        <h2 style={{ ...shDisplay(48), color: t.ink }}>
          Kde nás najdete.
        </h2>
      </div>
      <p style={{ ...shBody, fontSize: 17, color: t.ink2, maxWidth: 560, alignSelf: 'flex-end' }}>
        Vyrábíme ve vlastní dílně{BRAND.location ? ` v ${BRAND.location}` : ''}. Návštěva je možná po
        telefonické domluvě — rádi Vás provedeme procesem výroby a&nbsp;ukážeme
        rozpracované zakázky.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${t.rule}` }}>
      <div style={{ padding: '48px', borderRight: `1px solid ${t.rule}` }}>
        <div style={{ ...shLabel, color: t.ink3, marginBottom: 16 }}>Adresa</div>
        <div style={{ ...shDisplay(28), color: t.ink, marginBottom: 12 }}>
          {BRAND.name}
        </div>
        <div style={{ ...shBody, color: t.ink2 }}>
          {BRAND.address || (BRAND.location || 'Adresa na vyžádání')}
        </div>
        <div style={{ marginTop: 32, paddingTop: 24, borderTop: `1px solid ${t.rule}`, display: 'flex', gap: 32 }}>
          <div>
            <div style={{ ...shLabel, color: t.ink3, marginBottom: 8 }}>Telefon</div>
            <a href={`tel:${BRAND.phone}`} style={{ ...shDisplay(20), color: t.ink, textDecoration: 'none' }}>
              {BRAND.phoneDisplay}
            </a>
          </div>
          <div>
            <div style={{ ...shLabel, color: t.ink3, marginBottom: 8 }}>E-mail</div>
            <a href={`mailto:${BRAND.email}`} style={{ ...shBody, fontSize: 16, color: t.ink, textDecoration: 'none' }}>
              {BRAND.email}
            </a>
          </div>
        </div>
      </div>
      <div style={{ position: 'relative', minHeight: 320, background: t.bg }}>
        <Img src={BRAND.heroPhoto} alt="" tone={t.goldSoft} style={{ position: 'absolute', inset: 0 }} />
      </div>
    </div>
  </section>
);

// ── CATALOG — 6-card grid services ─────────────────────────────────────────
const ShowroomCatalog = ({ t }) => {
  const cats = CATEGORIES.length > 0 ? CATEGORIES : [
    { id: 'kuchyne', label: 'Kuchyně na míru' },
    { id: 'skrine', label: 'Vestavěné skříně' },
    { id: 'interiery', label: 'Interiéry' },
    { id: 'dvere', label: 'Dveře' },
    { id: 'okna', label: 'Okna' },
    { id: 'schody', label: 'Schody' },
  ];
  return (
    <section id="catalog" style={{ padding: '120px 80px', borderBottom: `1px solid ${t.rule}` }}>
      <div style={{ marginBottom: 72 }}>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>02 · Co vyrábíme</div>
        <h2 style={{ ...shDisplay(56), color: t.ink, maxWidth: 720 }}>
          Kompletní řešení interiéru — <span style={{ color: t.gold, fontStyle: 'italic' }}>od kuchyně po dveře.</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
        {cats.slice(0, 6).map((c, i) => (
          <a key={c.id} href={`#${c.id}`} style={{
            background: t.bgAlt,
            textDecoration: 'none', color: 'inherit',
            display: 'flex', flexDirection: 'column',
            transition: 'transform 0.2s',
          }}>
            <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', background: t.bg }}>
              <Img src={c.img || (BRAND.heroPhotos && BRAND.heroPhotos[i % BRAND.heroPhotos.length])} alt={c.label} tone={t.goldSoft} style={{ position: 'absolute', inset: 0 }} />
            </div>
            <div style={{ padding: '32px 28px', flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div style={{ ...shLabel, fontSize: 10, color: t.ink3, marginBottom: 12 }}>0{i + 1}</div>
              <h3 style={{ ...shDisplay(24), color: t.ink, marginBottom: 12 }}>{c.label}</h3>
              <p style={{ ...shBody, fontSize: 14, color: t.ink2, flex: 1, marginBottom: 20 }}>
                {c.short || 'Na míru podle vašich představ. Konzultace, výroba, montáž.'}
              </p>
              <div style={{ ...shLabel, fontSize: 11, color: t.gold }}>
                Naceňte —
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

// ── PROCESS — 4-step horizontal timeline ───────────────────────────────────
const ShowroomProcess = ({ t }) => (
  <section style={{ padding: '120px 80px', background: t.bgAlt, borderBottom: `1px solid ${t.rule}` }}>
    <div style={{ marginBottom: 72 }}>
      <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>03 · Proces</div>
      <h2 style={{ ...shDisplay(56), color: t.ink, maxWidth: 720 }}>
        Od konzultace po montáž — <span style={{ color: t.gold, fontStyle: 'italic' }}>vše pod&nbsp;jednou&nbsp;střechou.</span>
      </h2>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
      {(PROCESS && PROCESS.length ? PROCESS : [
        { n: '01', title: 'Konzultace', body: 'Sejdeme se u Vás. Posloucháme, měříme, ptáme se.' },
        { n: '02', title: 'Návrh a kalkulace', body: 'Vizualizace a cenová nabídka. Nic se neplatí dopředu.' },
        { n: '03', title: 'Výroba', body: 'Ve vlastní dílně. Žádné předané subdodávky.' },
        { n: '04', title: 'Montáž', body: 'Přijedeme, namontujeme, uklidíme. Záruka 5 let.' },
      ]).map((step, i, arr) => (
        <div key={step.n} style={{
          padding: '32px 28px 40px',
          background: t.bg,
          borderTop: `3px solid ${t.gold}`,
          position: 'relative',
        }}>
          <div style={{ ...shLabel, fontSize: 11, color: t.gold, marginBottom: 16 }}>{step.n}</div>
          <h3 style={{ ...shDisplay(22), color: t.ink, marginBottom: 12 }}>{step.title}</h3>
          <p style={{ ...shBody, fontSize: 14, color: t.ink2 }}>{step.body}</p>
        </div>
      ))}
    </div>
  </section>
);

// ── TESTIMONIALS — 3-col grid ──────────────────────────────────────────────
const ShowroomTestimonials = ({ t }) => (
  <section style={{ padding: '120px 80px', borderBottom: `1px solid ${t.rule}` }}>
    <div style={{ marginBottom: 64 }}>
      <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>04 · Reference</div>
      <h2 style={{ ...shDisplay(56), color: t.ink, maxWidth: 720 }}>
        Co o&nbsp;nás <span style={{ color: t.gold, fontStyle: 'italic' }}>říkají&nbsp;klienti.</span>
      </h2>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
      {[
        ['„Profesionální přístup od první návštěvy po montáž. Kuchyň přesně podle našich představ."', 'Pan Novák', 'Pardubice · 2024'],
        ['„Kvalitní řemeslo, dodrženy termíny, čistý postup. Doporučujeme."', 'Paní Kratochvílová', 'Hradec Králové · 2024'],
        ['„Vestavěná skříň zapadla do prostoru přesně jak měla. Spokojenost."', 'Rodina Šimečkových', 'Chrudim · 2023'],
      ].map(([quote, name, meta], i) => (
        <div key={i} style={{
          padding: '40px 32px',
          background: t.bgAlt,
          borderLeft: `3px solid ${t.gold}`,
        }}>
          <div style={{ fontSize: 32, color: t.gold, lineHeight: 1, marginBottom: 16, fontFamily: 'Fraunces, serif' }}>"</div>
          <p style={{ ...shBody, fontSize: 16, color: t.ink, marginBottom: 24, fontStyle: 'italic', lineHeight: 1.55 }}>
            {quote}
          </p>
          <div style={{ paddingTop: 16, borderTop: `1px solid ${t.rule}` }}>
            <div style={{ ...shDisplay(16), color: t.ink, marginBottom: 4 }}>{name}</div>
            <div style={{ ...shLabel, fontSize: 10, color: t.ink3 }}>{meta}</div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

// ── FOOTER — multi-column sitemap ──────────────────────────────────────────
const ShowroomFooter = ({ t }) => (
  <footer id="kontakt" style={{ background: t.bgDark, color: t.bgAlt, padding: '96px 80px 40px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 64, marginBottom: 64 }}>
      <div>
        <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 60, width: 'auto', marginBottom: 24, filter: 'brightness(0) invert(1)', opacity: 0.9 }} />
        <h3 style={{ ...shDisplay(28), color: t.bgAlt, marginBottom: 16 }}>
          Naceňte svůj <span style={{ color: t.gold, fontStyle: 'italic' }}>projekt.</span>
        </h3>
        <p style={{ ...shBody, color: '#FAF7F2AA', maxWidth: 360, marginBottom: 32 }}>
          Konzultace a cenová nabídka zdarma. Bez závazků.
        </p>
        <a href={`tel:${BRAND.phone}`} style={{
          padding: '18px 32px', background: t.gold, color: t.bgDark,
          textDecoration: 'none', fontSize: 14, fontWeight: 600,
          display: 'inline-block',
        }}>
          Zavolejte: {BRAND.phoneDisplay}
        </a>
      </div>
      <div>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>Produkty</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {['Kuchyně', 'Skříně', 'Interiéry', 'Dveře', 'Okna'].map(l => (
            <a key={l} href="#" style={{ color: t.bgAlt, textDecoration: 'none', opacity: 0.85, fontSize: 14 }}>{l}</a>
          ))}
        </div>
      </div>
      <div>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>Studio</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {['Realizace', 'O nás', 'Proces', 'Reference', 'Návštěva dílny'].map(l => (
            <a key={l} href="#" style={{ color: t.bgAlt, textDecoration: 'none', opacity: 0.85, fontSize: 14 }}>{l}</a>
          ))}
        </div>
      </div>
      <div>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 20 }}>Kontakt</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 14, color: t.bgAlt, opacity: 0.85 }}>
          <div>{BRAND.address || BRAND.location || ''}</div>
          <a href={`tel:${BRAND.phone}`} style={{ color: t.bgAlt, textDecoration: 'none' }}>{BRAND.phoneDisplay}</a>
          <a href={`mailto:${BRAND.email}`} style={{ color: t.bgAlt, textDecoration: 'none' }}>{BRAND.email}</a>
        </div>
      </div>
    </div>
    <div style={{
      paddingTop: 32, borderTop: `1px solid ${t.bgAlt}22`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontSize: 12, opacity: 0.6,
    }}>
      <div>© {BRAND.name} {BRAND.since ? `· od ${BRAND.since}` : ''} · {BRAND.location || ''}</div>
      <div>{BRAND.domain || ''}</div>
    </div>
  </footer>
);

// ============================================================================
// MOBILE — 390 wide
// ============================================================================
const ShowroomMobile = () => {
  const t = showroomTokens;
  return (
    <div style={{ width: 390, fontFamily: '"Inter", -apple-system, sans-serif', color: t.ink, background: t.bg, overflow: 'hidden' }}>
      <div style={{ background: t.bgDark, color: t.bgAlt, padding: '8px 16px', fontSize: 11, textAlign: 'center' }}>
        📍 {BRAND.location || 'Naše dílna'} · <a href={`tel:${BRAND.phone}`} style={{ color: t.bgAlt }}>{BRAND.phoneDisplay}</a>
      </div>
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px', borderBottom: `1px solid ${t.rule}` }}>
        <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 40 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ width: 22, height: 1.5, background: t.ink }} />
          <div style={{ width: 22, height: 1.5, background: t.ink }} />
        </div>
      </nav>

      <section style={{ padding: '48px 24px' }}>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 16 }}>
          {BRAND.since ? `OD ROKU ${BRAND.since}` : 'NA TRHU LÉTA'} · {BRAND.location || 'ČR'}
        </div>
        <h1 style={{ ...shDisplay(38), color: t.ink, marginBottom: 24 }}>
          Vyrábíme kuchyně a&nbsp;interiéry <span style={{ color: t.gold, fontStyle: 'italic' }}>po&nbsp;celé&nbsp;ČR.</span>
        </h1>
        <p style={{ ...shBody, color: t.ink2, marginBottom: 32 }}>
          {BRAND.tagline || 'Vlastní výroba, vlastní montáž.'}
        </p>
        <a href="#catalog" style={{ padding: '16px 28px', background: t.ink, color: t.bgAlt, textDecoration: 'none', fontSize: 14, fontWeight: 600, display: 'inline-block' }}>
          Prohlédnout katalog
        </a>
      </section>

      <div style={{ aspectRatio: '4/3', background: t.bgAlt, position: 'relative', overflow: 'hidden' }}>
        <Img src={BRAND.heroPhoto} alt="" tone={t.goldSoft} style={{ position: 'absolute', inset: 0 }} />
      </div>

      <section style={{ padding: '48px 24px', borderTop: `1px solid ${t.rule}` }}>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 12 }}>02 · Co vyrábíme</div>
        <h2 style={{ ...shDisplay(32), color: t.ink, marginBottom: 24 }}>
          Kompletní řešení interiéru.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {(CATEGORIES.length > 0 ? CATEGORIES : [
            { id: 'k', label: 'Kuchyně' }, { id: 's', label: 'Skříně' },
            { id: 'i', label: 'Interiéry' }, { id: 'd', label: 'Dveře' },
          ]).slice(0, 6).map((c, i) => (
            <a key={c.id} href={`#${c.id}`} style={{
              padding: '20px 24px', background: t.bgAlt,
              borderLeft: `3px solid ${t.gold}`,
              textDecoration: 'none', color: 'inherit',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <div>
                <div style={{ ...shLabel, fontSize: 10, color: t.ink3, marginBottom: 4 }}>0{i + 1}</div>
                <h3 style={{ ...shDisplay(18), color: t.ink }}>{c.label}</h3>
              </div>
              <div style={{ color: t.gold }}>→</div>
            </a>
          ))}
        </div>
      </section>

      <section style={{ padding: '48px 24px', background: t.bgDark, color: t.bgAlt }}>
        <div style={{ ...shLabel, color: t.gold, marginBottom: 12 }}>Kontakt</div>
        <h2 style={{ ...shDisplay(32), color: t.bgAlt, marginBottom: 24 }}>
          Naceňte svůj projekt.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 32 }}>
          <a href={`tel:${BRAND.phone}`} style={{ color: t.gold, textDecoration: 'none', ...shDisplay(20) }}>{BRAND.phoneDisplay}</a>
          <a href={`mailto:${BRAND.email}`} style={{ color: t.bgAlt, opacity: 0.85, textDecoration: 'none', fontSize: 14 }}>{BRAND.email}</a>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ShowroomDesktop, ShowroomMobile });