/* ═══════════════════════════════════════════════
  Hero — 3 column with image panels (no phone),
  floating cards, static clinic logos (greyscale),
  premium text animations
  ═══════════════════════════════════════════════ */

function WaveformBar({ accent, animated }) {
  const heights = [
    3, 6, 11, 8, 14, 10, 6, 12, 9, 5, 11, 14, 8, 6, 12, 10, 5, 8, 6, 3, 9, 12,
    7, 5,
  ];
  return (
    <div
      style={{ display: "flex", gap: 2, alignItems: "flex-end", height: 16 }}
    >
      {heights.map((h, i) => (
        <div
          key={i}
          style={{
            width: 2.2,
            height: h,
            borderRadius: 1.5,
            background: i < 16 ? accent : `${accent}40`,
            animation: animated
              ? `waveAnim 1.2s ease-in-out ${i * 0.05}s infinite alternate`
              : "none",
          }}
        ></div>
      ))}
    </div>
  );
}

/* Animated text reveal */
function TextReveal({ children, delay = 0, as = "span", style = {} }) {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setVis(true), delay);
    return () => clearTimeout(t);
  }, [delay]);
  const Tag = as;
  return (
    <Tag
      style={{
        display: "inline-block",
        opacity: vis ? 1 : 0,
        transform: vis ? "translateY(0)" : "translateY(18px)",
        transition:
          "opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1)",
        ...style,
      }}
    >
      {children}
    </Tag>
  );
}

