/* eslint-disable */
// Sections-1.jsx — Hero, Numbers Card (mobile-first responsive)

const { useState, useEffect } = React;

/* Shared rail width — desktop only; mobile uses fluid full-width */
const RAIL_MAX = 1020;
const RAIL_PAD_X = 60;

/* ─── HERO ─── */
const Hero = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  return (
    <section data-screen-label="01 Hero" style={{ position: "relative", background: "#fff", overflow: "visible", zIndex: 1 }}>
      {/* Subtle gold accents — top-right corner (hidden on mobile) */}
      {!isMobile && (
        <div style={{ position: "absolute", top: 0, right: 0, width: 360, height: 360, pointerEvents: "none", overflow: "hidden" }}>
          <svg viewBox="0 0 360 360" style={{ width: "100%", height: "100%" }}>
            <polygon points="360,0 360,140 240,0" fill="#C5973B" opacity="0.10" />
            <polygon points="360,40 360,220 200,40" fill="#C5973B" opacity="0.16" />
          </svg>
        </div>
      )}
      {/* Subtle gold accents — bottom-left, behind copy column (hidden on mobile) */}
      {!isMobile && (
        <div style={{ position: "absolute", bottom: 40, left: 0, width: 320, height: 320, pointerEvents: "none", overflow: "hidden" }}>
          <svg viewBox="0 0 320 320" style={{ width: "100%", height: "100%" }}>
            <circle cx="50" cy="250" r="80" fill="none" stroke="#C5973B" strokeWidth="1.2" opacity="0.16" />
            <circle cx="10" cy="290" r="42" fill="#C5973B" opacity="0.07" />
          </svg>
        </div>
      )}

      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: isMobile ? "24px 20px 0" : "20px 32px 0",
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 1fr) minmax(0, 1fr)",
        alignItems: "end",
        gap: isMobile ? 24 : 56,
        minHeight: isMobile ? 0 : 640,
      }}>
        {/* LEFT — copy */}
        <div style={{ zIndex: 2, maxWidth: 560, paddingBottom: isMobile ? 0 : 80 }}>
          <Eyebrow letterSpacing="0.18em" color="var(--ink-soft)">
            Cirurgia Plástica · São Paulo
          </Eyebrow>

          <h1 style={{
            font: `600 ${isMobile ? 38 : 56}px/106% var(--font-serif)`,
            letterSpacing: "-0.005em",
            fontVariantCaps: "small-caps",
            margin: isMobile ? "16px 0 16px" : "20px 0 22px",
            textWrap: "balance",
          }}>
            <span style={{ color: "var(--ink)" }}>Implante de </span>
            <span style={{ color: "var(--gold-hover)" }}>Silicone</span>
            <span style={{ color: "var(--ink)" }}> em São Paulo</span>
          </h1>

          <p style={{
            font: `400 ${isMobile ? 18 : 22}px/138% var(--font-serif)`, fontStyle: "italic",
            color: "var(--ink-strong)", maxWidth: 520, margin: "0 0 16px",
            textWrap: "pretty",
          }}>
            Porque cada corpo tem sua própria harmonia.
          </p>

          <p style={{
            font: `400 ${isMobile ? 15 : 16}px/162% var(--font-sans)`, color: "var(--ink-body)",
            maxWidth: 480, margin: "0 0 28px",
          }}>
            Cirurgia de mama é uma decisão séria, para profissionais especializados.
          </p>

          <Button href={WA} style={isMobile ? { width: "100%", maxWidth: 360 } : {}}>
            <IconWhatsAppOutline size={20} />
            Agendar Consulta
          </Button>
        </div>

        {/* RIGHT — model PNG floating over gold geometric stack */}
        <div style={{
          position: "relative",
          justifySelf: isMobile ? "center" : "end",
          width: isMobile ? "100%" : 480,
          maxWidth: 480,
          height: isMobile ? 460 : 600,
        }}>
          {/* Decorative gold rotated squares — scaled for mobile */}
          <div style={{
            position: "absolute",
            width: isMobile ? 240 : 320,
            height: isMobile ? 240 : 320,
            borderRadius: 10,
            top: isMobile ? 80 : 80,
            left: isMobile ? "50%" : 130,
            marginLeft: isMobile ? -50 : 0,
            transformOrigin: "center", transform: "rotate(45deg)",
            backgroundImage: "linear-gradient(135deg, #C5973B 0%, #B8860B 50%, #A07608 100%)",
            zIndex: 1,
          }} />
          <div style={{
            position: "absolute",
            width: isMobile ? 150 : 200,
            height: isMobile ? 150 : 200,
            borderRadius: 8,
            top: isMobile ? 30 : 30,
            left: isMobile ? "50%" : 80,
            marginLeft: isMobile ? -90 : 0,
            opacity: 0.7,
            transformOrigin: "center", transform: "rotate(45deg)",
            backgroundImage: "linear-gradient(135deg, #D4A94A 0%, #C5973B 100%)",
            zIndex: 1,
          }} />
          {!isMobile && (
            <div style={{
              position: "absolute", width: 140, height: 140, borderRadius: 5,
              top: 220, left: 30, opacity: 0.45,
              transformOrigin: "center", transform: "rotate(45deg)",
              border: "2px solid var(--gold)",
              zIndex: 1,
            }} />
          )}
          {!isMobile && (
            <div style={{
              position: "absolute", width: 64, height: 64, borderRadius: 9999,
              top: 50, left: 30, opacity: 0.35,
              border: "1.5px solid var(--gold)",
              zIndex: 1,
            }} />
          )}

          {/* Model image — extends past hero bottom, dark card sits in front of her lower body */}
          <img
            src="assets/hero-model.png"
            alt="Paciente"
            style={{
              position: "absolute",
              bottom: isMobile ? -40 : -60, left: "50%",
              transform: "translateX(-50%)",
              height: isMobile ? 500 : 680,
              width: "auto",
              zIndex: 1,
              filter: "drop-shadow(0 18px 24px rgba(60, 40, 10, 0.18))",
              pointerEvents: "none",
            }}
          />
        </div>
      </div>
    </section>
  );
};

