// start-page.jsx — Friends SUP, landing / service picker.
// Uses the EXACT same shell as the booking/certificate widgets:
//   • white rounded card with shadow
//   • header: logo + thin divider + tagline
//   • two-column body: cream sidebar (hero ticket-like card) + content
//   • footer: friends-sup.ru, ПОДДЕРЖКА pill, Правила link
// Two service options on the right — open booking or buy a certificate.

(function () {
  const { useState } = React;

  // ─── Hero card on the left — mirrors TicketCard layout from booking ──
  function HeroCard() {
    return (
      <div style={{
        position: 'relative',
        width: '100%',
        aspectRatio: '4 / 5',
        borderRadius: 18,
        background: '#FAF7EF',
        boxShadow: '0 30px 60px -20px rgba(10,46,31,.28), 0 4px 12px rgba(0,0,0,.06)',
        overflow: 'hidden',
        color: '#0A2E1F',
        fontFamily: 'inherit',
        display: 'flex', flexDirection: 'column'
      }}>
        <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 0 1px rgba(10,46,31,.06)', borderRadius: 18, pointerEvents: 'none', zIndex: 3 }} />

        {/* TOP: photo, full bleed */}
        <div style={{
          height: '100%', position: 'relative', overflow: 'hidden',
          background: '#1d2a26'
        }}>
          <img
            src={window.__resources.photoCity}
            alt=""
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover',
              objectPosition: 'center 32%',
              display: 'block'
            }} />
          <div style={{
            position: 'absolute', inset: 0, background: "linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%) center top"

          }} />
          <div style={{
            position: 'absolute', top: 16, left: 16, right: 16,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'
          }}>
            <img
              src={window.__resources.logoOrange}
              alt="Friends SUP"
              style={{
                height: 'clamp(18px, 3.2cqw, 28px)', width: 'auto'
              }} />
          </div>
          <div style={{
            position: 'absolute', bottom: 22, left: 22, right: 22, color: '#fff'
          }}>
            <div style={{
              fontSize: 'clamp(8px, 1.05cqw, 10px)',
              letterSpacing: '.22em', textTransform: 'uppercase',
              fontWeight: 500, opacity: .85, marginBottom: 8
            }}>Сезон 2026</div>
            <div style={{
              fontFamily: '"RF Dewi Extended", "NT Somic", sans-serif',
              fontSize: 'clamp(24px, 4.4cqw, 40px)',
              fontWeight: 800, letterSpacing: '-.015em', lineHeight: 1.0,
              textShadow: '0 2px 14px rgba(0,0,0,.35)'
            }}>Прогулки<br />на сапах<br />в Петербурге</div>
          </div>
        </div>
      </div>);

  }

  // ─── Service option (right column) ───────────────────────────────────
  function ServiceOption({ eyebrow, title, description, ctaLabel, accent, onClick }) {
    const [hover, setHover] = useState(false);
    return (
      <button
        type="button"
        onClick={onClick}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          appearance: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
          fontFamily: 'inherit', width: '100%',
          background: '#fff', borderRadius: 14,
          padding: '22px 24px',
          boxShadow: hover ?
          '0 14px 36px -16px rgba(10,46,31,.32), 0 1px 0 rgba(0,0,0,.04)' :
          '0 1px 0 rgba(0,0,0,.04)',
          transform: hover ? 'translateY(-1px)' : 'translateY(0)',
          transition: 'all .18s cubic-bezier(.2,.7,.3,1)',
          display: 'flex', flexDirection: 'column', gap: 10,
          color: '#0A2E1F'
        }}>
        <div style={{
          fontSize: 11, fontWeight: 500,
          letterSpacing: '.18em', textTransform: 'uppercase',
          color: accent
        }}>{eyebrow}</div>
        <div style={{
          fontFamily: '"RF Dewi Extended", "NT Somic", sans-serif',
          fontSize: 22, fontWeight: 800, letterSpacing: '-.01em',
          lineHeight: 1.08, color: '#0A2E1F'
        }}>{title}</div>
        <div style={{
          fontSize: 13, lineHeight: 1.45, color: '#5a6660',
          textWrap: 'pretty'
        }}>{description}</div>

        <div style={{
          marginTop: 6,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          paddingTop: 14, borderTop: '1px solid rgba(10,46,31,.06)'
        }}>
          <span style={{
            fontSize: 14, fontWeight: 500, color: '#0A2E1F',
            letterSpacing: '-.005em'
          }}>{ctaLabel}</span>
          <span style={{
            width: 32, height: 32, borderRadius: '50%',
            background: '#DD3310',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 8px 18px -8px rgba(221,51,16,.55)',
            transform: hover ? 'translateX(4px)' : 'translateX(0)',
            transition: 'transform .18s cubic-bezier(.2,.7,.3,1)'
          }}>
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
              <path d="M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5"
              stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        </div>
      </button>);

  }

  // ─── Shared shell — copied 1:1 from BookingShell ─────────────────────
  function StartShell({ children }) {
    return (
      <div style={{
        position: 'relative', width: '100%', height: '100%',
        background: '#fff', borderRadius: 18, overflow: 'hidden',
        boxShadow: '0 1px 0 rgba(0,0,0,.04), 0 30px 80px -30px rgba(0,0,0,.18)',
        fontFamily: '"NT Somic", system-ui, -apple-system, sans-serif',
        color: '#0A2E1F', display: 'flex', flexDirection: 'column'
      }}>
        <header style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '22px 32px', borderBottom: '1px solid rgba(10,46,31,.06)', flexShrink: 0
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            {window.FriendsLogo ?
            <window.FriendsLogo size={22} /> :
            <img src={window.__resources.logoOrange} alt="Friends SUP" style={{ height: 24 }} />}
            <div style={{ width: 1, height: 22, background: 'rgba(10,46,31,.12)' }} />
            <span style={{ fontSize: 14, color: '#3a4a44' }}>Сервис бронирования</span>
          </div>
          <a href="https://friends-sup.ru" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 16px 8px 12px',
            background: 'transparent',
            border: '1px solid rgba(10,46,31,.18)',
            borderRadius: 999,
            fontSize: 13, fontWeight: 500, color: '#0A2E1F',
            textDecoration: 'none',
            transition: 'background .15s, border-color .15s'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(10,46,31,.05)';e.currentTarget.style.borderColor = 'rgba(10,46,31,.3)';}}
          onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.borderColor = 'rgba(10,46,31,.18)';}}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M12 7H2M2 7L6.5 2.5M2 7L6.5 11.5"
              stroke="#0A2E1F" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            Вернуться на сайт
          </a>
        </header>

        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
          {children}
        </div>

        <footer style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 32px', borderTop: '1px solid rgba(10,46,31,.06)', flexShrink: 0
        }}>
          <div style={{ fontSize: 13, color: '#5a6660', letterSpacing: '.04em' }}>friends-sup.ru</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 30, height: 30, borderRadius: '50%',
              background: '#0A2E1F', display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontSize: 14
            }}>?</div>
            <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '.16em', color: '#0A2E1F' }}>ПОДДЕРЖКА</span>
          </div>
          <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 13, color: '#5a6660', textDecoration: 'none' }}>Правила</a>
        </footer>
      </div>);

  }

  // ─── Two-column layout — same as BookingTwoCol ───────────────────────
  function StartTwoCol({ left, right }) {
    return (
      <div style={{
        flex: 1,
        display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 0,
        background: '#F4F1EA', minHeight: 0
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '20px 14px 20px 28px'
        }}>
          <div style={{ width: '100%', maxWidth: 440, containerType: 'inline-size' }}>{left}</div>
        </div>
        <div style={{
          padding: '20px 28px 20px 16px',
          display: 'flex', flexDirection: 'column', minHeight: 0,
          justifyContent: 'center'
        }}>
          {right}
        </div>
      </div>);

  }

  // ─── Desktop start page ──────────────────────────────────────────────
  function StartPageDesktop() {
    return (
      <StartShell>
        <StartTwoCol
          left={<HeroCard />}
          right={
          <>
              <div style={{
              fontSize: 12, color: '#5a6660', letterSpacing: '.18em',
              textTransform: 'uppercase', fontWeight: 500, marginBottom: 10
            }}>
                Добро пожаловать
              </div>
              <div style={{
              fontFamily: '"RF Dewi Extended", "NT Somic", sans-serif',
              fontSize: 28, fontWeight: 500, letterSpacing: '-.01em',
              color: '#0A2E1F', marginBottom: 6
            }}>
                Что вас интересует?
              </div>
              <div style={{ fontSize: 14, color: '#5a6660', marginBottom: 20, lineHeight: 1.45 }}>
                Это сервис бронирования прогулок и покупки сертификатов Friends SUP. Запишитесь на прогулку или подарите впечатление близкому.
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <ServiceOption
                eyebrow="Прогулка"
                accent="#0A2E1F"
                title="Записаться на прогулку"
                description="Маршруты по каналам Петербурга, к Лахта-Центру на закате, в каньон или на Вуоксу. От 2 500 ₽ с человека."
                ctaLabel="Выбрать дату и маршрут"
                onClick={() => { window.location.href = '/trips'; }} />
                <ServiceOption
                eyebrow="Подарок"
                accent="#DD3310"
                title="Купить сертификат"
                description="Электронный сертификат с PDF и письмом получателю. Действителен весь сезон. От 2 500 ₽."
                ctaLabel="Оформить сертификат"
                onClick={() => { window.location.href = '/certificate'; }} />
              </div>
            </>
          } />
        
      </StartShell>);

  }

  // ─── Big tile option (V2 — full-bleed photo header) ──────────────────
  function ServiceTile({ photo, eyebrow, title, description, ctaLabel, accent }) {
    const [hover, setHover] = useState(false);
    return (
      <button
        type="button"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          appearance: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
          fontFamily: 'inherit', width: '100%',
          background: '#fff', borderRadius: 16, overflow: 'hidden',
          boxShadow: hover ?
          '0 24px 50px -22px rgba(10,46,31,.32), 0 1px 0 rgba(0,0,0,.04)' :
          '0 10px 28px -18px rgba(10,46,31,.22), 0 1px 0 rgba(0,0,0,.04)',
          transform: hover ? 'translateY(-2px)' : 'translateY(0)',
          transition: 'all .2s cubic-bezier(.2,.7,.3,1)',
          display: 'flex', flexDirection: 'column',
          color: '#0A2E1F', height: '100%'
        }}>
        {photo &&
        <div style={{ position: 'relative', height: 180, overflow: 'hidden', background: '#1d2a26' }}>
            <img src={photo} alt="" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center 55%',
            transform: hover ? 'scale(1.04)' : 'scale(1)',
            transition: 'transform .5s cubic-bezier(.2,.7,.3,1)'
          }} />
            <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%)'
          }} />
            <div style={{
            position: 'absolute', top: 14, left: 16,
            fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
            fontWeight: 600, color: '#fff',
            padding: '6px 10px', borderRadius: 999,
            background: accent, boxShadow: '0 6px 14px -6px rgba(0,0,0,.4)'
          }}>{eyebrow}</div>
          </div>
        }
        <div style={{ padding: '22px 24px 22px', display: 'flex', flexDirection: 'column', flex: 1, gap: 10 }}>
          <div style={{
            fontFamily: '"RF Dewi Extended", "NT Somic", sans-serif',
            fontSize: 24, fontWeight: 800, letterSpacing: '-.01em',
            lineHeight: 1.08, color: '#0A2E1F'
          }}>{title}</div>
          <div style={{
            fontSize: 13.5, lineHeight: 1.45, color: '#5a6660',
            textWrap: 'pretty', flex: 1
          }}>{description}</div>
          <div style={{
            marginTop: 4,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            paddingTop: 14, borderTop: '1px solid rgba(10,46,31,.06)'
          }}>
            <span style={{ fontSize: 14, fontWeight: 500, color: '#0A2E1F' }}>{ctaLabel}</span>
            <span style={{
              width: 34, height: 34, borderRadius: '50%',
              background: '#DD3310',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 8px 18px -8px rgba(221,51,16,.55)',
              transform: hover ? 'translateX(4px)' : 'translateX(0)',
              transition: 'transform .18s cubic-bezier(.2,.7,.3,1)'
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5"
                stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
          </div>
        </div>
      </button>);

  }

  // ─── V2 desktop — centered, two big tiles, no left hero card ─────────
  function StartPageDesktopV2() {
    return (
      <StartShell>
        <div style={{
          flex: 1, background: '#F4F1EA', minHeight: 0,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          padding: '32px 56px 40px'
        }}>
          <div style={{ width: '100%', maxWidth: 860, textAlign: 'center', marginBottom: 28 }}>
            <div style={{
              fontSize: 12, color: '#5a6660', letterSpacing: '.18em',
              textTransform: 'uppercase', fontWeight: 500, marginBottom: 12
            }}>Добро пожаловать</div>
            <div style={{
              fontFamily: '"RF Dewi Extended", "NT Somic", sans-serif',
              fontSize: 36, fontWeight: 800, letterSpacing: '-.015em',
              lineHeight: 1.05, color: '#0A2E1F', marginBottom: 10,
              textWrap: 'balance'
            }}>Что вас интересует?</div>
            <div style={{
              fontSize: 15, color: '#5a6660', lineHeight: 1.5,
              maxWidth: 560, margin: '0 auto', textWrap: 'pretty'
            }}>
              Это сервис бронирования прогулок и покупки сертификатов Friends&nbsp;SUP.
              Запишитесь на прогулку или подарите впечатление близкому.
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: 20, width: '100%', maxWidth: 860
          }}>
            <ServiceTile
              photo={window.__resources.photoCity}
              eyebrow="Прогулка"
              accent="#0A2E1F"
              title="Записаться на прогулку"
              description="Маршруты по каналам Петербурга, к Лахта-Центру на закате, в каньон или на Вуоксу. От 2 500 ₽ с человека."
              ctaLabel="Выбрать дату" />
            <ServiceTile
              photo={window.__resources.photoSunset}
              eyebrow="Подарок"
              accent="#DD3310"
              title="Купить сертификат"
              description="Электронный сертификат с PDF и письмом получателю. Действителен весь сезон. От 2 500 ₽."
              ctaLabel="Оформить сертификат" />
          </div>
        </div>
      </StartShell>);

  }

  // ─── Mobile shell — same as MobileShell from mobile-booking.jsx ──────
  function StartPageMobile() {
    return (
      <div style={{
        height: '100%', minHeight: '100%',
        display: 'flex', flexDirection: 'column',
        background: '#F4F1EA',
        fontFamily: '"NT Somic", system-ui, -apple-system, sans-serif',
        color: '#0A2E1F'
      }}>
        <header style={{
          padding: '50px 20px 14px',
          background: '#fff',
          borderBottom: '1px solid rgba(10,46,31,.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexShrink: 0
        }}>
          {window.FriendsLogo ?
          <window.FriendsLogo size={20} /> :
          <img src={window.__resources.logoOrange} alt="Friends SUP" style={{ height: 22 }} />}
          <a href="https://friends-sup.ru" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '7px 12px 7px 10px',
            background: 'transparent',
            border: '1px solid rgba(10,46,31,.18)',
            borderRadius: 999,
            fontSize: 12, fontWeight: 500, color: '#0A2E1F',
            textDecoration: 'none'
          }}>
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M12 7H2M2 7L6.5 2.5M2 7L6.5 11.5"
              stroke="#0A2E1F" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            На сайт
          </a>
        </header>

        <div style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch', minHeight: 0 }}>
          <div style={{ padding: '22px 16px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Heading */}
            <div>
              <div style={{
                fontSize: 11, color: '#5a6660', letterSpacing: '.18em',
                textTransform: 'uppercase', fontWeight: 500, marginBottom: 8
              }}>Добро пожаловать</div>
              <div style={{
                fontFamily: '"RF Dewi Extended", "NT Somic", sans-serif',
                fontSize: 26, fontWeight: 800, letterSpacing: '-.015em',
                lineHeight: 1.05, color: '#0A2E1F'
              }}>Что вас интересует?</div>
            </div>

            {/* Options stacked */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <ServiceOption
                eyebrow="Прогулка"
                accent="#0A2E1F"
                title="Записаться на прогулку"
                description="Маршруты по каналам Петербурга, к Лахта-Центру, в каньон или на Вуоксу. От 2 500 ₽."
                ctaLabel="Выбрать дату"
                onClick={() => { window.location.href = '/trips'; }} />
              <ServiceOption
                eyebrow="Подарок"
                accent="#DD3310"
                title="Купить сертификат"
                description="Электронный сертификат с PDF и письмом получателю. От 2 500 ₽."
                ctaLabel="Оформить"
                onClick={() => { window.location.href = '/certificate'; }} />
            </div>

            {/* Footer mini */}
            <div style={{
              marginTop: 6,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              paddingTop: 14, borderTop: '1px solid rgba(10,46,31,.08)',
              fontSize: 12, color: '#5a6660'
            }}>
              <span style={{ letterSpacing: '.04em' }}>friends-sup.ru</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{
                  width: 22, height: 22, borderRadius: '50%',
                  background: '#0A2E1F', color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11
                }}>?</span>
                <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.16em', color: '#0A2E1F' }}>ПОДДЕРЖКА</span>
              </span>
            </div>
          </div>
        </div>
      </div>);

  }

  window.StartPageDesktop = StartPageDesktop;
  window.StartPageDesktopV2 = StartPageDesktopV2;
  window.StartPageMobile = StartPageMobile;
})();