function Hero({ tweaks }) {
  const accent = tweaks.accentColor;
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    requestAnimationFrame(() => setLoaded(true));
  }, []);

  const clinicLogos = [
    { src: "v2/assets/logo-mundaring.png", alt: "Mundaring & Hills Physio" },
    { src: "v2/assets/logo-balcatta.png", alt: "Balcatta Physio" },
    { src: "v2/assets/logo-bassendean.png", alt: "Bassendean Physio" },
    { src: "v2/assets/logo-glenforrest.png", alt: "Glen Forrest Physio" },
    { src: "v2/assets/logo-kalamunda.png", alt: "Kalamunda Physio" },
    { src: "v2/assets/logo-midland.png", alt: "Midland Physio" },
  ];
  return (
    <section
      style={{
        paddingTop: 96,
        paddingBottom: 0,
        background: "#fff",
        position: "relative",
        overflow: "visible",
      }}
    >
      <div
        style={{
          position: "absolute",
          top: -120,
          left: "50%",
          transform: "translateX(-50%)",
          width: 1100,
          height: 700,
          background: `radial-gradient(ellipse at center, ${accent}06 0%, transparent 68%)`,
          pointerEvents: "none",
        }}
      ></div>

      <div
        style={{
          maxWidth: 1720,
          margin: "0 auto",
          padding: "0 40px",
          position: "relative",
          left: -30,
          overflow: "visible",
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "430px 1fr 430px",
            gap: 0,
            alignItems: "center",
            minHeight: 700,
          }}
          className="hero-grid"
        >
          {/* ═══ Left panel — receptionist image placeholder ═══ */}
          <div
            style={{
              position: "relative",
              paddingTop: 60,
              zIndex: 5,
              left: -68,
              overflow: "visible",
            }}
            className="hero-side"
          >
            <div
              style={{
                width: "100%",
                height: 550,
                borderRadius: 48,
                overflow: "hidden",
                position: "relative",
                zIndex: 1,
                opacity: loaded ? 1 : 0,
                transform: loaded ? "translateX(0)" : "translateX(-40px)",
                transition: "all 1s cubic-bezier(0.16, 1, 0.3, 1)",
                boxShadow: "20px 40px 80px rgba(0,0,0,0.12)",
                border: "2px solid #fff",
              }}
            >
              <img
                src="/images/receptionist.png"
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                alt="Receptionist"
              />
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  boxShadow: "inset 0 10px 30px rgba(0,0,0,0.2)",
                  pointerEvents: "none",
                }}
              ></div>
            </div>

            {/* Card: Call handled */}
            <FloatCard
              style={{ top: 86, right: 18, width: 230, zIndex: 40 }}
              delay={300}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <div
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 7,
                    background: `${accent}10`,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
                    <path
                      d="M12.6 10.1l-2.2-.9a1 1 0 00-1 .2l-.8.8a8 8 0 01-3.8-3.8l.8-.8a1 1 0 00.2-1L4.9 2.4a1 1 0 00-1-.6H2.4A1 1 0 001.4 3c.5 5.5 5.1 10 10.6 10.6a1 1 0 001.2-1V10.1z"
                      stroke={accent}
                      strokeWidth="1.2"
                      fill="none"
                    />
                  </svg>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 640, color: accent }}>
                    Call handled
                  </div>
                  <div style={{ fontSize: 10.5, color: "#888" }}>
                    New patient enquiry
                  </div>
                </div>
                <span style={{ fontSize: 9.5, color: "#aaa", marginLeft: 2 }}>
                  3:37 pm
                </span>
              </div>
              <div style={{ marginTop: 6 }}>
                <WaveformBar accent={accent} animated={true} />
              </div>
            </FloatCard>

            {/* Card: Instant booking */}
            <FloatCard
              style={{ bottom: 172, right: -34, width: 210, zIndex: 40 }}
              delay={500}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <div
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 7,
                    background: "#f0f5ff",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
                    <rect
                      x="1"
                      y="2"
                      width="12"
                      height="10"
                      rx="2"
                      stroke={accent}
                      strokeWidth="1.1"
                    />
                    <path d="M1 5h12" stroke={accent} strokeWidth="1.1" />
                    <circle cx="5" cy="8.5" r="1" fill={accent} />
                  </svg>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 640 }}>
                    Instant booking
                  </div>
                  <div style={{ fontSize: 10.5, color: "#888" }}>
                    Today, 10:30 am{" "}
                    <span style={{ color: "#22c55e", fontWeight: 600 }}>
                      Confirmed
                    </span>
                  </div>
                </div>
              </div>
            </FloatCard>

            {/* Card: 67% stat */}
            <FloatCard
              style={{ bottom: -25, left: -16, width: 200, zIndex: 40 }}
              delay={650}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <div>
                  <div
                    style={{
                      fontSize: 20,
                      fontWeight: 720,
                      color: "#0a0a1a",
                      lineHeight: 1,
                    }}
                  >
                    67%
                  </div>
                  <div
                    style={{
                      fontSize: 10.5,
                      color: "#6a6a7a",
                      lineHeight: 1.3,
                      marginTop: 1,
                    }}
                  >
                    fewer missed calls
                  </div>
                  <div style={{ fontSize: 9.5, color: "#aaa" }}>
                    vs. manual reception
                  </div>
                </div>
                <svg width="28" height="20" viewBox="0 0 28 20" fill="none">
                  <path
                    d="M2 16L7 11L12 13L17 7L26 3"
                    stroke="#22c55e"
                    strokeWidth="1.8"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
            </FloatCard>
          </div>

          {/* ═══ Center content ═══ */}
          <div
            style={{
              textAlign: "center",
              padding: "24px 24px 0",
              position: "relative",
              zIndex: 2,
              left: -24,
            }}
          >
            <TextReveal delay={100}>
              <div
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                  background: `${accent}05`,
                  border: `1px solid ${accent}12`,
                  borderRadius: 100,
                  padding: "6px 16px",
                  marginBottom: 24,
                }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill={accent}>
                  <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"></path>
                </svg>
                <span
                  style={{
                    fontSize: 10.5,
                    fontWeight: 800,
                    color: accent,
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                  }}
                >
                  AI receptionist for health clinics
                </span>
              </div>
            </TextReveal>

            <h1
              style={{
                fontSize: "clamp(42px, 5.2vw, 76px)",
                fontWeight: 800,
                lineHeight: 1.05,
                color: "#0a0a1a",
                marginBottom: 28,
                letterSpacing: "-0.04em",
                whiteSpace: "nowrap",
              }}
            >
              <TextReveal delay={200}>AI reception built</TextReveal>
              <br />
              <TextReveal delay={320} style={{ marginRight: "0.18em" }}>
                for busy
              </TextReveal>
              <TextReveal
                delay={420}
                style={{ position: "relative", display: "inline-block" }}
              >
                health clinics.
                <svg
                  style={{
                    position: "absolute",
                    bottom: -12,
                    left: 0,
                    width: "100%",
                    height: 12,
                  }}
                  viewBox="0 0 300 12"
                  fill="none"
                  preserveAspectRatio="none"
                >
                  <path
                    d="M2 10C50 6 150 4 298 10"
                    stroke={accent}
                    strokeWidth="4"
                    strokeLinecap="round"
                    opacity="0.8"
                  />
                </svg>
              </TextReveal>
            </h1>

            <TextReveal
              delay={550}
              as="p"
              style={{
                fontSize: 21,
                lineHeight: 1.5,
                color: "#475467",
                maxWidth: 680,
                margin: "0 auto 48px",
                fontWeight: 450,
              }}
            >
              Purpose-built for health clinics, integrated with PracSuite, and
              trained for the front-desk complexity generic AI cannot handle.
            </TextReveal>

            <div
              style={{
                display: "flex",
                gap: 12,
                justifyContent: "center",
                flexWrap: "wrap",
                marginBottom: 32,
                opacity: loaded ? 1 : 0,
                transform: loaded ? "translateY(0)" : "translateY(10px)",
                transition: "all 0.7s cubic-bezier(0.16,1,0.3,1) 0.65s",
              }}
            >
              <Btn href="#" accent={accent} size="lg">
                Sign up free <ArrowRight />
              </Btn>
              <Btn href="#" primary={false} size="lg">
                Book a demo
              </Btn>
            </div>

            <div
              style={{
                display: "flex",
                gap: 10,
                justifyContent: "center",
                flexWrap: "nowrap",
                opacity: loaded ? 1 : 0,
                transition: "opacity 0.7s ease 0.75s",
                whiteSpace: "nowrap",
                marginTop: 80,
              }}
            >
              <div
                style={{
                  border: "1px solid #eef1f6",
                  borderRadius: 12,
                  padding: "12px 24px",
                  display: "flex",
                  alignItems: "center",
                  gap: 20,
                  background: "#fff",
                  boxShadow: "0 1px 2px rgba(16, 24, 40, 0.05)",
                }}
              >
                {[
                  {
                    name: "Clinico",
                    logo: "/images/clinico.png",
                    status: "Live now",
                    tone: "#22d3ee",
                    bg: "#ecfeff",
                  },
                  {
                    name: "Nookal",
                    logo: "/images/nookal.png",
                    status: "Rolling out",
                    tone: "#2563eb",
                    bg: "#eff6ff",
                  },
                  {
                    name: "PracSuite",
                    logo: "/images/pracsuite.png",
                    status: "Coming soon",
                    tone: "#6b7280",
                    bg: "#f4f4f5",
                  },
                ].map((item, idx) => (
                  <React.Fragment key={item.name}>
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 10 }}
                    >
                      <img
                        src={item.logo}
                        style={{ height: 22, width: "auto", display: "block" }}
                        alt={item.name}
                      />
                      <span
                        style={{
                          fontSize: 10,
                          color: item.tone,
                          background: item.bg,
                          borderRadius: 999,
                          padding: "2px 7px",
                          fontWeight: 700,
                        }}
                      >
                        {item.status}
                      </span>
                    </div>
                    {idx < 2 && (
                      <div
                        style={{ width: 1, height: 16, background: "#eef1f6" }}
                      ></div>
                    )}
                  </React.Fragment>
                ))}
              </div>
            </div>

            <div
              style={{
                display: "flex",
                gap: 10,
                justifyContent: "center",
                flexWrap: "nowrap",
                opacity: loaded ? 1 : 0,
                transition: "opacity 0.7s ease 0.75s",
                whiteSpace: "nowrap",
                marginTop: 12,
              }}
            >
              {[
                {
                  icon: (
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke={accent}
                      strokeWidth="2.5"
                    >
                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                  ),
                  text: "Built for health clinics",
                },
                {
                  icon: (
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke={accent}
                      strokeWidth="2.5"
                    >
                      <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
                    </svg>
                  ),
                  text: "Integrated with PracSuite",
                },
                {
                  icon: (
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke={accent}
                      strokeWidth="2.5"
                    >
                      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                  ),
                  text: "Handles complex claim pathways",
                },
                {
                  icon: (
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke={accent}
                      strokeWidth="2.5"
                    >
                      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                      <line x1="12" y1="19" x2="12" y2="23"></line>
                      <line x1="8" y1="23" x2="16" y2="23"></line>
                    </svg>
                  ),
                  text: "Fast, human-sounding voice",
                },
              ].map((c, i) => (
                <div
                  key={i}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    fontSize: 12,
                    color: "#344054",
                    fontWeight: 640,
                    background: "#fff",
                    padding: "8px 12px",
                    borderRadius: 12,
                    border: "1px solid #f2f4f7",
                    boxShadow: "0 1px 2px rgba(16, 24, 40, 0.05)",
                  }}
                >
                  {c.icon} {c.text}
                </div>
              ))}
            </div>
          </div>

          {/* ═══ Right panel — clinic interior placeholder ═══ */}
          <div
            style={{
              position: "relative",
              paddingTop: 100,
              zIndex: 5,
              overflow: "visible",
            }}
            className="hero-side"
          >
            <div
              style={{
                width: "100%",
                height: 530,
                borderRadius: 48,
                overflow: "hidden",
                position: "relative",
                zIndex: 1,
                opacity: loaded ? 1 : 0,
                transform: loaded ? "translateX(0)" : "translateX(40px)",
                transition: "all 1s cubic-bezier(0.16, 1, 0.3, 1)",
                boxShadow: "-20px 40px 80px rgba(0,0,0,0.12)",
                border: "2px solid #fff",
              }}
            >
              <img
                src="/images/clinic.png"
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                alt="Clinic"
              />
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  boxShadow: "inset 0 10px 30px rgba(0,0,0,0.2)",
                  pointerEvents: "none",
                }}
              ></div>
            </div>

            {/* Card: Appointment booked */}
            <FloatCard
              style={{ top: 76, left: 4, width: 220, zIndex: 40 }}
              delay={200}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: 50,
                    background: "#f0fdf4",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <svg width="16" height="16" viewBox="0 0 14 14">
                    <circle cx="7" cy="7" r="6" fill="#22c55e" />
                    <path
                      d="M4.5 7l2 2L9.5 5.5"
                      stroke="#fff"
                      strokeWidth="1.4"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      fill="none"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    style={{
                      fontSize: 13.5,
                      fontWeight: 720,
                      color: "#0a0a1a",
                    }}
                  >
                    Appointment booked
                  </div>
                  <div
                    style={{ fontSize: 11.5, color: "#666", fontWeight: 500 }}
                  >
                    General consult
                  </div>
                  <div style={{ fontSize: 11.5, color: "#888" }}>
                    Fri 24 May, 10:30 am
                  </div>
                </div>
              </div>
            </FloatCard>

            {/* Card: PracSuite */}
            <FloatCard
              style={{ bottom: 22, left: 54, width: 230, zIndex: 40 }}
              delay={400}
            >
              <div
                style={{
                  fontSize: 9.5,
                  color: "#888",
                  fontWeight: 500,
                  marginBottom: 5,
                  display: "flex",
                  alignItems: "center",
                  gap: 3,
                }}
              >
                <span
                  style={{
                    width: 5,
                    height: 5,
                    borderRadius: 50,
                    background: accent,
                    display: "inline-block",
                    animation: "pulse 2s ease-in-out infinite",
                  }}
                ></span>
                PracSuite integration
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                  marginBottom: 4,
                }}
              >
                <span
                  style={{ fontSize: 14, fontWeight: 720, color: "#0a0a1a" }}
                >
                  PracSuite
                </span>
                <span
                  style={{
                    fontSize: 9.5,
                    fontWeight: 640,
                    color: "#22c55e",
                    background: "#f0fdf4",
                    padding: "1px 6px",
                    borderRadius: 4,
                  }}
                >
                  Connected
                </span>
              </div>
              <div style={{ fontSize: 10, color: "#888", lineHeight: 1.3 }}>
                Two-way sync active
              </div>
            </FloatCard>

            {/* Card: tagline */}
            <FloatCard
              style={{ top: 132, right: 12, width: 90, zIndex: 30 }}
              delay={550}
            >
              <div
                style={{
                  fontSize: 10,
                  fontWeight: 620,
                  color: "#3a3a4a",
                  lineHeight: 1.3,
                  fontStyle: "italic",
                }}
              >
                Care that moves with you.
              </div>
            </FloatCard>
          </div>
        </div>
      </div>

      {/* ═══ Trust strip — static clinic logos in GREYSCALE ═══ */}
      <div
        style={{
          marginTop: 56,
          paddingTop: 44,
          paddingBottom: 56,
          textAlign: "center",
          borderTop: "1px solid #f0f0f5",
          background: "#fafbfc",
        }}
      >
        <Reveal>
          <p
            style={{
              fontSize: 13,
              fontWeight: 700,
              letterSpacing: "0.14em",
              color: "#9ba3b4",
              marginBottom: 32,
              textTransform: "uppercase",
            }}
          >
            Physio clinics we are currently in
          </p>
          <div
            style={{
              maxWidth: 1180,
              margin: "0 auto",
              padding: "8px 14px",
              border: "1px solid #e8ebf2",
              borderRadius: 16,
              background: "#fff",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: "clamp(14px, 2.6vw, 34px)",
              flexWrap: "wrap",
            }}
          >
            {clinicLogos.map((logo) => (
              <div
                key={logo.alt}
                className="trusted-marquee-item"
                style={{
                  opacity: 0.9,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  paddingInline: "clamp(10px, 1.8vw, 24px)",
                }}
              >
                <img
                  src={logo.src}
                  alt={logo.alt}
                  style={{
                    height: 54,
                    width: "auto",
                    display: "block",
                    maxWidth: 170,
                    filter: "grayscale(1) saturate(0) brightness(0.64)",
                    opacity: 0.86,
                  }}
                />
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.TextReveal = TextReveal;