/* ─── ENDORSEMENT BAND (Doctor card + Numbers) ─── */
const NumbersCard = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  const stats = [
    { num: "35", suffix: "anos",   label: "Como cirurgião plástico" },
    { num: "+50.000",               label: "Plásticas realizadas" },
    { num: "+12", suffix: "cursos", label: "De plástica concluídos" },
  ];
  return (
    <section data-screen-label="02 Endosso" style={{
      position: "relative",
      padding: isMobile ? "0 16px 8px" : `0 ${RAIL_PAD_X}px 8px`,
      background: "#fff",
      zIndex: 2,
    }}>
      <div style={{
        maxWidth: RAIL_MAX - RAIL_PAD_X * 2, margin: "0 auto",
        background: "var(--bg-dark)", borderRadius: 20,
        padding: isMobile ? "32px 24px" : "40px",
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1.15fr 1fr 1fr 1fr",
        gap: isMobile ? 28 : 0,
        alignItems: "center",
      }}>
        {/* Doctor info — left column (top on mobile) */}
        <div style={{
          display: "flex",
          flexDirection: isMobile ? "row" : "column",
          alignItems: "center",
          justifyContent: isMobile ? "center" : "center",
          textAlign: isMobile ? "left" : "center",
          padding: isMobile ? 0 : "4px 16px",
          gap: isMobile ? 16 : 14,
          paddingBottom: isMobile ? 24 : 0,
          borderBottom: isMobile ? "1px solid rgba(197,151,59,0.22)" : "none",
        }}>
          <div style={{
            width: isMobile ? 80 : 112,
            height: isMobile ? 80 : 112,
            borderRadius: 9999,
            overflow: "hidden",
            border: "3px solid var(--gold)",
            boxShadow: "0 8px 20px -4px rgba(0,0,0,0.35)",
            backgroundImage: "url(assets/dr-emilio-hero.png)",
            backgroundSize: "cover",
            backgroundPosition: "center 22%",
            flexShrink: 0,
          }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{
              font: `500 ${isMobile ? 17 : 18}px/1.2 var(--font-serif)`,
              fontVariantCaps: "small-caps",
              letterSpacing: "0.02em",
              color: "#fff",
            }}>Dr. Emilio Rengel</span>
            <span style={{
              font: "400 11px/1.4 var(--font-sans)",
              color: "var(--gold)",
              textTransform: "uppercase",
              letterSpacing: "0.20em",
            }}>CRM-SP 82.963</span>
          </div>
        </div>

        {/* Stats — vertical stack on mobile (bigger numbers + side-by-side label) */}
        {isMobile ? (
          <div style={{ display: "flex", flexDirection: "column" }}>
            {stats.map((s, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                gap: 18,
                padding: "24px 4px",
                borderTop: i > 0 ? "1px solid rgba(197,151,59,0.18)" : "none",
              }}>
                <div style={{ display: "flex", alignItems: "flex-end", gap: 8, lineHeight: 1, flexShrink: 0 }}>
                  <span style={{
                    font: `600 ${s.num.length > 4 ? 38 : 48}px/1 var(--font-serif)`,
                    color: "#fff", letterSpacing: "-0.01em",
                  }}>{s.num}</span>
                  {s.suffix && (
                    <span style={{
                      font: "400 18px/1 var(--font-serif)",
                      color: "var(--gold)", fontStyle: "italic",
                      paddingBottom: 4,
                    }}>{s.suffix}</span>
                  )}
                </div>
                <p style={{
                  font: "500 12px/1.4 var(--font-sans)",
                  color: "var(--ink-faint)",
                  textTransform: "uppercase",
                  letterSpacing: "0.14em",
                  margin: 0,
                  textAlign: "right",
                  maxWidth: 200,
                }}>{s.label}</p>
              </div>
            ))}
          </div>
        ) : (
          stats.map((s, i) => (
            <div key={i} style={{
              display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
              padding: "8px 16px",
              borderLeft: "1px solid rgba(197,151,59,0.22)",
            }}>
              <div style={{ display: "flex", alignItems: "flex-end", gap: 8, marginBottom: 12, lineHeight: 1 }}>
                <span style={{
                  font: `600 ${s.num.length > 4 ? 46 : 56}px/1 var(--font-serif)`,
                  color: "#fff", letterSpacing: "-0.01em", display: "inline-block",
                }}>
                  {s.num}
                </span>
                {s.suffix && (
                  <span style={{ font: "400 20px/1 var(--font-serif)", color: "var(--gold)", fontStyle: "italic", display: "inline-block", paddingBottom: 5 }}>
                    {s.suffix}
                  </span>
                )}
              </div>
              <p style={{
                font: "400 11px/1.5 var(--font-sans)",
                color: "var(--ink-faint)",
                textTransform: "uppercase",
                letterSpacing: "0.14em",
                margin: 0,
                textWrap: "balance",
              }}>{s.label}</p>
            </div>
          ))
        )}
      </div>
    </section>
  );
};

Object.assign(window, { Hero, NumbersCard });