/* Hero, centered headline + carousel of 5 product surfaces */
const heroH1Variants = {
  promise: <>One AI system for every guest, every channel, <span className="italic-accent">every stay.</span></>,
  category: <>The Omnichannel <span className="italic-accent">AI CRM</span> for hotel groups.</>,
  brain: <>Train one Brain. <span className="italic-accent">Reach every guest.</span></>,
};

const heroSlides = [
  {
    id: "inbox",
    img: "https://cdn.guestmaker.ai/marketing/homepage-v3/assets/screen-inbox-lumina.png",
    url: "app.guestmaker.com / inbox",
    title: "Omnichannel Inbox",
    sub: "Every guest conversation, WhatsApp, email, web chat, social, in one thread.",
    chip: "AI handling 7 conversations",
    chipColor: "wa",
  },
  {
    id: "home",
    img: "https://cdn.guestmaker.ai/marketing/homepage-v3/assets/screen-hero-home.png",
    url: "app.guestmaker.com / home",
    title: "AI Command Center",
    sub: "Ask anything across your guest data and operations, reports, intel, guidance.",
    chip: "117 conversations this week · 99% AI-handled",
    chipColor: "accent",
  },
  {
    id: "wa-analytics",
    img: "https://cdn.guestmaker.ai/marketing/homepage-v3/assets/screen-hero-wa-analytics.png",
    url: "app.guestmaker.com / channels / whatsapp / analytics",
    title: "WhatsApp Analytics",
    sub: "Contact growth, AI performance, and engagement, across the whole group.",
    chip: "23,001 WhatsApp-ready contacts",
    chipColor: "wa",
  },
  {
    id: "webchat",
    img: "https://cdn.guestmaker.ai/marketing/homepage-v3/assets/screen-hero-webchat.png",
    url: "app.guestmaker.com / channels / web-chat / analytics",
    title: "Web Chat Analytics",
    sub: "AI resolution, booking intent, and visitor purpose, direct revenue, attributed.",
    chip: "47% booking widget rate",
    chipColor: "accent",
  },
  {
    id: "journeys",
    img: "https://cdn.guestmaker.ai/marketing/homepage-v3/assets/screen-hero-journeys.png",
    url: "app.guestmaker.com / automation / journeys",
    title: "Journey Analytics",
    sub: "Volume, completion, and failures across every automated guest workflow.",
    chip: "68.1% completion rate · +34% vs prev",
    chipColor: "accent",
  },
];

