/* ─── Navbar logo family ─── */

function makeBergulillaPath(thickness) {
  return `M 14 38 C 35 38, 85 4, 200 6 C 290 8, 308 60, 400 62 C 490 64, 538 38, 586 38 C 538 ${38 + thickness}, 490 ${64 + thickness}, 400 ${62 + thickness} C 308 ${60 + thickness}, 290 ${8 + thickness}, 200 ${6 + thickness} C 85 ${4 + thickness}, 35 ${38 + thickness}, 14 38 Z`;
}

function LogoWaveMark({ width = 104, variant = 'dosTrazos', palette }) {
  const isThreeStroke = variant === 'tresTrazos';
  const thickness = isThreeStroke ? 5 : 8;
  const spread = isThreeStroke ? 13 : 18;
  const viewHeight = isThreeStroke ? 140 : 130;
  const viewTop = isThreeStroke ? 20 : 15;
  const height = width * (viewHeight / 615);
  const path = makeBergulillaPath(thickness);
  const layers = isThreeStroke
    ? [
        { color: palette.primary, dx: -2, dy: -spread },
        { color: palette.secondary, dx: 2, dy: 0 },
        { color: palette.tertiary, dx: 6, dy: spread },
      ]
    : [
        { color: palette.primary, dx: -1, dy: -spread / 2 },
        { color: palette.secondary, dx: 3, dy: spread / 2 },
      ];

  return (
    <svg
      className="nav-brand-mark"
      width={width}
      height={height}
      viewBox={`-5 -${viewTop} 615 ${viewHeight}`}
      aria-hidden="true"
      style={{ overflow: 'visible' }}
    >
      {layers.map((layer, index) => (
        <path
          key={index}
          d={path}
          fill={layer.color}
          transform={`translate(${layer.dx}, ${layer.dy})`}
        />
      ))}
    </svg>
  );
}

function NavLogo({ palette, logoVersion = 'dosTrazos' }) {
  return (
    <div className="nav-brand" data-logo-variant={logoVersion}>
      <div className="nav-brand-sym">
        <LogoWaveMark width={104} variant={logoVersion} palette={palette} />
      </div>
      <div className="nav-brand-stack">
        <div className="nav-brand-wordmark">
          <span className="nav-brand-first">Belmar</span>
          <span className="nav-brand-sep"></span>
          <span className="nav-brand-last">Yáñez</span>
        </div>
        <div className="nav-brand-cia-row">
          <span className="nav-brand-cia-rule"></span>
          <span className="nav-brand-cia">y Cía.</span>
          <span className="nav-brand-cia-rule"></span>
        </div>
      </div>
    </div>
  );
}

/* ─── Photo Carousel ─── */
const PHOTOS = [
  { src: 'assets/portrait-1.png',  label: 'Puerto Varas' },
  { src: 'assets/portrait-2.png',  label: 'Puerto Montt (centro)' },
  { src: 'assets/portrait-3.png',  label: 'Volcán Osorno' },
  { src: 'assets/portrait-4.png',  label: 'Lago Llanquihue' },
  { src: 'assets/portrait-1a.png', label: 'Lago · vista cercana' },
  { src: 'assets/portrait-2a.png', label: 'Puerto Montt (puerto)' },
  { src: 'assets/portrait-3a.png', label: 'Puerto Varas (lago)' },
];

function PhotoCarousel({ index, setIndex, frozen = false }) {
  const total = PHOTOS.length;
  const go = (delta) => setIndex((index + delta + total) % total);
  return (
    <div className="photo-frame">
      <span className="photo-corner tl"></span>
      <span className="photo-corner tr"></span>
      <span className="photo-corner bl"></span>
      <span className="photo-corner br"></span>
      {PHOTOS.map((p, i) => (
        <img
          key={i}
          src={p.src}
          alt={`Felipe Belmar Yáñez — ${p.label}`}
          className={`photo-img ${i === index ? 'active' : ''}`}
        />
      ))}
      {!frozen && <button className="photo-nav prev" onClick={() => go(-1)} aria-label="Anterior">‹</button>}
      {!frozen && <button className="photo-nav next" onClick={() => go(1)}  aria-label="Siguiente">›</button>}
      {!frozen && (
        <div className="photo-counter">
          {String(index+1).padStart(2,'0')} · {PHOTOS[index].label}
        </div>
      )}
      {!frozen && (
        <div className="photo-dots">
          {PHOTOS.map((_, i) => (
            <span
              key={i}
              className={`photo-dot ${i === index ? 'active' : ''}`}
              onClick={() => setIndex(i)}
            ></span>
          ))}
        </div>
      )}
    </div>
  );
}

/* ─── Helper: dangerously render simple <em> tags from JSON ─── */
function withEm(text) {
  // text is from JSON, may contain <em>...</em>. Safe enough since we control source.
  return <span dangerouslySetInnerHTML={{__html: text}}/>;
}

window.LogoWaveMark = LogoWaveMark;
window.NavLogo = NavLogo;
window.PhotoCarousel = PhotoCarousel;
window.PHOTOS = PHOTOS;
window.withEm = withEm;