// Header + Hero

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const links = [
    ["Servicios", "#servicios"],
    ["Cómo trabajamos", "#proceso"],
    ["Rubros", "#rubros"],
    ["Reseñas", "#reseñas"],
    ["Contacto", "#contacto"],
  ];

  return (
    <>
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "16px 0",
      background: scrolled || menuOpen ? "rgba(250,251,247,.96)" : "transparent",
      backdropFilter: scrolled || menuOpen ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(14,42,36,.06)" : "1px solid transparent",
      transition: "background .3s, border-color .3s, padding .3s"
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#" style={{ textDecoration: "none", display: "flex", alignItems: "center" }} className="header-logo"><LogoFull height={32} /></a>
        <nav style={{ display: "flex", gap: 28 }} className="nav-desktop">
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{
              fontSize: 15, color: "var(--ink-soft)", textDecoration: "none", fontWeight: 500,
              transition: "color .2s"
            }} onMouseEnter={e => e.target.style.color = "var(--green-primary)"}
               onMouseLeave={e => e.target.style.color = "var(--ink-soft)"}>{label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }} className="header-cta-desktop">
          <a href="https://walink.co/a546fc" target="_blank" className="btn btn-primary" style={{ padding: "12px 22px", fontSize: 14 }}>
            <IconWhatsapp size={18}/> WhatsApp
          </a>
          <a href="https://www.instagram.com/grupogreenok/" target="_blank" className="btn-ig-header" aria-label="Instagram @grupogreenok"
             style={{
               display: "inline-flex", alignItems: "center", justifyContent: "center",
               width: 44, height: 44,
               color: "var(--ink)", textDecoration: "none",
               borderRadius: 999, border: "1.5px solid rgba(14,42,36,.12)",
               background: "white", transition: "all .2s"
             }}>
            <Icon name="instagram" color="currentColor" size={20}/>
          </a>
        </div>
        <button onClick={() => setMenuOpen(!menuOpen)} className="hamburger-btn" aria-label="Menú"
          style={{
            display: "none", width: 44, height: 44, borderRadius: 12,
            background: "white", border: "1.5px solid rgba(14,42,36,.12)",
            alignItems: "center", justifyContent: "center", padding: 0
          }}>
          <div style={{ width: 20, height: 14, position: "relative" }}>
            <span style={{ position: "absolute", left: 0, right: 0, height: 2, background: "var(--ink)", borderRadius: 2,
              top: menuOpen ? 6 : 0, transform: menuOpen ? "rotate(45deg)" : "none", transition: "all .25s" }}/>
            <span style={{ position: "absolute", left: 0, right: 0, height: 2, background: "var(--ink)", borderRadius: 2,
              top: 6, opacity: menuOpen ? 0 : 1, transition: "opacity .15s" }}/>
            <span style={{ position: "absolute", left: 0, right: 0, height: 2, background: "var(--ink)", borderRadius: 2,
              top: menuOpen ? 6 : 12, transform: menuOpen ? "rotate(-45deg)" : "none", transition: "all .25s" }}/>
          </div>
        </button>
      </div>
    </header>
    {menuOpen && (
      <div className="mobile-menu" style={{
        position: "fixed", inset: 0,
        background: "var(--bg)",
        padding: "100px 24px 32px", display: "flex", flexDirection: "column", gap: 4,
        animation: "fadeIn .2s ease",
        overflowY: "auto",
        zIndex: 49,
        scrollbarWidth: "none"
      }}>
        {links.map(([label, href]) => (
          <a key={href} href={href} onClick={() => setMenuOpen(false)} style={{
            fontSize: 22, fontWeight: 600, color: "var(--ink)", textDecoration: "none",
            padding: "18px 4px", borderBottom: "1px solid rgba(14,42,36,.08)"
          }}>{label}</a>
        ))}
        <div style={{ display: "flex", gap: 10, marginTop: 28, flexDirection: "column" }}>
          <a href="https://walink.co/a546fc" target="_blank" className="btn btn-primary" style={{ justifyContent: "center" }}>
            <IconWhatsapp size={20}/> WhatsApp
          </a>
          <a href="https://www.instagram.com/grupogreenok/" target="_blank" className="btn btn-ghost" style={{ justifyContent: "center" }}>
            <Icon name="instagram" color="currentColor" size={20}/> @grupogreenok
          </a>
        </div>
      </div>
    )}
    </>
  );
};

