/* ============================================================
   layout.jsx - header, hero, about, legal, footer
   ============================================================ */

function safeArray(value) {
  return Array.isArray(value) ? value : [];
}

function Brand({ footer, identity = {} }) {
  return (
    <div className={"brand" + (footer ? " footer__brand" : "")}>
      <span className="brand__mark" />
      <span>
        <span className="brand__name">{identity.brand || "Camille Roussel"}</span>{" "}
        <span className="brand__sub">— {identity.brandSuffix || identity.shortTitle || "M.K. D.E."}</span>
      </span>
    </div>
  );
}

function Header({ content = {} }) {
  const identity = content.identity || {};
  const nav = safeArray(content.nav);

  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <a href="#top" aria-label={`${identity.brand || "Accueil"} - accueil`}>
          <Brand identity={identity} />
        </a>
        <nav className="nav__links">
          {nav.map((item) => (
            <a className="nav__link" href={item.href || "#"} key={`${item.label}-${item.href}`}>
              {item.label}
            </a>
          ))}
        </nav>
        <div className="nav__cta">
          <span className="pill"><span className="dot" />{identity.status || "Disponible"}</span>
          <a href="#disponibilites" className="btn btn--dark">
            Réserver
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ content = {} }) {
  const identity = content.identity || {};
  const hero = content.hero || {};
  const metrics = safeArray(hero.metrics);

  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero__grid">
          <div style={{ alignSelf: "start", marginTop: "clamp(16px, 3.5vh, 40px)" }}>
            <p className="eyebrow reveal">{hero.eyebrow}</p>
            <h1 className="display" style={{ marginTop: 20, minHeight: "2.9em", fontSize: "40px" }}>
              {hero.title || ""}
            </h1>
            <p className="lead hero__lead reveal" style={{ transitionDelay: ".1s" }}>
              {hero.lede}
            </p>
            <div className="hero__actions reveal" style={{ transitionDelay: ".15s" }}>
              <a href={hero.primaryUrl || "#disponibilites"} className="btn btn--primary btn--lg">
                {hero.primaryCta || "Voir mes disponibilités"} <Arrow />
              </a>
              <button className="btn btn--ghost btn--lg" onClick={downloadContractPDF}>
                {hero.secondaryCta || "Contrat type (PDF)"}
              </button>
            </div>
          </div>

          <aside className="hero__portrait reveal reveal--right" style={{ transitionDelay: ".12s" }}>
            <div className="portrait-logo">
              <span className="portrait-logo__mark" />
              <span className="portrait-logo__txt">
                <span className="portrait-logo__name">{identity.cabinet || identity.brand}</span>
                <span className="portrait-logo__tag">{hero.cabinetTag || identity.area}</span>
              </span>
            </div>
            {hero.portrait ? (
              <img className="portrait-img" src={hero.portrait} alt={hero.portraitAlt || identity.brand || ""} />
            ) : (
              <div
                className="portrait-img"
                style={{
                  display: "grid",
                  placeItems: "center",
                  background: "linear-gradient(135deg, var(--paper-2), var(--paper-3))",
                  color: "var(--ink-3)",
                  fontSize: 13,
                  letterSpacing: ".08em",
                  textTransform: "uppercase",
                }}
              >
                {hero.portraitPlaceholder || "Portrait"}
              </div>
            )}
            <div className="portrait-name">
              <span className="portrait-name__txt">
                <span className="portrait-name__n">{identity.brand}</span>
                <span className="portrait-name__r">{identity.title}</span>
              </span>
              <span className="pill" style={{ flex: "none" }}><span className="dot" />{identity.status || "Dispo."}</span>
            </div>
          </aside>
        </div>

        <div className="metastrip reveal" style={{ transitionDelay: ".2s" }}>
          {metrics.map((item) => (
            <div className="metastrip__item" key={`${item.label}-${item.value}`}>
              <div className="k">{item.label}</div>
              <div className="v">{item.value}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ content = {} }) {
  const specialties = safeArray(content.specialties);
  const stats = safeArray(content.stats);

  return (
    <section className="section section--alt" id="apropos">
      <div className="wrap">
        <SectionLabel num={content.sectionNumber || "03"} title={content.sectionTitle || "À propos"} />
        <div className="about-grid">
          <div className="about__bio reveal">
            <h2 className="h2">{content.title}</h2>
            <div style={{ marginTop: 22 }}>
              {safeArray(content.paragraphs).map((paragraph) => (
                <p key={paragraph}>{paragraph}</p>
              ))}
            </div>
            <div className="specs">
              {specialties.map((item, index) => (
                <div className="spec" key={`${item.title}-${index}`}>
                  <span className="spec__n">{String(index + 1).padStart(2, "0")}</span>
                  <span>
                    <span className="spec__t">{item.title}</span>
                    <div className="spec__d">{item.text}</div>
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div className="reveal reveal--right" style={{ transitionDelay: ".08s" }}>
            <div className="statgrid">
              {stats.map((item, index) => {
                const numeric = Number(String(item.value || "").replace(",", "."));
                const useCounter = Number.isFinite(numeric) && !String(item.suffix || "").includes("%");
                return (
                  <div className="stat" key={`${item.label}-${index}`}>
                    <div className="stat__v tnum">
                      {useCounter ? <Counter to={numeric} suffix={item.suffix || ""} /> : <>{item.value}<small>{item.suffix}</small></>}
                    </div>
                    <div className="stat__k">{item.label}</div>
                  </div>
                );
              })}
            </div>
            <div style={{ border: "1px solid var(--line)", borderTop: 0, padding: "24px" }}>
              <div className="legal__k">{content.mobilityTitle}</div>
              <p className="legal__v">{content.mobilityText}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Legal({ content = {} }) {
  return (
    <section className="section" id="legal">
      <div className="wrap">
        <SectionLabel num={content.sectionNumber || "04"} title={content.sectionTitle || "Mentions légales"} />
        <div className="legal-grid">
          {safeArray(content.items).map((item, index) => (
            <div className={"legal__item reveal" + (index % 2 ? " reveal--right" : "")} key={`${item.label}-${index}`}>
              <div className="legal__k">{item.label}</div>
              <div className="legal__v">{item.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ content = {} }) {
  const identity = content.identity || {};
  const footer = content.footer || {};
  const nav = safeArray(content.nav);

  return (
    <React.Fragment>
      <footer className="footer">
        <div className="wrap">
          <div className="footer__top">
            <div style={{ maxWidth: 320 }}>
              <Brand footer identity={identity} />
              <p style={{ color: "rgba(255,255,255,.6)", marginTop: 16, fontSize: 14, lineHeight: 1.55 }}>
                {footer.description}
              </p>
              <span className="pill" style={{ marginTop: 18, borderColor: "rgba(255,255,255,.2)", color: "rgba(255,255,255,.85)" }}>
                <span className="dot" />{identity.statusLong || identity.status}
              </span>
            </div>
            <div className="footer__links">
              <div className="footer__col">
                <span className="k">Navigation</span>
                {nav.map((item) => (
                  <a href={item.href || "#"} key={`${item.label}-${item.href}`}>{item.label}</a>
                ))}
              </div>
              <div className="footer__col">
                <span className="k">Contact</span>
                <a href={`mailto:${identity.email}`}>{identity.email}</a>
                <a href={`tel:${String(identity.phone || "").replace(/\s/g, "")}`} className="tnum">{identity.phone}</a>
                <span className="tnum">{identity.area || identity.city}</span>
              </div>
            </div>
          </div>
          <div className="footer__bottom">
            <span>{content.legal?.copyright}</span>
            <span>{footer.designLine}</span>
          </div>
        </div>
      </footer>
      <MobileFooterNav identity={identity} />
    </React.Fragment>
  );
}

function MobileFooterNav({ identity = {} }) {
  return (
    <nav className="mobile-footer-nav" aria-label="Action rapide">
      <span className="mobile-footer-nav__status">
        <span className="dot" />
        <span>{identity.status || "Disponible"}</span>
      </span>
      <a href="#disponibilites" className="mobile-footer-nav__cta">
        Réserver
      </a>
    </nav>
  );
}

Object.assign(window, { Header, Hero, About, Legal, Footer });