/* hero.jsx */

function Hero({ onBookClick }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-utility">
          <span>Montería · Córdoba, Colombia</span>
          <span>Consultas con cita previa · Lun–Sáb</span>
          <span>+57 301 308 3210</span>
        </div>

        <div className="hero-grid">
          <div>
            <Reveal>
              <div className="hero-eyebrow-row">
                <Eyebrow>Clínica Estética & Tricología · Est. 2022</Eyebrow>
              </div>
              <h1 className="hero-headline">
                Belleza<br />
                que se siente<br />
                <em>natural.</em>
              </h1>
              <p className="hero-sub">Medicina estética de alto valor en Montería. Cuidamos tu rostro, tu piel y tu cabello con criterio médico, manos serenas y resultados que respetan quien ya eres.


              </p>
              <div className="hero-cta-row">
                <button className="btn btn-primary btn-lg" onClick={onBookClick}>
                  Agendar valoración <Arr />
                </button>
                <a className="btn btn-ghost btn-lg" href="#servicios" onClick={(e) => {e.preventDefault();document.getElementById("servicios")?.scrollIntoView({ behavior: "smooth", block: "start" });}}>
                  Conocer tratamientos
                </a>
              </div>
            </Reveal>
          </div>

          <Reveal delay={1} className="hero-portrait-col">
            <div style={{ position: "relative", height: "100%" }}>
              <Photo tone="rose" label="retrato editorial · dra. victoria" src="assets/retrato-dra-victoria.jpg" alt="Dra. Victoria D'janon" className="hero-portrait" />
              <div className="hero-badge" aria-hidden>
                <div>
                  <span className="num">7+</span>
                  años de
                  <br />experiencia
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>);

}

/* Trust strip — credentials beneath hero */
function Trust() {
  const items = [
  { num: "7+", label: "Años de experiencia clínica" },
  { num: "+500", label: "Pacientes en Montería y la región" },
  { num: "100%", label: "Protocolos médicos certificados" },
  { num: "5.0", label: "Calificación promedio Google" }];

  return (
    <section className="trust">
      <div className="wrap">
        <div className="trust-grid">
          {items.map((it, i) =>
          <Reveal key={it.label} delay={i % 3 + 1} className="trust-item">
              <span className="trust-num" style={{ fontFamily: "Italiana" }}>{it.num}</span>
              <span className="trust-label">{it.label}</span>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* Philosophy / manifesto strip */
function Philosophy() {
  return (
    <section className="section-pad" id="filosofia">
      <div className="wrap philo">
        <Reveal>
          <Eyebrow>Filosofía</Eyebrow>
          <p className="philo-text mt-32">
            Creemos en la belleza que sigue siendo <em style={{ fontFamily: "\"Cormorant Garamond\"" }}>tuya.</em>
            En la sutileza como signo de excelencia médica, no de modestia.
          </p>
          <p className="philo-text">
            Cada tratamiento parte de un diagnóstico cuidadoso, una conversación honesta y
            una mirada estética entrenada — para que el resultado se vea como descanso,
            no como intervención.
          </p>
          <p className="philo-sign">— Dra. Victoria D'janon</p>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="philo-quote">
            Resultados <em>naturales,</em><br />
            decisiones con<br />
            <em>criterio médico.</em>
          </h2>
        </Reveal>
      </div>
    </section>);

}

Object.assign(window, { Hero, Trust, Philosophy });