/* global React */
const { useState, useEffect } = React;

const WA_MAIN = "5511910005445";
const WA_ESSANS = "5511910003093";
const WA_NATUS = "551140323957";
const WA_MSG = encodeURIComponent("Olá, Dra. Carolina! Gostaria de marcar uma consulta.");

const waLink = (n) => `https://wa.me/${n}?text=${WA_MSG}`;

// ---------- shared icons ----------
const WAIcon = () =>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.4-1.5-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 1.8.7 2.5.8 3.4.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.1-1.3c1.5.8 3.2 1.3 4.9 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z" />
  </svg>;


const ArrowDown = () =>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M7 2v10M3 8l4 4 4-4" />
  </svg>;


// ---------- Real photo ----------
const Photo = ({ src, alt, position = "center" }) =>
<div className="photo">
    <img src={src} alt={alt} loading="lazy" style={{ objectPosition: position }} />
  </div>;


// ---------- Brand mark (real logo) ----------
const BrandMark = ({ size = 44, dark = false }) =>
<div className="brand-mark" style={{ width: size, height: size * 0.43 }}>
    <img
    src="assets/logo-cp.png"
    alt="Carolina Paulillo"
    style={{ width: "100%", height: "100%", objectFit: "contain", filter: dark ? "none" : "none" }} />
  
  </div>;


// Brand variants — each compact, hierarchical
const Brand = ({ inFooter = false, variant = "minimal" }) => {
  const cls = `brand brand--${variant} ${inFooter ? "brand-on-dark" : ""}`;
  const markSize = inFooter ? 84 : 64;

  if (variant === "minimal") {
    // A. Apenas Nome + CRM. Specs nunca aparecem aqui.
    return (
      <a href="#top" className={cls} aria-label="Carolina Paulillo">
        <BrandMark size={markSize} />
        <div className="brand-text">
          <span className="brand-name">Carolina Paulillo</span>
          <span className="brand-crm">CRM 125346</span>
        </div>
      </a>);

  }

  if (variant === "single-line") {
    // B. Nome + linha única "Nutrologia · CRM 125346" (sem specs longas no header)
    return (
      <a href="#top" className={cls} aria-label="Carolina Paulillo">
        <BrandMark size={markSize} />
        <div className="brand-text">
          <span className="brand-name">Carolina Paulillo</span>
          <span className="brand-sub">Nutrologia <span className="brand-dim">·</span> CRM 125346</span>
        </div>
      </a>);

  }

  if (variant === "stack") {
    // C. Lockup vertical com divisor: nome em cima, microtipo "Médica nutróloga" + CRM
    return (
      <a href="#top" className={cls} aria-label="Carolina Paulillo">
        <BrandMark size={markSize} />
        <div className="brand-text">
          <span className="brand-name">Carolina Paulillo</span>
          <span className="brand-divider" aria-hidden="true"></span>
          <span className="brand-role">Médica nutróloga · CRM 125346</span>
        </div>
      </a>);

  }

  // "split" — nome + CRM | divisor vertical | specs empilhadas
  return (
    <a href="#top" className={cls} aria-label="Carolina Paulillo">
      <BrandMark size={markSize} />
      <div className="brand-text">
        <span className="brand-namegroup">
          <span className="brand-name">Carolina Paulillo</span>
          <span className="brand-crm">CRM 125346</span>
        </span>
        <span className="brand-vrule" aria-hidden="true"></span>
        <span className="brand-stack">
          <span className="brand-role">Nutrologia</span>
          <span className="brand-role">Medicina do estilo de vida</span>
          <span className="brand-role">Medicina de precisão</span>
        </span>
      </div>
    </a>);

};

// ---------- Header ----------
const Header = ({ brandStyle = "minimal" }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""}`} id="top">
      <div className="container">
        <Brand variant={brandStyle} />
        <nav className="nav">
          <a href="#abordagem">Abordagem</a>
          <a href="#areas">Áreas</a>
          <a href="#sobre">Sobre</a>
          <a href="#consultorios">Consultórios</a>
          <a href={waLink(WA_MAIN)} target="_blank" rel="noopener" className="btn btn-primary">
            Marcar consulta
          </a>
        </nav>
      </div>
    </header>);

};

// ---------- Hero ----------
const Hero = ({ photoLeft }) => {
  const photoEl =
  <div className="hero-photo">
      <img src="assets/photos/hero.jpg" alt="Dra. Carolina Paulillo, médica nutróloga, em sessão de retrato" loading="eager" />
    </div>;

  const textEl =
  <div>
      <div className="eyebrow hero-eyebrow">
</div>
      <h1>
        Antes de prescrever,<br />
        eu pergunto <span className="italic-accent">por quê.</span>
      </h1>
      <p className="lead">
        Nutrologia e medicina do estilo de vida em uma prática contínua, em São Paulo,
        Bragança Paulista e online. Acompanhamento que começa na escuta —
        e segue no cotidiano.
      </p>
      <div className="hero-ctas">
        <a href={waLink(WA_MAIN)} target="_blank" rel="noopener" className="btn btn-primary">
          Marcar consulta
        </a>
        <a href="#abordagem" className="btn btn-ghost">
          Conhecer a abordagem <ArrowDown />
        </a>
      </div>
    </div>;
  return (
    <section className="hero">
      <div className="container">
        {photoLeft ? <>{photoEl}{textEl}</> : <>{textEl}{photoEl}</>}
      </div>
    </section>);

};

// ---------- Credentials ----------
const Credentials = () =>
<section className="credentials">
    <div className="container">
      <div className="credentials-list">
        <div className="credentials-item">Einstein <small>Fellowship</small></div>
        <div className="credentials-item">IBLM | CBMEV <small>Certificada</small></div>
        <div className="credentials-item">IPq · HCFMUSP <small>PROMEV</small></div>
        <div className="credentials-item">{"\n"}<small></small></div>
      </div>
      <div className="credentials-est">est · 2006</div>
    </div>
  </section>;


// ---------- Editorial gallery strip ----------
const Gallery = () => null;

window.SiteCore = { Header, Hero, Credentials, Gallery, Photo, Brand, BrandMark, WAIcon, ArrowDown, waLink, WA_MAIN, WA_ESSANS, WA_NATUS };