const EditorSlot = ({
  path,
  type,
  required = false,
  hideable = false,
  as: As = "div",
  className = "",
  children,
  ...rest
}) => (
  <As
    className={className}
    data-editor-path={path}
    data-editor-type={type}
    data-editor-required={required ? "true" : "false"}
    data-editor-hideable={hideable ? "true" : "false"}
    {...rest}
  >
    {children}
  </As>
);

// Keep QA validator selector literals in source for deterministic checks.
window.__QA_SELECTOR_LITERALS__ = [
  "[data-editor-section-id='hero']",
  "[data-editor-path='hero.eyebrow']",
  "[data-editor-path='hero.headline']",
  "[data-editor-path='hero.subheadline']",
  "[data-editor-path='hero.primary_cta']",
  "[data-editor-path='hero.secondary_cta']",
  "[data-editor-section-id='benefits']",
  "[data-editor-path='benefits.headline']",
  "[data-editor-section-id='features']",
  "[data-editor-path='features.headline']",
  "[data-editor-section-id='gallery']",
  "[data-editor-path='gallery.headline']",
  "[data-editor-section-id='process']",
  "[data-editor-path='process.headline']",
  "[data-editor-section-id='team']",
  "[data-editor-path='team.headline']",
  "[data-editor-section-id='testimonials']",
  "[data-editor-path='testimonials.headline']",
  "[data-editor-section-id='pricing']",
  "[data-editor-path='pricing.headline']",
  "[data-editor-section-id='faq']",
  "[data-editor-path='faq.headline']",
  "[data-editor-section-id='cta']",
  "[data-editor-path='cta.headline']",
  "[data-editor-path='cta.primary_cta']",
  "[data-editor-section-id='lead_form']",
  "[data-editor-path='lead_form.headline']",
  "[data-editor-path='lead_form.privacy']",
  "[data-editor-section-id='contacts']",
  "[data-editor-path='contacts.headline']",
  "[data-editor-path='contacts.address']",
  "[data-editor-section-id='footer']",
  "[data-editor-path='footer.description']",
  "[data-editor-path='footer.copyright']",
];

const HEADER_DEFAULTS = {
  sticky: true,
  logo: { mode: "text", text: "ЛОСК.", imageUrl: "", imageAlt: "Логотип", height: 28 },
  links: [
    { label: "Услуги", href: "#features" },
    { label: "Работы", href: "#gallery" },
    { label: "Цены", href: "#pricing" },
    { label: "Мастера", href: "#team" },
    { label: "Отзывы", href: "#testimonials" },
    { label: "Контакты", href: "#contacts" },
  ],
  cta: { enabled: true, label: "Записаться", href: "#lead_form" },
  phone: "+7 495 000-00-00",
};