const SectionHero = ({ tweaks }) => {
  const variant = heroH1Variants[tweaks?.h1Variant || "promise"];
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const total = heroSlides.length;

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setIdx((i) => (i + 1) % total), 5500);
    return () => clearTimeout(t);
  }, [idx, paused, total]);

  const goto = (i) => setIdx(((i % total) + total) % total);
  const slide = heroSlides[idx];

  return (
    <header className="hero">
      <div className="hero-grain" aria-hidden="true" />
      <div className="hero-glow" aria-hidden="true" />
      <div className="container hero-inner">
        <div className="hero-copy">
          <Reveal><div className="eyebrow">The Omnichannel AI CRM for Hotel Groups</div></Reveal>
          <Reveal delay={120}>
            <h1 className="h-display" style={{ marginTop: 28 }}>{variant}</h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ marginTop: 28, maxWidth: 720, marginLeft: "auto", marginRight: "auto", fontSize: 20 }}>
              An AI concierge on every channel your guests already use: WhatsApp, phone, email, web and social. Behind them, one guest profile that your campaigns, journeys, loyalty and B2B pipeline all run on.
            </p>
          </Reveal>
          <Reveal delay={300}>
            <div className="flex gap-3 wrap center" style={{ marginTop: 36, justifyContent: "center" }}>
              <a href={DEMO_URL} className="btn btn-primary">Book a demo <IconArrow size={14} className="arrow" /></a>
              <a href="#bigidea" className="btn btn-ghost">See how it works</a>
            </div>
          </Reveal>
        </div>

        <Reveal delay={300}>
          <div
            className="hero-shot-wrap"
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => setPaused(false)}
          >
            <div className="hero-shot-frame">
              <div className="hero-shot-bar">
                <div className="lights"><i/><i/><i/></div>
                <div className="hero-shot-url" key={slide.id + "-url"}>
                  <span>{slide.url}</span>
                </div>
                <div style={{ width: 60 }} />
              </div>
              <div className="hero-shot-stage">
                {heroSlides.map((s, i) => (
                  <img
                    key={s.id}
                    src={s.img}
                    alt={s.title}
                    className={`hero-shot-img ${i === idx ? "is-active" : ""}`}
                    loading={i === 0 ? "eager" : "lazy"}
                  />
                ))}
              </div>
              <div className="hero-shot-feather" aria-hidden="true" />
            </div>

            {/* Caption strip below frame */}
            <div className="hero-caption" key={slide.id + "-cap"}>
              <div className="hero-caption-title">{slide.title}</div>
              <div className="hero-caption-sub">{slide.sub}</div>
            </div>

            {/* Carousel controls, dots + arrows */}
            <div className="hero-controls">
              <button
                type="button"
                className="hero-arrow"
                onClick={() => goto(idx - 1)}
                aria-label="Previous slide"
              >
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M9 2 L4 7 L9 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <div className="hero-dots" role="tablist" aria-label="Hero carousel">
                {heroSlides.map((s, i) => (
                  <button
                    key={s.id}
                    role="tab"
                    aria-selected={i === idx}
                    aria-label={s.title}
                    className={`hero-dot ${i === idx ? "is-active" : ""}`}
                    onClick={() => goto(i)}
                  >
                    <span className="hero-dot-fill" />
                  </button>
                ))}
              </div>
              <button
                type="button"
                className="hero-arrow"
                onClick={() => goto(idx + 1)}
                aria-label="Next slide"
              >
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M5 2 L10 7 L5 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>

            {/* Floating badges, slide-aware */}
            <div className={`hero-badge hb-1 hb-${slide.chipColor}`} key={slide.id + "-chip"}>
              <span className="hb-dot" /> {slide.chip}
            </div>
            <div className="hero-badge hb-2">
              <GMMark size={14} /> Powered by your Hotel Brain
            </div>
          </div>
        </Reveal>

        <Reveal delay={420}>
          <div className="trust-strip">
            <span className="caption">Trusted by leading hotel groups</span>
            <div className="trust-logos">
              <span className="trust-logo">BlueSea Hotels</span>
              <span className="trust-dot" />
              <span className="trust-logo">Reverence Hotels</span>
              <span className="trust-dot" />
              <span className="trust-logo">Ona Hotels</span>
              <span className="trust-dot" />
              <span className="trust-logo">Staybrick</span>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .hero { position: relative; padding-top: 140px; padding-bottom: clamp(80px, 9vw, 120px); overflow: hidden; }
        .hero-grain {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse 1200px 600px at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
            radial-gradient(ellipse 800px 400px at 80% 30%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
          pointer-events: none;
        }
        .hero-glow {
          position: absolute;
          width: 800px; height: 800px;
          left: 50%; top: 200px;
          transform: translateX(-50%);
          background: radial-gradient(circle, var(--accent-glow), transparent 60%);
          filter: blur(100px);
          opacity: .45;
          pointer-events: none;
        }
        .hero-inner { position: relative; }
        .hero-copy { max-width: 920px; margin: 0 auto; text-align: center; }
        .hero-copy .eyebrow { justify-content: center; }
        .hero-copy .h-display { font-size: clamp(48px, 7vw, 96px); }

        .hero-shot-wrap {
          margin: 80px auto 0;
          max-width: 1280px;
          position: relative;
        }
        .hero-shot-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          box-shadow:
            0 80px 160px -40px rgba(0,0,0,.7),
            0 0 0 1px var(--hairline),
            0 0 80px -20px var(--accent-glow);
        }
        .hero-shot-bar {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 16px;
          background: var(--bg-elev-2);
          border-bottom: 1px solid var(--hairline);
        }
        .hero-shot-url {
          padding: 4px 14px;
          background: var(--bg);
          border-radius: 6px;
          font-size: 11px;
          color: var(--ink-3);
          font-family: var(--f-mono);
          animation: heroFadeIn 0.5s ease both;
          max-width: 60%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .hero-shot-stage {
          position: relative;
          width: 100%;
          /* Maintain consistent aspect for stable layout across slides */
          aspect-ratio: 1000 / 530;
          background: var(--bg);
        }
        .hero-shot-img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top center;
          opacity: 0;
          transform: scale(1.01);
          transition: opacity 0.7s ease, transform 1.2s ease;
        }
        .hero-shot-img.is-active {
          opacity: 1;
          transform: scale(1);
        }
        .hero-shot-feather {
          position: absolute;
          left: 0; right: 0; bottom: 0;
          height: 80px;
          background: linear-gradient(180deg, transparent, var(--bg) 90%);
          pointer-events: none;
          opacity: 0;
        }

        /* Caption */
        .hero-caption {
          margin-top: 28px;
          padding: 0 12px;
          text-align: center;
          animation: heroFadeIn 0.5s ease both;
        }
        .hero-caption-title {
          font-family: var(--f-display);
          font-size: 22px;
          letter-spacing: -0.01em;
          color: var(--ink);
          margin-bottom: 6px;
        }
        .hero-caption-sub {
          font-size: 14px;
          color: var(--ink-3);
          max-width: 560px;
          margin: 0 auto;
          line-height: 1.5;
        }
        @keyframes heroFadeIn {
          from { opacity: 0; transform: translateY(4px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* Controls */
        .hero-controls {
          display: flex; align-items: center; justify-content: center;
          gap: 14px;
          margin-top: 18px;
        }
        .hero-arrow {
          width: 32px; height: 32px;
          border-radius: 50%;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          color: var(--ink-2);
          display: inline-grid; place-items: center;
          cursor: pointer;
          transition: background .2s, border-color .2s, color .2s;
        }
        .hero-arrow:hover {
          background: var(--bg-elev-2);
          border-color: var(--hairline-strong);
          color: var(--ink);
        }
        .hero-dots {
          display: inline-flex; gap: 8px; align-items: center;
        }
        .hero-dot {
          width: 28px; height: 4px;
          background: var(--hairline-strong);
          border: 0; padding: 0;
          border-radius: 2px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: background .2s;
        }
        .hero-dot:hover { background: var(--ink-4); }
        .hero-dot.is-active {
          background: var(--hairline-strong);
        }
        .hero-dot-fill {
          position: absolute;
          inset: 0;
          background: var(--accent);
          transform: scaleX(0);
          transform-origin: left center;
          border-radius: 2px;
        }
        .hero-dot.is-active .hero-dot-fill {
          animation: heroDotFill 5.5s linear forwards;
        }
        @keyframes heroDotFill {
          from { transform: scaleX(0); }
          to   { transform: scaleX(1); }
        }

        /* Floating badges */
        .hero-badge {
          position: absolute;
          padding: 9px 14px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline-strong);
          border-radius: 999px;
          font-size: 12px;
          font-weight: 500;
          display: inline-flex; align-items: center; gap: 8px;
          backdrop-filter: blur(8px);
          box-shadow: 0 12px 30px -10px rgba(0,0,0,.4);
          animation: hbFloat 6s ease-in-out infinite, heroFadeIn 0.5s ease both;
        }
        .hb-1 { top: 60px; left: -20px; }
        .hb-2 { bottom: 160px; right: -20px; animation-delay: -3s, 0s; color: var(--accent); }
        .hb-wa .hb-dot {
          background: var(--c-whatsapp);
          box-shadow: 0 0 12px var(--c-whatsapp);
        }
        .hb-accent .hb-dot {
          background: var(--accent);
          box-shadow: 0 0 12px var(--accent);
        }
        .hb-dot {
          width: 8px; height: 8px; border-radius: 50%;
          animation: pulse 2s infinite;
        }
        @keyframes hbFloat {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }

        .trust-strip {
          margin-top: 80px;
          padding-top: 32px;
          border-top: 1px solid var(--hairline);
          max-width: 920px;
          margin-left: auto; margin-right: auto;
          display: flex; flex-direction: column; gap: 14px;
          align-items: center; text-align: center;
        }
        .trust-strip .caption { letter-spacing: 0.08em; }
        .trust-logos { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
        .trust-logo {
          font-family: var(--f-display);
          font-style: italic;
          font-size: 22px;
          color: var(--ink-2);
          letter-spacing: -0.01em;
          opacity: .9;
        }
        .trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }

        @media (max-width: 900px) {
          .hb-1, .hb-2 { display: none; }
          .hero-shot-url { max-width: 50%; }
        }
      `}</style>
    </header>
  );
};

window.SectionHero = SectionHero;