/* Home page sections */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Hero() {
  const [, t] = useLang();
  const [scrollY, setScrollY] = useStateH(0);
  useEffectH(() => {
    const h = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <section className="hero grain">
      <div className="hero-media" style={{ transform: `translate3d(0, ${scrollY * 0.4}px, 0) scale(${1 + scrollY * 0.0004})` }}>
        <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=2400&q=85" alt="" />
        <div className="hero-overlay" />
      </div>
      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="line-l"></span>
          <span className="eyebrow" style={{ color: 'rgba(251,247,239,0.85)' }}>{t('Созопол · Черноморие · България', 'Sozopol · Black Sea · Bulgaria')}</span>
          <span className="line-l"></span>
        </div>
        <h1 className="display-xl hero-title">
          <span className="hero-line">{t('Тишина,', 'Silence,')}</span>
          <span className="hero-line hero-line-italic">{t('срещу морето.', 'facing the sea.')}</span>
        </h1>
        <p className="hero-sub">
          {t(
            'Двадесет и четири стаи. Един ресторант. Морска градина. Колекция от изживявания, изваяни бавно.',
            'Twenty-four rooms. One restaurant. A sea garden. A collection of experiences, slowly carved.'
          )}
        </p>
        <div className="hero-actions">
          <a href="booking.html" className="btn btn-light">{t('Проверка на наличност', 'Check availability')} →</a>
          <a href="rooms.html" className="hero-link">{t('Разгледайте стаите', 'Discover rooms')}</a>
        </div>
      </div>
      <div className="hero-scroll">
        <span className="eyebrow" style={{ color: 'rgba(251,247,239,0.7)' }}>{t('Плъзнете', 'Scroll')}</span>
        <span className="scroll-line" />
      </div>
      <div className="hero-meta">
        <div><span className="eyebrow" style={{ color: 'rgba(251,247,239,0.6)' }}>N 42°25'</span></div>
        <div><span className="eyebrow" style={{ color: 'rgba(251,247,239,0.6)' }}>E 27°41'</span></div>
        <div><span className="eyebrow" style={{ color: 'rgba(251,247,239,0.6)' }}>22°C · {t('Слънчево', 'Clear')}</span></div>
      </div>
    </section>
  );
}

function Marquee() {
  const [, t] = useLang();
  const items = [
    t('24 стаи', '24 rooms'),
    t('Ресторант „Мелнà"', 'Restaurant "Melna"'),
    t('СПА с морска вода', 'Seawater spa'),
    t('Подгрят инфинити басейн', 'Heated infinity pool'),
    t('Частен плаж', 'Private beach'),
    t('Винарна', 'Wine cellar'),
    t('Relais & Châteaux', 'Relais & Châteaux'),
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((i, idx) => (
          <span key={idx} className="marquee-item">
            <span className="marquee-dot">✦</span> {i}
          </span>
        ))}
      </div>
    </div>
  );
}

