// shared.jsx — Header, Footer, AnnouncementBar, WhatsAppFloat, Icon, Button, Placeholder

// ── Icon (Lucide-style line icons inlined as SVG) ──────────────────────────
const Icon = ({ name, size = 20, ...rest }) => {
  const paths = {
    menu: <><path d="M4 6h16" /><path d="M4 12h16" /><path d="M4 18h16" /></>,
    close: <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>,
    plus: <><path d="M12 5v14" /><path d="M5 12h14" /></>,
    arrow: <><path d="M5 12h14" /><path d="m13 5 7 7-7 7" /></>,
    arrowR: <><path d="M7 17 17 7" /><path d="M8 7h9v9" /></>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 7-10 5L2 7" /></>,
    pin: <><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></>,
    clock: <><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></>,
    chat: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />,
    wa: <path d="M17.6 6.32A7.85 7.85 0 0 0 12.05 4 7.94 7.94 0 0 0 5.18 15.92L4 20l4.18-1.1a7.93 7.93 0 0 0 3.87 1h.01A7.93 7.93 0 0 0 20 12a7.86 7.86 0 0 0-2.4-5.68zM12.05 18.6a6.5 6.5 0 0 1-3.36-.92l-.24-.14-2.48.65.66-2.42-.16-.25a6.55 6.55 0 0 1-.99-3.49 6.6 6.6 0 0 1 11.27-4.66 6.51 6.51 0 0 1 1.93 4.66 6.6 6.6 0 0 1-6.63 6.57zm3.62-4.92c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1-.13.2-.5.64-.62.78-.11.13-.23.15-.43.05a5.4 5.4 0 0 1-1.59-.98 6 6 0 0 1-1.1-1.37c-.12-.2-.01-.31.09-.41.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.07-.13.03-.25-.02-.35-.05-.1-.45-1.07-.61-1.47-.16-.39-.33-.34-.45-.34h-.38c-.13 0-.34.05-.51.25s-.67.65-.67 1.59c0 .94.69 1.85.79 1.97.1.13 1.36 2.07 3.3 2.9.46.2.82.32 1.1.4.46.15.88.13 1.21.08.37-.05 1.17-.48 1.33-.94.16-.46.16-.86.12-.94-.05-.08-.18-.13-.38-.23z" />,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></>,
    facebook: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />,
    linkedin: <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></>,
    youtube: <><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" /><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" /></>,
    sparkle: <path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" />,
    heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />,
    leaf: <><path d="M11 20A7 7 0 0 1 4 13c0-2.5 1.43-5.42 4.29-8.78A33.06 33.06 0 0 1 13 1c.96 4.5 1.5 8 1.5 10.5 0 4-1.5 8.5-3.5 8.5" /><path d="M11 20s.81-7.43 6-12" /></>,
    flask: <><path d="M9 2v6L4 18a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3L15 8V2" /><path d="M9 2h6" /><path d="M6 14h12" /></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></>,
    book: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></>,
    check: <polyline points="20 6 9 17 4 12" />,
    star: <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" />,
    search: <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></>,
    droplet: <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /></>,
    feather: <><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z" /><line x1="16" y1="8" x2="2" y2="22" /><line x1="17.5" y1="15" x2="9" y2="15" /></>
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} className="icon" {...rest}>
      {paths[name]}
    </svg>);

};

// ── Button ─────────────────────────────────────────────────────────────────
const Btn = ({ variant = "primary", size = "md", children, onClick, type, icon, iconRight, ...rest }) =>
<button type={type || "button"} onClick={onClick}
className={`btn btn--${variant} btn--${size}`} {...rest}>
    {icon && <Icon name={icon} size={16} />}
    {children}
    {iconRight && <Icon name={iconRight} size={16} />}
  </button>;


// ── Placeholder image (for when we don't have real photos) ─────────────────
const PhotoPlaceholder = ({ label, ratio = "1/1", style }) =>
<div className="placeholder-img" style={{ aspectRatio: ratio, ...style }}>
    <div className="placeholder-img__inner">
      <img src="assets/symbol-rosa.png" alt="" aria-hidden="true" />
      <span>{label}</span>
    </div>
  </div>;


// ── Announcement bar ───────────────────────────────────────────────────────
const AnnouncementBar = () =>
<div className="bar">
    <div className="bar__inner">
      <span><span className="bar__pill">Novidade</span>&nbsp;&nbsp;Programa Pele&Tempo · avaliação personalizada</span>
      <span>(62) 3213-3721&nbsp;·&nbsp;<a href="#contato">Goiânia — GO</a></span>
    </div>
  </div>;


// ── Header ─────────────────────────────────────────────────────────────────
const NAV_ITEMS = [
{ id: "home", label: "Início" },
{ id: "sobre", label: "A Clínica" },
{ id: "servicos", label: "Serviços" },
{ id: "equipe", label: "Equipe" },
{ id: "blog", label: "Artigos" },
{ id: "resultados", label: "Resultados" },
{ id: "contato", label: "Contato" }];