const Hero = () => {
  return (
    <section style={{
      position: "relative",
      paddingTop: 140, paddingBottom: 90,
      overflow: "hidden",
      background: "linear-gradient(180deg, #FAFBF7 0%, #EFF7F1 100%)"
    }}>
      {/* decorative blobs */}
      <div style={{ position: "absolute", top: "-80px", right: "-60px", width: 380, height: 380, opacity: .55 }} className="float-1" aria-hidden="true">
        <svg viewBox="0 0 400 400">
          <path d="M340 60 C 280 40, 180 60, 130 130 C 80 200, 100 290, 180 320 C 260 350, 350 300, 370 220 C 385 160, 380 90, 340 60 Z" fill="#D4EB8E"/>
        </svg>
      </div>
      <div style={{ position: "absolute", bottom: "-90px", left: "-100px", width: 320, height: 320, opacity: .6 }} className="float-2" aria-hidden="true">
        <svg viewBox="0 0 400 400">
          <path d="M200 40 C 120 60, 60 140, 80 240 C 100 320, 200 360, 280 320 C 360 280, 380 180, 340 100 C 300 40, 240 30, 200 40 Z" fill="#DDE5ED"/>
        </svg>
      </div>
      <div style={{ position: "absolute", top: "30%", right: "10%", width: 72, height: 72 }} className="float-3" aria-hidden="true">
        <Icon name="isotipo" color="#40C1AC" size={72} />
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr",
          gap: 60,
          alignItems: "center"
        }} className="hero-grid">
          <div>
            <div className="reveal in" style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 14px",
              background: "white", borderRadius: 999, boxShadow: "0 4px 14px rgba(14,42,36,.06)", marginBottom: 24,
              border: "1px solid rgba(14,42,36,.06)" }}>
              <span style={{ width: 8, height: 8, background: "var(--green-mint)", borderRadius: 999, boxShadow: "0 0 0 4px rgba(64,193,172,.25)" }}></span>
              <span style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-soft)" }}>Consultora integral · Córdoba, Argentina</span>
            </div>

            <h1 style={{ fontSize: "clamp(40px, 5.4vw, 78px)", marginBottom: 24 }}>
              Nos encargamos de <span className="squiggle">todo</span><br/>
              para que te enfoques<br/>
              en lo que <span style={{ color: "var(--green-primary)" }}>importa</span>.
            </h1>

            <p style={{ fontSize: 19, color: "var(--ink-soft)", maxWidth: 540, marginBottom: 36 }}>
              Habilitaciones, gestión ambiental, residuos, higiene y seguridad.
              Simplificamos lo complejo y resolvemos cada trámite, de principio a fin.
            </p>

            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
              <a href="https://walink.co/a546fc" target="_blank" className="btn btn-primary">
                <IconWhatsapp size={20}/> Escribinos por WhatsApp
              </a>
              <a href="#quiz" className="btn btn-ghost">
                ¿Qué trámite necesitás? <IconArrow size={18}/>
              </a>
            </div>

            <div style={{ display: "flex", gap: 28, marginTop: 44, flexWrap: "wrap" }}>
              <Stat n="+8" label="años acompañando empresas" />
              <Stat n="+250" label="trámites gestionados" />
              <Stat n="100%" label="dedicación, principio a fin" />
            </div>
          </div>

          {/* right composition */}
          <HeroComposition />
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const Stat = ({ n, label }) => (
  <div>
    <div className="serif tabular" style={{ fontSize: 36, color: "var(--green-primary)", lineHeight: 1 }}>{n}</div>
    <div style={{ fontSize: 13, color: "var(--ink-soft)", maxWidth: 140, marginTop: 6 }}>{label}</div>
  </div>
);

const HeroComposition = () => (
  <div style={{ position: "relative", aspectRatio: "1/1", maxWidth: 480, marginLeft: "auto" }}>
    {/* Big organic green shape — derived from logo isotipo */}
    <svg viewBox="0 0 400 400" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#009775"/>
          <stop offset="1" stopColor="#40C1AC"/>
        </linearGradient>
      </defs>
      <path
        d="M200 30 C 100 30, 40 100, 40 210 C 40 310, 110 370, 210 370 C 280 370, 330 340, 360 290 C 340 320, 290 340, 230 340 C 140 340, 80 290, 80 200 C 80 110, 140 60, 220 60 C 300 60, 360 110, 360 190 C 360 250, 320 290, 270 300 C 330 295, 380 250, 380 180 C 380 90, 310 30, 200 30 Z"
        fill="url(#g1)"
      />
      <path
        d="M125 195 L 175 245 L 280 140"
        stroke="white"
        strokeWidth="22"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </svg>

    {/* Floating cards */}
    <div className="float-3" style={{
      position: "absolute", top: "-10px", left: "-30px",
      background: "white", padding: "14px 16px", borderRadius: 18,
      boxShadow: "0 16px 40px rgba(14,42,36,.12)",
      display: "flex", alignItems: "center", gap: 10
    }}>
      <IconCheck color="#009775" size={28}/>
      <div>
        <div style={{ fontSize: 12, color: "var(--ink-soft)" }}>Habilitación</div>
        <div style={{ fontWeight: 600, fontSize: 14 }}>Aprobada ✓</div>
      </div>
    </div>

    <div className="float-1" style={{
      position: "absolute", bottom: "20px", right: "-20px",
      background: "white", padding: "14px 16px", borderRadius: 18,
      boxShadow: "0 16px 40px rgba(14,42,36,.12)",
      maxWidth: 220
    }}>
      <div style={{ display: "flex", gap: 4, marginBottom: 6 }}>
        {[1,2,3,4,5].map(i => <IconStar key={i} size={14}/>)}
      </div>
      <div style={{ fontSize: 13, color: "var(--ink)", lineHeight: 1.4 }}>
        “Resolvieron el trámite que nos tenía trabados hace meses.”
      </div>
    </div>

    <div className="float-2 handwritten" style={{
      position: "absolute", top: "40%", right: "-50px",
      fontSize: 28, color: "var(--yellow)",
      transform: "rotate(-8deg)"
    }}>
      ¡estás cubierto!
    </div>
  </div>
);

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