function Intro() {
  const [, t] = useLang();
  return (
    <section className="intro">
      <div className="container">
        <div className="intro-grid">
          <div className="intro-left">
            <span className="eyebrow" data-reveal>{t('— Добре дошли', '— Welcome')}</span>
          </div>
          <div className="intro-right">
            <p className="display-m" data-reveal style={{ fontWeight: 300, marginBottom: 48 }}>
              {t(
                'MK Design Hotel е тих акт на съпротива срещу времето — къща, която помни вкуса на солта, аромата на бора и тишината между две вълни.',
                'MK Design Hotel is a quiet act of resistance against time — a house that remembers the taste of salt, the scent of pine, and the silence between two waves.'
              )}
            </p>
            <p className="lede" data-reveal style={{ maxWidth: 680 }}>
              {t(
                'Проектиран от архитект Милен Колев през 2021-а, хотелът е резултат от десет години наблюдение на морето, светлината и бавния ритъм на южното крайбрежие.',
                'Designed by architect Milen Kolev in 2021, the hotel is the result of ten years observing the sea, the light, and the slow rhythm of the southern coast.'
              )}
            </p>
            <a href="story.html" className="intro-link" data-reveal>
              <span>{t('Нашата история', 'Our story')}</span>
              <svg width="36" height="10" viewBox="0 0 36 10"><path d="M0 5 H34 M29 1 L34 5 L29 9" stroke="currentColor" fill="none" strokeWidth="1"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* SIGNATURE FEATURE: Interactive property map */
function PropertyMap() {
  const [, t] = useLang();
  const [active, setActive] = useStateH(null);
  const points = [
    { id: 'rooms', x: 34, y: 28, bg: 'Крило „Север"', en: 'North Wing', desc_bg: '24 стаи и апартамента с гледка към морето', desc_en: '24 rooms and suites facing the sea', count: '24', meta_bg: 'Стаи', meta_en: 'Rooms', href: 'rooms.html' },
    { id: 'pool', x: 48, y: 52, bg: 'Инфинити басейн', en: 'Infinity Pool', desc_bg: 'Подгрят, 32 метра, открит целогодишно', desc_en: 'Heated, 32 metres, open year-round', count: '32m', meta_bg: 'Дължина', meta_en: 'Length', href: '#' },
    { id: 'spa', x: 62, y: 38, bg: 'СПА „Тихия бряг"', en: 'Spa "The Quiet Shore"', desc_bg: 'Морска баня, сауна, ритуали от Черно море', desc_en: 'Seawater bath, sauna, Black Sea rituals', count: '9', meta_bg: 'Ритуала', meta_en: 'Rituals', href: 'spa.html' },
    { id: 'restaurant', x: 28, y: 62, bg: 'Ресторант „Мелнà"', en: 'Restaurant "Melna"', desc_bg: 'Морска кухня и 18 гастрономически вечери', desc_en: 'Coastal cuisine and 18 gastronomic evenings', count: '18', meta_bg: 'Места', meta_en: 'Seats', href: 'restaurant.html' },
    { id: 'beach', x: 72, y: 72, bg: 'Частен плаж', en: 'Private beach', desc_bg: '180 метра пясък, достъп само за гости', desc_en: '180 metres of sand, guest-only access', count: '180m', meta_bg: 'Пясък', meta_en: 'Sand', href: '#' },
    { id: 'garden', x: 20, y: 44, bg: 'Морска градина', en: 'Sea Garden', desc_bg: 'Средиземноморска флора и открита трапезария', desc_en: 'Mediterranean flora and open-air dining', count: '2ha', meta_bg: 'Площ', meta_en: 'Area', href: '#' },
  ];

  const activePoint = points.find(p => p.id === active);

  return (
    <section className="map-section">
      <div className="container-wide">
        <div className="map-header" data-reveal>
          <span className="eyebrow">{t('— Територията', '— The Grounds')}</span>
          <h2 className="display-l" style={{ marginTop: 20, marginBottom: 24 }}>
            {t('Два хектара,', 'Two hectares,')} <em style={{ fontStyle: 'italic' }}>{t('шест свята.', 'six worlds.')}</em>
          </h2>
          <p className="lede" style={{ maxWidth: 600 }}>
            {t('Задръжте върху картата, за да откриете нашите пространства.', 'Hover over the map to discover our spaces.')}
          </p>
        </div>

        <div className="map-wrap" data-reveal>
          <div className="map-canvas">
            {/* Illustrated aerial background */}
            <svg className="map-svg" viewBox="0 0 1000 640" preserveAspectRatio="xMidYMid slice">
              <defs>
                <linearGradient id="sea" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#A8BDC4"/>
                  <stop offset="1" stopColor="#7A99A3"/>
                </linearGradient>
                <linearGradient id="land" x1="0" x2="1" y1="0" y2="1">
                  <stop offset="0" stopColor="#EDE3CF"/>
                  <stop offset="1" stopColor="#DCCBA8"/>
                </linearGradient>
                <pattern id="waves" x="0" y="0" width="40" height="20" patternUnits="userSpaceOnUse">
                  <path d="M0 10 Q10 4, 20 10 T40 10" stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="0.8"/>
                </pattern>
                <pattern id="trees" x="0" y="0" width="28" height="28" patternUnits="userSpaceOnUse">
                  <circle cx="8" cy="8" r="3.5" fill="rgba(88, 104, 72, 0.3)"/>
                  <circle cx="20" cy="18" r="2.8" fill="rgba(88, 104, 72, 0.25)"/>
                </pattern>
              </defs>
              {/* Sea */}
              <rect width="1000" height="640" fill="url(#sea)"/>
              <rect width="1000" height="640" fill="url(#waves)"/>
              {/* Land */}
              <path d="M0 0 L1000 0 L1000 420 Q820 400 680 470 Q520 560 320 530 Q140 510 0 470 Z" fill="url(#land)"/>
              {/* Tree areas */}
              <path d="M80 140 L780 140 L780 360 L80 360 Z" fill="url(#trees)" opacity="0.7"/>
              {/* Sand edge */}
              <path d="M0 470 Q140 510 320 530 Q520 560 680 470 Q820 400 1000 420 L1000 470 Q820 450 680 520 Q520 600 320 580 Q140 560 0 520 Z" fill="#E8DCC6" opacity="0.6"/>
              {/* Building footprints */}
              <g fill="#F6F1E8" stroke="#867964" strokeWidth="0.8">
                {/* Hotel */}
                <rect x="280" y="140" width="170" height="50" rx="2"/>
                <rect x="360" y="155" width="70" height="120" rx="2"/>
                {/* Restaurant */}
                <rect x="240" y="360" width="90" height="40" rx="2"/>
                {/* Spa */}
                <rect x="580" y="210" width="120" height="80" rx="2"/>
                {/* Pool */}
                <rect x="440" y="300" width="120" height="40" rx="20" fill="#8FB0B8" stroke="#4C6973"/>
              </g>
              {/* Paths */}
              <g stroke="#C4B495" strokeWidth="2" fill="none" strokeDasharray="2 3" opacity="0.6">
                <path d="M400 200 Q440 260 500 320"/>
                <path d="M500 320 Q560 310 620 260"/>
                <path d="M400 200 Q340 280 285 380"/>
                <path d="M700 480 Q600 450 500 340"/>
              </g>
              {/* Compass */}
              <g transform="translate(920 60)" fill="#867964">
                <circle r="24" fill="none" stroke="#867964" strokeWidth="0.6"/>
                <path d="M0 -18 L4 0 L0 18 L-4 0 Z" fill="#867964"/>
                <text y="-26" textAnchor="middle" fontSize="10" fontFamily="var(--font-body)" letterSpacing="1">N</text>
              </g>
              {/* Scale */}
              <g transform="translate(60 580)" stroke="#867964" fill="#867964">
                <line x1="0" y1="0" x2="100" y2="0" strokeWidth="1"/>
                <line x1="0" y1="-4" x2="0" y2="4" strokeWidth="1"/>
                <line x1="50" y1="-3" x2="50" y2="3" strokeWidth="0.8"/>
                <line x1="100" y1="-4" x2="100" y2="4" strokeWidth="1"/>
                <text y="18" fontSize="9" fontFamily="var(--font-body)" letterSpacing="1">0   50m   100m</text>
              </g>
            </svg>

            {/* Interactive points */}
            {points.map(p => (
              <button
                key={p.id}
                className={`map-point ${active === p.id ? 'is-active' : ''}`}
                style={{ left: `${p.x}%`, top: `${p.y}%` }}
                onMouseEnter={() => setActive(p.id)}
                onFocus={() => setActive(p.id)}
                onClick={() => window.location.href = p.href}
              >
                <span className="map-point-ring" />
                <span className="map-point-dot" />
                <span className="map-point-label">{t(p.bg, p.en)}</span>
              </button>
            ))}
          </div>

          {/* Info panel */}
          <div className="map-info">
            {activePoint ? (
              <div className="map-info-inner" key={activePoint.id}>
                <span className="eyebrow">{`0${points.indexOf(activePoint) + 1} / 0${points.length}`}</span>
                <h3 className="display-s" style={{ marginTop: 16, marginBottom: 16 }}>{t(activePoint.bg, activePoint.en)}</h3>
                <p style={{ color: 'var(--muted)', marginBottom: 32 }}>{t(activePoint.desc_bg, activePoint.desc_en)}</p>
                <div className="map-info-stat">
                  <span className="display-l" style={{ fontWeight: 300 }}>{activePoint.count}</span>
                  <span className="eyebrow" style={{ marginLeft: 12 }}>{t(activePoint.meta_bg, activePoint.meta_en)}</span>
                </div>
                <a href={activePoint.href} className="intro-link" style={{ marginTop: 32 }}>
                  <span>{t('Разгледайте', 'Discover')}</span>
                  <svg width="36" height="10" viewBox="0 0 36 10"><path d="M0 5 H34 M29 1 L34 5 L29 9" stroke="currentColor" fill="none" strokeWidth="1"/></svg>
                </a>
              </div>
            ) : (
              <div className="map-info-inner">
                <span className="eyebrow">{t('Курсорът', 'The cursor')}</span>
                <h3 className="display-s" style={{ marginTop: 16, marginBottom: 16, color: 'var(--stone-2)' }}>{t('Изберете точка', 'Select a point')}</h3>
                <p style={{ color: 'var(--muted)' }}>
                  {t('Шест отделни свята, съединени от една пътека покрай морето.', 'Six separate worlds, joined by a single path along the sea.')}
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function RoomsTeaser() {
  const [, t] = useLang();
  const rooms = [
    { id: 'sea', img: 'https://images.unsplash.com/photo-1566665797739-1674de7a421a?w=1200&q=85', bg: 'Стая „Морски бриз"', en: '"Sea Breeze" Room', size: '38 м²', from_bg: 'от 420 лв.', from_en: 'from €215' },
    { id: 'suite', img: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=1200&q=85', bg: 'Апартамент „Хоризонт"', en: '"Horizon" Suite', size: '72 м²', from_bg: 'от 680 лв.', from_en: 'from €348' },
    { id: 'penthouse', img: 'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=1200&q=85', bg: 'Пентхаус „Светлина"', en: '"Light" Penthouse', size: '124 м²', from_bg: 'от 1 280 лв.', from_en: 'from €655' },
  ];
  return (
    <section className="rooms-teaser">
      <div className="container-wide">
        <div className="teaser-header" data-reveal>
          <div>
            <span className="eyebrow">{t('— Място за оставане', '— Where to stay')}</span>
            <h2 className="display-l" style={{ marginTop: 20 }}>
              {t('Стаи, където', 'Rooms where')}<br/>
              <em style={{ fontStyle: 'italic' }}>{t('утрото започва бавно.', 'morning begins slowly.')}</em>
            </h2>
          </div>
          <a href="rooms.html" className="btn btn-ghost">{t('Всички стаи', 'All rooms')} →</a>
        </div>
        <div className="teaser-grid">
          {rooms.map((r, i) => (
            <a href="room-detail.html" key={r.id} className="room-card" data-reveal style={{ transitionDelay: `${i * 120}ms` }}>
              <div className="room-card-img">
                <img src={r.img} alt=""/>
                <span className="room-card-num">{`0${i + 1}`}</span>
              </div>
              <div className="room-card-body">
                <div className="room-card-head">
                  <h3 className="display-s">{t(r.bg, r.en)}</h3>
                  <span className="eyebrow">{r.size}</span>
                </div>
                <div className="room-card-foot">
                  <span className="eyebrow">{t(r.from_bg, r.from_en)}</span>
                  <span className="room-card-arrow">→</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function RestaurantTeaser() {
  const [, t] = useLang();
  return (
    <section className="restaurant-teaser grain">
      <div className="container-wide">
        <div className="rt-grid">
          <div className="rt-img rt-img-1" data-reveal>
            <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1400&q=85" alt=""/>
          </div>
          <div className="rt-text" data-reveal>
            <span className="eyebrow" style={{ color: 'rgba(251,247,239,0.7)' }}>{t('— Ресторант „Мелнà"', '— Restaurant "Melna"')}</span>
            <h2 className="display-l" style={{ color: 'var(--ivory)', marginTop: 20, marginBottom: 28 }}>
              {t('Осемнадесет места,', 'Eighteen seats,')}<br/>
              <em style={{ fontStyle: 'italic' }}>{t('една маса с морето.', 'one table with the sea.')}</em>
            </h2>
            <p style={{ color: 'rgba(251,247,239,0.8)', fontSize: 16, lineHeight: 1.7, marginBottom: 40, maxWidth: 440 }}>
              {t(
                'Шеф Ясен Петров превежда черноморската кухня през прецизно, бавно готвене. Меню от шест или осем хода, сменящо се с приливите.',
                'Chef Yasen Petrov translates Black Sea cuisine through precise, slow cooking. A tasting menu of six or eight courses, changing with the tides.'
              )}
            </p>
            <a href="restaurant.html" className="btn btn-light">{t('Отворете менюто', 'Open the menu')} →</a>
          </div>
          <div className="rt-img rt-img-2" data-reveal>
            <img src="https://images.unsplash.com/photo-1559339352-11d035aa65de?w=800&q=85" alt=""/>
          </div>
        </div>
      </div>
    </section>
  );
}

function SpaTeaser() {
  const [, t] = useLang();
  return (
    <section className="spa-teaser">
      <div className="container-wide">
        <div className="spa-grid">
          <div className="spa-text" data-reveal>
            <span className="eyebrow">{t('— Тихия бряг', '— The Quiet Shore')}</span>
            <h2 className="display-l" style={{ marginTop: 20, marginBottom: 28 }}>
              {t('СПА, вдишано', 'A spa, breathed')}<br/>
              <em style={{ fontStyle: 'italic' }}>{t('от морето.', 'from the sea.')}</em>
            </h2>
            <p style={{ color: 'var(--muted)', marginBottom: 40, maxWidth: 460 }}>
              {t(
                'Девет ритуала, създадени около морска вода, йод и билки от Странджа. Частни кабини, хамам, ледена стая и басейн с изглед към залеза.',
                'Nine rituals built around seawater, iodine, and herbs from Strandja. Private cabins, hammam, ice room, and a pool facing the sunset.'
              )}
            </p>
            <div className="spa-list">
              {[
                [t('Морска баня', 'Seawater bath'), '60 ' + t('мин', 'min')],
                [t('Йод и розмарин', 'Iodine & rosemary'), '90 ' + t('мин', 'min')],
                [t('Пясъчен ритуал', 'Sand ritual'), '120 ' + t('мин', 'min')],
              ].map(([n, d], i) => (
                <div key={i} className="spa-list-row">
                  <span className="spa-list-num">{`0${i + 1}`}</span>
                  <span className="spa-list-name">{n}</span>
                  <span className="spa-list-dots" />
                  <span className="spa-list-dur">{d}</span>
                </div>
              ))}
            </div>
            <a href="spa.html" className="btn btn-ghost" style={{ marginTop: 32 }}>{t('Целият СПА', 'The full spa')} →</a>
          </div>
          <div className="spa-media" data-reveal>
            <img src="https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=1200&q=85" alt=""/>
            <div className="spa-badge">
              <span className="eyebrow" style={{ color: 'var(--ivory)' }}>{t('От 2021', 'Since 2021')}</span>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, color: 'var(--ivory)', fontWeight: 300, marginTop: 8 }}>9</div>
              <span style={{ fontSize: 12, color: 'rgba(251,247,239,0.7)' }}>{t('ритуала', 'rituals')}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Quote() {
  const [, t] = useLang();
  return (
    <section className="quote-section">
      <div className="container">
        <blockquote className="quote" data-reveal>
          <span className="quote-mark">"</span>
          <p className="display-m" style={{ fontWeight: 300, fontStyle: 'italic', textAlign: 'center' }}>
            {t(
              'Една от най-тихите и красиво скроени хотелски къщи по българското крайбрежие — архитектура, която ляга с пейзажа, а не срещу него.',
              'One of the quietest and most beautifully tailored hotel houses on the Bulgarian coast — architecture that lies with the landscape, not against it.'
            )}
          </p>
          <footer className="quote-foot">
            <span className="eyebrow">Condé Nast Traveller · 2025</span>
          </footer>
        </blockquote>
      </div>
    </section>
  );
}

function JournalTeaser() {
  const [, t] = useLang();
  const items = [
    { bg: 'Ритуалът на мидата', en: 'The mussel ritual', cat_bg: 'Кухня', cat_en: 'Cuisine', img: 'https://images.unsplash.com/photo-1559339352-11d035aa65de?w=900&q=85' },
    { bg: 'Пет часа от София', en: 'Five hours from Sofia', cat_bg: 'Пътуване', cat_en: 'Journey', img: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900&q=85' },
    { bg: 'Архитект Милен Колев', en: 'Architect Milen Kolev', cat_bg: 'История', cat_en: 'Story', img: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=900&q=85' },
  ];
  return (
    <section className="journal">
      <div className="container-wide">
        <div className="journal-head" data-reveal>
          <span className="eyebrow">{t('— Списание', '— The Journal')}</span>
          <h2 className="display-l" style={{ marginTop: 20 }}>{t('От нашата къща.', 'From our house.')}</h2>
        </div>
        <div className="journal-grid">
          {items.map((it, i) => (
            <a key={i} href="#" className="journal-card" data-reveal style={{ transitionDelay: `${i * 100}ms` }}>
              <div className="journal-img"><img src={it.img} alt=""/></div>
              <span className="eyebrow" style={{ marginTop: 20, display: 'block' }}>{t(it.cat_bg, it.cat_en)}</span>
              <h3 className="display-s" style={{ marginTop: 8, fontWeight: 400 }}>{t(it.bg, it.en)}</h3>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  const [, t] = useLang();
  return (
    <section className="cta-section">
      <div className="container">
        <div className="cta-inner" data-reveal>
          <span className="eyebrow">{t('— Резервация', '— Reservation')}</span>
          <h2 className="display-xl" style={{ fontWeight: 300, margin: '32px 0 48px', textAlign: 'center' }}>
            {t('Очакваме ви', 'Awaiting')}<br/>
            <em style={{ fontStyle: 'italic' }}>{t('при изгрев.', 'your arrival.')}</em>
          </h2>
          <div style={{ display: 'flex', gap: 20, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="booking.html" className="btn">{t('Резервирайте престой', 'Book a stay')} →</a>
            <a href="tel:+35955024300" className="btn btn-ghost">+359 550 24 300</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Marquee, Intro, PropertyMap, RoomsTeaser, RestaurantTeaser, SpaTeaser, Quote, JournalTeaser, CTA });