const Header = ({ page, navigate }) => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const close = () => setOpen(false);

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

  return (
    <>
      <header className={"hdr" + (scrolled ? " hdr--compact" : " hdr--expanded")}>
        <div className="hdr__inner">
          <button className="hdr__logo" onClick={() => navigate("home")} aria-label="Início">
            <img src="assets/logo-horizontal.png" alt="Clínica Longevidade e Saúde" />
          </button>
          <nav className="hdr__nav">
            {NAV_ITEMS.map((item) =>
            <button key={item.id}
            data-active={page === item.id ? "1" : "0"}
            onClick={() => navigate(item.id)}>
                {item.label}
              </button>
            )}
          </nav>
          <div className="hdr__cta">
            <a className="hdr__phone" href="tel:+556232133721">
              <Icon name="phone" size={16} />
              (62) 3213-3721
            </a>
            <Btn variant="primary" size="sm" onClick={() => navigate("agendamento")}
            icon="calendar">
              Agendar
            </Btn>
            <button className="hdr__menu" onClick={() => setOpen(true)} aria-label="Menu">
              <Icon name="menu" size={20} />
              <span className="hdr__menu-label">MENU</span>
            </button>
          </div>
        </div>
      </header>
      {open &&
      <div className="menu-drawer" onClick={close}>
          <div className="menu-drawer__panel" onClick={(e) => e.stopPropagation()}>
            <div className="menu-drawer__head">
              <img src="assets/logo-horizontal.png" alt="" />
              <button className="menu-drawer__close" onClick={close} aria-label="Fechar menu">
                <Icon name="arrow" size={14} style={{transform:"rotate(180deg)"}}/>
                <span>Fechar</span>
              </button>
            </div>
            <nav className="menu-drawer__nav">
              {NAV_ITEMS.map((item) =>
            <button key={item.id}
            onClick={() => {navigate(item.id);close();}}>
                  {item.label}
                </button>
            )}
            </nav>
            <div className="menu-drawer__foot">
              <Btn variant="primary" size="md" icon="calendar"
            onClick={() => {navigate("agendamento");close();}}>
                Agendar avaliação
              </Btn>
              <Btn variant="outline" size="md" icon="wa"
            onClick={() => window.open("https://wa.me/5562991323402", "_blank")}>
                WhatsApp
              </Btn>
            </div>
          </div>
        </div>
      }
    </>);

};

// ── WhatsApp Float ─────────────────────────────────────────────────────────
const WhatsAppFloat = () =>
<button className="wa-float" aria-label="Conversar no WhatsApp"
onClick={() => window.open("https://wa.me/5562991323402", "_blank")}>
    <Icon name="wa" size={38} />
  </button>;


// ── Footer ─────────────────────────────────────────────────────────────────
const Footer = ({ navigate }) =>
<footer className="ftr" id="contato-rodape">
    <div className="ftr__inner">
      <div className="ftr__brand">
        <img src="assets/logo-vertical-negativo.png" alt="Clínica Longevidade e Saúde" />
        <p>Saúde feminina com abordagem integrada — metabolismo, hormônios e longevidade. Tratar a causa muda tudo.</p>
        <div className="ftr__social">
          <a href="https://www.instagram.com/clinicalongevidadeesaude/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
          <a href="https://www.facebook.com/clinicalongevidadeesaude" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><Icon name="facebook" size={18} /></a>
          <a href="https://www.youtube.com/@dra.neusabrisolla" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><Icon name="youtube" size={18} /></a>
        </div>
      </div>
      <div className="ftr__swipe-wrap">
        <div className="ftr__cols">
          <div>
            <h5>Clínica</h5>
            <ul>
              <li><button onClick={() => navigate("sobre")}>A clínica</button></li>
              <li><button onClick={() => navigate("equipe")}>Dra. Neusa</button></li>
              <li><button onClick={() => navigate("blog")}>Artigos</button></li>
            </ul>
          </div>
          <div>
            <h5>Tratamentos</h5>
            <ul>
              <li><button onClick={() => navigate("servicos")}>Terapia capilar</button></li>
              <li><button onClick={() => navigate("servicos")}>Metabolismo & emagrecimento</button></li>
              <li><button onClick={() => navigate("servicos")}>Hormônios</button></li>
              <li><button onClick={() => navigate("servicos")}>Análise de sangue vivo</button></li>
            </ul>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li><a href="#">Rua 25-A esq. Rua 6-A,<br/>Qd 59-A, Lt 14</a></li>
              <li><a href="#">Goiânia · GO</a></li>
              <li><a href="tel:+556232133721">(62) 3213-3721</a></li>
              <li><a href="mailto:atendimento.clinicalongevidade@gmail.com" style={{fontSize:"11.5px",letterSpacing:"-.01em"}}>atendimento.clinicalongevidade@gmail.com</a></li>
            </ul>
          </div>
          <div>
            <h5>Atendimento</h5>
            <ul>
              <li><a href="https://wa.me/5562991323402" target="_blank">WhatsApp<br/>(62) 99132-3402</a></li>
              <li><a href="https://instagram.com/clinicalongevidadeesaude" target="_blank">@clinicalongevidade<wbr/>esaude</a></li>
              <li><button onClick={() => navigate("agendamento")}>Agendar avaliação</button></li>
            </ul>
          </div>
        </div>
        <p className="ftr__swipe-hint">
          <Icon name="arrow" size={11} style={{transform:"rotate(180deg)"}}/>
          <span>deslize para ver mais</span>
          <Icon name="arrow" size={11}/>
        </p>
      </div>
    </div>
    <div className="ftr__legal">
      <span>© {new Date().getFullYear()} Clínica Longevidade e Saúde · Todos os direitos reservados</span>
      <span>Responsável técnica: Dra. Neusa Brisolla · Goiânia · Política de Privacidade</span>
    </div>
  </footer>;


Object.assign(window, { Icon, Btn, PhotoPlaceholder, AnnouncementBar, Header, Footer, WhatsAppFloat });