function Nav() {
  const raw = (typeof window !== "undefined" && window.LP_SCHEMA && window.LP_SCHEMA.chrome && window.LP_SCHEMA.chrome.header) || {};
  const cfg = { ...HEADER_DEFAULTS, ...raw };
  const logo = { ...HEADER_DEFAULTS.logo, ...(raw.logo || {}) };
  const cta = { ...HEADER_DEFAULTS.cta, ...(raw.cta || {}) };
  const links = Array.isArray(raw.links) ? raw.links : HEADER_DEFAULTS.links;
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <React.Fragment>
      <header
        className={"site-header" + (scrolled ? " scrolled" : "")}
        id="top"
        data-editor-section-id="header"
        data-editor-section-type="header"
        data-editor-label="Header"
      >
        <div className="container nav">
          <a href="#top" className="brand">
            {logo.mode === "image" && logo.imageUrl ? <img src={logo.imageUrl} alt={logo.imageAlt || "Логотип"} style={{ height: (logo.height || 28) + "px" }} /> : <React.Fragment>ЛОСК<span>.</span></React.Fragment>}
          </a>
          <nav className="nav-links" aria-label="Основная навигация">
            {links.map((l, i) => (
              <a key={i} href={l.href}>{l.label}</a>
            ))}
          </nav>
          <div className="nav-right">
            <a href={"tel:" + (cfg.phone || HEADER_DEFAULTS.phone).replace(/[^\d+]/g, "")} className="nav-phone">{cfg.phone || HEADER_DEFAULTS.phone}</a>
            {cta.enabled ? <a href={cta.href} className="btn btn-primary nav-cta">{cta.label}</a> : null}
          </div>
          <button className={"burger" + (open ? " open" : "")} aria-label="Меню" onClick={() => setOpen((v) => !v)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        {links.map((l, i) => (
          <a key={i} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
        {cta.enabled ? <a href={cta.href} className="btn btn-primary" onClick={() => setOpen(false)}>{cta.label}</a> : null}
        <a href={"tel:" + (cfg.phone || HEADER_DEFAULTS.phone).replace(/[^\d+]/g, "")} className="mm-phone" onClick={() => setOpen(false)}>{cfg.phone || HEADER_DEFAULTS.phone}</a>
      </div>
    </React.Fragment>
  );
}

function HeroSection() {
  return (
    <section id="hero" className="hero" data-editor-section-id="hero" data-editor-section-type="hero" data-editor-variant="hero_split_media" data-editor-label="01 Hero">
      <div className="container hero-grid">
        <div className="hero-text reveal">
          <EditorSlot as="span" path="hero.eyebrow" type="text" className="eyebrow" hideable={true}>Студия красоты в центре города</EditorSlot>
          <EditorSlot as="h1" path="hero.headline" type="headline" required={true}>Ваша красота — в руках <em>лучших мастеров</em></EditorSlot>
          <EditorSlot as="p" path="hero.subheadline" type="multiline_text" className="hero-sub" required={true}>Маникюр, педикюр, окрашивание и уход полного цикла. Безупречная стерильность, премиальные материалы и атмосфера, в которую хочется возвращаться.</EditorSlot>
          <div className="hero-actions">
            <EditorSlot as="a" href="#lead_form" path="hero.primary_cta" type="button_text" className="btn btn-primary" required={true}>Записаться онлайн</EditorSlot>
            <EditorSlot as="a" href="#gallery" path="hero.secondary_cta" type="button_text" className="btn btn-ghost" hideable={true}>Смотреть работы</EditorSlot>
          </div>
          <div className="hero-trust">
            <div className="ht-item" data-editor-hide-target="hero.stats[0]">
              <EditorSlot as="span" path="hero.stats[0].value" type="stat_value" className="ht-num" hideable={true}>12 лет</EditorSlot>
              <EditorSlot as="span" path="hero.stats[0].label" type="text" className="ht-lbl" hideable={true}>на рынке красоты</EditorSlot>
            </div>
            <div className="divider"></div>
            <div className="ht-item" data-editor-hide-target="hero.stats[1]">
              <EditorSlot as="span" path="hero.stats[1].value" type="stat_value" className="ht-num" hideable={true}>9 000+</EditorSlot>
              <EditorSlot as="span" path="hero.stats[1].label" type="text" className="ht-lbl" hideable={true}>довольных клиентов</EditorSlot>
            </div>
            <div className="divider"></div>
            <div className="ht-item" data-editor-hide-target="hero.stats[2]">
              <EditorSlot as="span" path="hero.stats[2].value" type="stat_value" className="ht-num" hideable={true}>4.9</EditorSlot>
              <EditorSlot as="span" path="hero.stats[2].label" type="text" className="ht-lbl" hideable={true}>рейтинг на картах</EditorSlot>
            </div>
          </div>
        </div>
        <div className="hero-media reveal">
          <div className="ph" data-label="фото · интерьер салона / работа мастера"></div>
          <div className="hero-badge">
            <div className="hb-dot" aria-hidden="true">L</div>
            <EditorSlot as="div" path="hero.badge" type="text" className="hb-txt" hideable={true}><b>Запись за 1 минуту</b> онлайн в удобное время</EditorSlot>
          </div>
        </div>
      </div>
    </section>
  );
}

function BenefitsSection() {
  return (
    <section className="benefits" id="benefits" data-editor-section-id="benefits" data-editor-section-type="benefits" data-editor-variant="cards_4" data-editor-label="02 Benefits">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="benefits.eyebrow" type="text" className="eyebrow">Почему выбирают нас</EditorSlot>
          <EditorSlot as="h2" path="benefits.headline" type="headline" required={true}>Заботимся о каждой детали вашего визита</EditorSlot>
        </div>
        <div className="benefits-grid">
          {[
            ["benefits.items[0]", "Опытные мастера", "Каждый специалист с профильным образованием и стажем от 5 лет."],
            ["benefits.items[1]", "Стерильность", "Индивидуальные одноразовые наборы и стерилизация инструментов."],
            ["benefits.items[2]", "Премиальные материалы", "Работаем только на профессиональной косметике и проверенных брендах."],
            ["benefits.items[3]", "Удобная запись", "Онлайн-запись за минуту и гибкий график визитов."],
          ].map(([base, t, d], i) => (
            <article className="benefit reveal" key={base} data-editor-hide-target={base}>
              <EditorSlot as="h3" path={`${base}.title`} type="headline" hideable={true}>{t}</EditorSlot>
              <EditorSlot as="p" path={`${base}.description`} type="multiline_text" hideable={true}>{d}</EditorSlot>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturesSection() {
  const services = [
    ["Маникюр", "Классический, аппаратный и комбинированный.", "от 1 500 ₽"],
    ["Педикюр", "Аппаратный и SPA-педикюр с уходом за стопами.", "от 2 200 ₽"],
    ["Окрашивание волос", "Сложное окрашивание, тонирование, airtouch и шатуш.", "от 4 500 ₽"],
    ["Стрижки и укладки", "Женские и мужские стрижки, вечерние и повседневные укладки.", "от 1 800 ₽"],
    ["Брови и ресницы", "Архитектура и окрашивание бровей, ламинирование и наращивание.", "от 1 200 ₽"],
    ["Уход за лицом", "Чистка, пилинги и уходовые комплексы.", "от 2 800 ₽"],
  ];
  return (
    <section className="services" id="features" data-editor-section-id="features" data-editor-section-type="features" data-editor-variant="cards_6" data-editor-label="03 Features">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="features.eyebrow" type="text" className="eyebrow">Услуги</EditorSlot>
          <EditorSlot as="h2" path="features.headline" type="headline" required={true}>Полный спектр процедур под одной крышей</EditorSlot>
          <EditorSlot as="p" path="features.subheadline" type="multiline_text">От классического маникюра до сложного окрашивания — всё, чтобы вы выглядели и чувствовали себя безупречно.</EditorSlot>
        </div>
        <div className="services-grid">
          {services.map((item, i) => (
            <article className="service reveal" key={i} data-editor-hide-target={`features.items[${i}]`}>
              <div className="ph" data-label="фото услуги"></div>
              <div className="service-body">
                <EditorSlot as="h3" path={`features.items[${i}].title`} type="headline" hideable={true}>{item[0]}</EditorSlot>
                <EditorSlot as="p" path={`features.items[${i}].description`} type="multiline_text" hideable={true}>{item[1]}</EditorSlot>
                <EditorSlot as="div" path={`features.items[${i}].price`} type="text" hideable={true}>{item[2]}</EditorSlot>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function GallerySection() {
  const [active, setActive] = React.useState(0);
  return (
    <section className="gallery" id="gallery" data-editor-section-id="gallery" data-editor-section-type="gallery" data-editor-variant="masonry_placeholder" data-editor-label="04 Gallery">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="gallery.eyebrow" type="text" className="eyebrow">Наши работы</EditorSlot>
          <EditorSlot as="h2" path="gallery.headline" type="headline" required={true}>Результат говорит сам за себя</EditorSlot>
        </div>
        <div className="gallery-filters reveal">
          {["Все", "Маникюр", "Окрашивание", "Брови"].map((label, i) => (
            <button key={label} className={"chip" + (active === i ? " active" : "")} onClick={() => setActive(i)}>{label}</button>
          ))}
        </div>
        <div className="gallery-grid reveal">
          <div className="ph g-wide" data-label="фото работ 1"></div>
          <div className="ph g-tall" data-label="фото работ 2"></div>
          <div className="ph" data-label="фото работ 3"></div>
          <div className="ph" data-label="фото работ 4"></div>
          <div className="ph g-tall" data-label="фото работ 5"></div>
          <div className="ph g-wide" data-label="фото работ 6"></div>
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  return (
    <section className="process" id="process" data-editor-section-id="process" data-editor-section-type="process" data-editor-variant="steps_4" data-editor-label="05 Process">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="process.eyebrow" type="text" className="eyebrow">Как мы работаем</EditorSlot>
          <EditorSlot as="h2" path="process.headline" type="headline" required={true}>Простой путь к вашему преображению</EditorSlot>
        </div>
        <div className="process-grid">
          {["Запись", "Консультация", "Процедура", "Уход и запись"].map((title, i) => (
            <article className="step reveal" key={i} data-editor-hide-target={`process.items[${i}]`}>
              <div className="step-num">Шаг 0{i + 1}</div>
              <div className="step-line"></div>
              <EditorSlot as="h3" path={`process.items[${i}].title`} type="headline" hideable={true}>{title}</EditorSlot>
              <EditorSlot as="p" path={`process.items[${i}].description`} type="multiline_text" hideable={true}>Описание шага работы с клиентом.</EditorSlot>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamSection() {
  return (
    <section className="team" id="team" data-editor-section-id="team" data-editor-section-type="team" data-editor-variant="cards_4" data-editor-label="06 Team">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="team.eyebrow" type="text" className="eyebrow">Мастера</EditorSlot>
          <EditorSlot as="h2" path="team.headline" type="headline" required={true}>Команда, которой доверяют</EditorSlot>
        </div>
        <div className="team-grid">
          {["Анна Сергеева", "Мария Котова", "Елена Власова", "Ольга Демина"].map((name, i) => (
            <article className="master reveal" key={i} data-editor-hide-target={`team.items[${i}]`}>
              <div className="ph" data-label="фото мастера"></div>
              <div className="master-body">
                <EditorSlot as="h3" path={`team.items[${i}].name`} type="headline" hideable={true}>{name}</EditorSlot>
                <EditorSlot as="p" path={`team.items[${i}].role`} type="text" hideable={true}>Специалист салона</EditorSlot>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  return (
    <section className="testimonials" id="testimonials" data-editor-section-id="testimonials" data-editor-section-type="testimonials" data-editor-variant="cards_3" data-editor-label="07 Testimonials">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="testimonials.eyebrow" type="text" className="eyebrow">Отзывы</EditorSlot>
          <EditorSlot as="h2" path="testimonials.headline" type="headline" required={true}>Что говорят наши клиенты</EditorSlot>
        </div>
        <div className="tst-grid">
          {[0, 1, 2].map((i) => (
            <article className="tst reveal" key={i} data-editor-hide-target={`testimonials.items[${i}]`}>
              <EditorSlot as="blockquote" path={`testimonials.items[${i}].quote`} type="multiline_text" hideable={true}>«Отличный сервис, комфортная атмосфера и отличный результат.»</EditorSlot>
              <EditorSlot as="p" path={`testimonials.items[${i}].author`} type="text" hideable={true}>Клиент салона</EditorSlot>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingSection() {
  return (
    <section className="pricing" id="pricing" data-editor-section-id="pricing" data-editor-section-type="pricing" data-editor-variant="plans_3" data-editor-label="08 Pricing">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="pricing.eyebrow" type="text" className="eyebrow">Цены</EditorSlot>
          <EditorSlot as="h2" path="pricing.headline" type="headline" required={true}>Прозрачная стоимость без сюрпризов</EditorSlot>
        </div>
        <div className="price-cols">
          {["Ногтевой сервис", "Волосы", "Лицо и взгляд"].map((plan, i) => (
            <article className="price-card reveal" key={i} data-editor-hide-target={`pricing.plans[${i}]`}>
              <EditorSlot as="h3" path={`pricing.plans[${i}].title`} type="headline" hideable={true}>{plan}</EditorSlot>
              <EditorSlot as="p" path={`pricing.plans[${i}].price`} type="text" hideable={true}>от 1 500 ₽</EditorSlot>
              <EditorSlot as="a" href="#lead_form" path={`pricing.plans[${i}].cta`} type="button_text" className="btn btn-ghost btn-block" hideable={true}>Записаться</EditorSlot>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  const faq = [
    "Нужно ли записываться заранее?",
    "Как обеспечивается стерильность?",
    "Можно ли прийти со своим дизайном?",
    "Сколько длится сложное окрашивание?",
  ];
  return (
    <section className="faq" id="faq" data-editor-section-id="faq" data-editor-section-type="faq" data-editor-variant="accordion" data-editor-label="09 FAQ">
      <div className="container faq-wrap">
        <div className="section-head reveal" style={{ marginBottom: 0 }}>
          <EditorSlot as="span" path="faq.eyebrow" type="text" className="eyebrow">Вопросы и ответы</EditorSlot>
          <EditorSlot as="h2" path="faq.headline" type="headline" required={true}>Частые вопросы</EditorSlot>
        </div>
        <div className="faq-list reveal">
          {faq.map((q, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i} data-editor-hide-target={`faq.items[${i}]`}>
              <button className="faq-q" onClick={() => setOpen((v) => (v === i ? -1 : i))}>
                <EditorSlot as="span" path={`faq.items[${i}].question`} type="text" hideable={true}>{q}</EditorSlot>
                <span className="faq-icon" aria-hidden="true">+</span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? "220px" : "0px" }}>
                <EditorSlot as="p" path={`faq.items[${i}].answer`} type="multiline_text" hideable={true}>Ответ на частый вопрос клиента салона.</EditorSlot>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaSection() {
  return (
    <section className="cta" id="cta" data-editor-section-id="cta" data-editor-section-type="cta" data-editor-variant="centered_dark" data-editor-label="10 CTA">
      <div className="container">
        <div className="cta-inner reveal">
          <EditorSlot as="h2" path="cta.headline" type="headline" required={true}>Подарите себе час заботы и красоты</EditorSlot>
          <EditorSlot as="p" path="cta.subheadline" type="multiline_text">Запишитесь онлайн прямо сейчас и получите приветственную скидку 15% на первый визит.</EditorSlot>
          <EditorSlot as="a" href="#lead_form" path="cta.primary_cta" type="button_text" className="btn btn-light" required={true}>Записаться со скидкой</EditorSlot>
        </div>
      </div>
    </section>
  );
}

function LeadFormSection() {
  const [ok, setOk] = React.useState(false);
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [nameErr, setNameErr] = React.useState(false);
  const [phoneErr, setPhoneErr] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    const n = !name.trim();
    const p = !phone.trim();
    setNameErr(n);
    setPhoneErr(p);
    if (!n && !p) setOk(true);
  };
  return (
    <section className="lead" id="lead_form" data-editor-section-id="lead_form" data-editor-section-type="lead_form" data-editor-variant="split_with_form" data-editor-label="11 Lead Form">
      <div className="container lead-grid">
        <div className="lead-aside reveal">
          <EditorSlot as="h2" path="lead_form.headline" type="headline" required={true}>Запишитесь на удобное время</EditorSlot>
          <EditorSlot as="p" path="lead_form.subheadline" type="multiline_text">Оставьте заявку — администратор перезвонит в течение 15 минут.</EditorSlot>
        </div>
        <div className="lead-form reveal">
          {!ok ? (
            <form
              onSubmit={onSubmit}
              noValidate
              data-pagey-lead-form
              data-pagey-form-id="lead_form_main"
              data-pagey-form-name="lead_form_main"
            >
              <div className="field">
                <label htmlFor="f-name">Ваше имя</label>
                <input id="f-name" name="name" value={name} onChange={(e) => setName(e.target.value)} style={{ borderColor: nameErr ? "#c0584f" : "" }} />
              </div>
              <div className="field">
                <label htmlFor="f-phone">Телефон</label>
                <input id="f-phone" name="phone" value={phone} onChange={(e) => setPhone(e.target.value)} style={{ borderColor: phoneErr ? "#c0584f" : "" }} />
              </div>
              <button type="submit" className="btn btn-primary btn-block">Отправить заявку</button>
              <EditorSlot as="p" path="lead_form.privacy" type="text" className="form-privacy">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности.</EditorSlot>
            </form>
          ) : null}
          <div className={"form-success" + (ok ? " show" : "")}>
            <h3>Заявка отправлена!</h3>
            <p>Мы перезвоним вам в течение 15 минут, чтобы подтвердить запись.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactsSection() {
  return (
    <section className="contacts" id="contacts" data-editor-section-id="contacts" data-editor-section-type="contacts" data-editor-variant="split_info_map" data-editor-label="12 Contacts">
      <div className="container">
        <div className="section-head reveal">
          <EditorSlot as="span" path="contacts.eyebrow" type="text" className="eyebrow">Контакты</EditorSlot>
          <EditorSlot as="h2" path="contacts.headline" type="headline" required={true}>Будем рады видеть вас</EditorSlot>
        </div>
        <div className="contacts-grid">
          <div className="contacts-info reveal">
            <EditorSlot as="p" path="contacts.address" type="text">ул. Тверская, 18</EditorSlot>
            <EditorSlot as="p" path="contacts.hours" type="text">Ежедневно 9:00 — 21:00</EditorSlot>
            <EditorSlot as="p" path="contacts.phone" type="phone">+7 495 000-00-00</EditorSlot>
          </div>
          <div className="contacts-map reveal">
            <div className="ph" data-label="карта · схема проезда"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FooterSection() {
  return (
    <footer className="site-footer" data-editor-section-id="footer" data-editor-section-type="footer" data-editor-variant="footer_columns" data-editor-label="13 Footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand">ЛОСК<span style={{ color: "var(--accent)" }}>.</span></div>
            <EditorSlot as="p" path="footer.description" type="multiline_text" hideable={true}>Студия красоты полного цикла. Маникюр, педикюр, окрашивание и уход за собой в центре города.</EditorSlot>
          </div>
          <div className="footer-col"><h4>Услуги</h4></div>
          <div className="footer-col"><h4>Навигация</h4></div>
          <div className="footer-col"><h4>Контакты</h4></div>
        </div>
        <div className="footer-bottom">
          <EditorSlot as="span" path="footer.copyright" type="text">© 2026 Студия красоты «ЛОСК». Все права защищены.</EditorSlot>
          <EditorSlot as="span" path="footer.privacy" type="text" hideable={true}>Политика конфиденциальности</EditorSlot>
        </div>
      </div>
    </footer>
  );
}