/* Hero V2, Photographic scene with brand-aligned phone overlay
 *
 *  - Photo carries atmosphere & humanity
 *  - Phone uses GuestMaker palette (warm dark + magenta accent)
 *  - 4 conversation scenarios cycle automatically, each demonstrates
 *    a real hotel use case where the AI knows the guest's context
 *  - Distinct visual treatment for guest vs AI vs system rows
 */

const heroV2H1Variants = {
  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></>,
};

/* ===========================================================
 *  Conversation library
 *  -------------------------------------------------------
 *  Each scenario has:
 *    - id, title, hotel, scene-caption
 *    - script: array of beats
 *  Beat kinds:
 *    'guest'   , outgoing message
 *    'ai'      , AI response (rich content allowed)
 *    'system'  , subtle status line (typing/looking/etc)
 *    'context' , pinned booking/profile context the AI sees
 * =========================================================== */
const heroV2Scenarios = [
  /* 1, New visitor · trip discovery → AI researches + generates deep link to book */
  {
    id: "discover",
    hotel: "Lumina Hotels",
    caption: "Lumina · Web Chat · 18:42 PM",
    badge: "New visitor",
    script: [
      {
        kind: "guest",
        text: "Looking for a quiet adults-only place in October. Mediterranean, near the sea, good food.",
        time: "18:42",
        delay: 1100,
      },
      { kind: "system", text: "AI · matching across 14 properties · live availability", delay: 1600 },
      {
        kind: "ai",
        intro: "Lumina Cap Roig fits perfectly, adults-only, seaside, with one of our top-rated kitchens. I checked October availability for you.",
        time: "18:42",
        delay: 1500,
      },
      {
        kind: "card",
        roomTitle: "Lumina Cap Roig · Mallorca",
        roomSub: "Adults-only · 18 rooms · seaside",
        rate: "€340",
        rateUnit: "/ night",
        rateNote: "5 rooms left · Oct",
        perks: ["Michelin-listed kitchen", "Cliffside infinity pool", "Wine cellar tastings"],
        delay: 1700,
      },
      {
        kind: "guest",
        text: "Looks lovely. Can you do 5 nights from Oct 14?",
        time: "18:43",
        delay: 1000,
      },
      { kind: "system", text: "AI · checking rates · generating booking link", delay: 1400 },
      {
        kind: "link",
        title: "Lumina Cap Roig · Sea View Room",
        meta: "Oct 14 → 19 · 5 nights · 2 adults",
        rate: "€1,680",
        rateNote: "all-in · best available",
        url: "book.luminahotels.com/checkout",
        delay: 1900,
      },
      {
        kind: "guest",
        text: "Booked! Thank you ✨",
        time: "18:44",
        delay: 800,
      },
    ],
  },

  /* 2, Existing booking · KB question (autonomous) */
  {
    id: "kb",
    hotel: "Lumina Hotels",
    caption: "Lumina · WhatsApp · 21:08 PM",
    badge: "Existing booking",
    script: [
      {
        kind: "context",
        rows: [
          { label: "Guest",   value: "James Whitfield" },
          { label: "Booking", value: "LUM-118802 · Sea View Suite" },
          { label: "Arriving", value: "Tomorrow · 14:30 flight" },
          { label: "Loyalty", value: "Society Member · Gold" },
        ],
        delay: 1300,
      },
      {
        kind: "guest",
        text: "Hi! Quick one, what time can we check in tomorrow, and is there an airport transfer?",
        time: "21:08",
        delay: 1100,
      },
      {
        kind: "ai",
        intro: "Hi James, all answered below. As a Society Gold member you've got early check-in included 👇",
        bullets: [
          { label: "Check-in", value: "From 12:00 (early arrival waived)" },
          { label: "Transfer", value: "Private car · €65 each way" },
          { label: "Pickup",   value: "Send your flight # and I'll book it" },
        ],
        time: "21:08",
        delay: 1700,
      },
      {
        kind: "guest",
        text: "BA 472, lands 14:30. Yes please!",
        time: "21:09",
        delay: 1000,
      },
      {
        kind: "ai",
        intro: "Done, driver confirmed for BA 472. You'll get your driver's name 30 min before landing.",
        time: "21:09",
        delay: 1500,
      },
    ],
  },

  /* 3, Existing booking · date change → ESCALATED to reservations */
  {
    id: "modify",
    hotel: "Lumina Hotels",
    caption: "Lumina · WhatsApp · 09:14 AM",
    badge: "Date change",
    script: [
      {
        kind: "context",
        rows: [
          { label: "Guest",   value: "Marta Aguilar" },
          { label: "Booking", value: "LUM-208441 · Sea View Suite" },
          { label: "Dates",   value: "Apr 12 – Apr 16 · 2 adults" },
          { label: "Status",  value: "Confirmed · paid" },
        ],
        delay: 1300,
      },
      {
        kind: "guest",
        text: "Hola! Could we push our arrival to the 14th and add 2 more nights? Same room if possible.",
        time: "09:14",
        delay: 1100,
      },
      {
        kind: "ai",
        intro: "Hi Marta, happy to look into that. I'll pass it to reservations to confirm rate and inventory for the new dates. They usually come back within the hour.",
        time: "09:14",
        delay: 1700,
      },
      {
        kind: "guest",
        text: "No worries, thanks!",
        time: "09:15",
        delay: 800,
      },
      {
        kind: "escalation",
        title: "Escalated to Reservations",
        meta: "Email sent · awaiting team reply",
        delay: 1500,
      },
      {
        kind: "ai",
        intro: "Good news, Apr 14 → Apr 20 confirmed, same Sea View Suite.",
        bullets: [
          { label: "New total",  value: "€2,490 · was €1,660" },
          { label: "Difference", value: "+€830 to file card on arrival" },
          { label: "Policy",     value: "Same flexible cancellation" },
        ],
        time: "09:48",
        delay: 1700,
      },
      {
        kind: "guest",
        text: "Perfect, see you soon ✨",
        time: "09:49",
        delay: 700,
      },
    ],
  },

  /* 4, In-house guest · special requests → ESCALATED to Front Desk + F&B */
  {
    id: "onproperty",
    hotel: "Lumina Hotels",
    caption: "Lumina · WhatsApp · 11:28 AM",
    badge: "In-house guest",
    script: [
      {
        kind: "context",
        rows: [
          { label: "Guest",  value: "Daniel Park · Suite 412" },
          { label: "Stay",   value: "Day 3 of 5 · checks out Sat" },
          { label: "Notes",  value: "Anniversary trip · partner gluten-free" },
        ],
        delay: 1300,
      },
      {
        kind: "guest",
        text: "Hey, could we get a late checkout Saturday? And any chance of dinner reservations tonight?",
        time: "11:28",
        delay: 1100,
      },
      {
        kind: "ai",
        intro: "Of course Daniel, happy anniversary 🥂. I'll check with the front desk on the late checkout and with Solenne on tonight's dinner. Back to you shortly.",
        time: "11:28",
        delay: 1700,
      },
      {
        kind: "guest",
        text: "Amazing, thanks!",
        time: "11:29",
        delay: 700,
      },
      {
        kind: "escalation",
        title: "Escalated to Front Desk + F&B",
        meta: "2 emails sent · awaiting team reply",
        delay: 1500,
      },
      {
        kind: "ai",
        intro: "All set, both confirmed.",
        bullets: [
          { label: "Checkout", value: "Held until 4:00 PM Saturday · no charge" },
          { label: "Dinner",   value: "Solenne · 8:30 PM, anniversary table" },
          { label: "Menu",     value: "Chef notified about gluten-free" },
        ],
        time: "11:51",
        delay: 1700,
      },
      {
        kind: "guest",
        text: "You're a legend 🙏",
        time: "11:52",
        delay: 700,
      },
    ],
  },
];

const HeroV2Phone = () => {
  const [scenarioIdx, setScenarioIdx] = React.useState(0);
  const [step, setStep] = React.useState(0);
  const [pending, setPending] = React.useState(null); // 'guest' | 'ai' | null
  const [resetting, setResetting] = React.useState(false);
  const scrollRef = React.useRef(null);

  const scenario = heroV2Scenarios[scenarioIdx];
  const total = scenario.script.length;

  React.useEffect(() => {
    let timer;
    let cancelled = false;

    const run = (i) => {
      if (cancelled) return;
      if (i >= total) {
        // hold, fade out, advance scenario
        timer = setTimeout(() => {
          if (cancelled) return;
          setResetting(true);
          timer = setTimeout(() => {
            if (cancelled) return;
            setStep(0);
            setPending(null);
            setScenarioIdx((s) => (s + 1) % heroV2Scenarios.length);
            setResetting(false);
          }, 500);
        }, 3500);
        return;
      }
      const beat = scenario.script[i];
      const showPending = beat.kind === "guest" || beat.kind === "ai" || beat.kind === "card" || beat.kind === "link";
      if (showPending) {
        setPending(beat.kind === "guest" ? "guest" : "ai");
      } else {
        setPending(null);
      }
      timer = setTimeout(() => {
        if (cancelled) return;
        setPending(null);
        setStep(i + 1);
        const gap = beat.kind === "context" ? 400 : beat.kind === "guest" ? 500 : 700;
        timer = setTimeout(() => run(i + 1), gap);
      }, beat.delay);
    };

    run(0);
    return () => { cancelled = true; clearTimeout(timer); };
  }, [scenarioIdx, total, scenario.script]);

  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
  }, [step, pending]);

  return (
    <div className="hv2-phone">
      <div className="hv2-phone-bezel">
        {/* Dynamic island */}
        <div className="hv2-island" />

        {/* === Header · GuestMaker AI === */}
        <header className="hv2-head">
          <button className="hv2-head-back" aria-label="Back">
            <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden="true">
              <path d="M10 3 L4 8 L10 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div className="hv2-head-brand">
            <div className="hv2-head-avatar" aria-hidden="true">
              <span>L</span>
            </div>
            <div className="hv2-head-meta">
              <div className="hv2-head-name">{scenario.hotel}</div>
              <div className="hv2-head-sub">
                <span className="hv2-head-pulse" />
                AI concierge
              </div>
            </div>
          </div>
        </header>

        {/* Scenario badge */}
        <div className="hv2-scenario-tag" key={scenario.id + "-tag"}>
          <span className="hv2-scenario-dot" />
          <span className="hv2-scenario-tag-text">{scenario.badge}</span>
        </div>

        {/* === Conversation === */}
        <div className={`hv2-convo ${resetting ? "is-fading" : ""}`} ref={scrollRef}>
          {scenario.script.slice(0, step).map((m, i) => <HeroV2Beat key={scenario.id + "-" + i} m={m} />)}

          {pending === "guest" && (
            <div className="hv2-row hv2-row-guest">
              <div className="hv2-typing hv2-typing-guest">
                <span/><span/><span/>
              </div>
            </div>
          )}
          {pending === "ai" && (
            <div className="hv2-row hv2-row-ai">
              <div className="hv2-ai-mark" aria-hidden="true">
                <svg viewBox="0 0 16 16" width="9" height="9">
                  <path d="M8 1 L9.4 6.6 L15 8 L9.4 9.4 L8 15 L6.6 9.4 L1 8 L6.6 6.6 Z" fill="currentColor"/>
                </svg>
              </div>
              <div className="hv2-typing hv2-typing-ai">
                <span/><span/><span/>
              </div>
            </div>
          )}
        </div>

        {/* === Composer (decorative) === */}
        <div className="hv2-composer">
          <div className="hv2-composer-input">Type a message</div>
          <button className="hv2-composer-send" aria-label="Send">
            <svg viewBox="0 0 16 16" width="13" height="13" fill="none">
              <path d="M2 8 L14 8 M9 3 L14 8 L9 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>

        <div className="hv2-home" />
      </div>

      {/* Scenario pager (ambient, outside phone) */}
      <div className="hv2-scenario-pager">
        {heroV2Scenarios.map((s, i) => (
          <span
            key={s.id}
            className={`hv2-pager-dot ${i === scenarioIdx ? "is-active" : ""}`}
            aria-hidden="true"
          />
        ))}
      </div>
    </div>
  );
};

/* === Beat renderer === */
const HeroV2Beat = ({ m }) => {
  if (m.kind === "context") {
    return (
      <div className="hv2-row hv2-row-context">
        <div className="hv2-context">
          <div className="hv2-context-head">
            <span className="hv2-context-icon" aria-hidden="true">
              <svg viewBox="0 0 16 16" width="10" height="10" fill="none">
                <path d="M8 1 L9.4 6.6 L15 8 L9.4 9.4 L8 15 L6.6 9.4 L1 8 L6.6 6.6 Z" fill="currentColor"/>
              </svg>
            </span>
            What the AI sees
          </div>
          <ul className="hv2-context-rows">
            {m.rows.map((r, i) => (
              <li key={i}>
                <span className="hv2-context-label">{r.label}</span>
                <span className="hv2-context-value">{r.value}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
  if (m.kind === "guest") {
    return (
      <div className="hv2-row hv2-row-guest">
        <div className="hv2-bubble hv2-bubble-guest">
          {m.text}
          <span className="hv2-bubble-time">
            {m.time}
            <svg viewBox="0 0 16 12" width="11" height="8" fill="none" aria-hidden="true">
              <path d="M1 7 L4 10 L9 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M5 7 L8 10 L13 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </div>
      </div>
    );
  }
  if (m.kind === "system") {
    return (
      <div className="hv2-row hv2-row-system">
        <span className="hv2-system">
          <span className="hv2-system-dot" />
          {m.text}
        </span>
      </div>
    );
  }
  if (m.kind === "escalation") {
    return (
      <div className="hv2-row hv2-row-escalation">
        <div className="hv2-escalation">
          <div className="hv2-escalation-line" aria-hidden="true" />
          <div className="hv2-escalation-card">
            <div className="hv2-escalation-head">
              <span className="hv2-escalation-icon" aria-hidden="true">
                <svg viewBox="0 0 14 14" width="9" height="9" fill="none">
                  <path d="M7 1 L13 7 L7 13 M1 7 L13 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
              {m.title}
            </div>
            <div className="hv2-escalation-meta">{m.meta}</div>
          </div>
          <div className="hv2-escalation-line" aria-hidden="true" />
        </div>
      </div>
    );
  }
  if (m.kind === "card") {
    return (
      <div className="hv2-row hv2-row-ai">
        <div className="hv2-ai-mark" aria-hidden="true">
          <svg viewBox="0 0 16 16" width="9" height="9">
            <path d="M8 1 L9.4 6.6 L15 8 L9.4 9.4 L8 15 L6.6 9.4 L1 8 L6.6 6.6 Z" fill="currentColor"/>
          </svg>
        </div>
        <div className="hv2-card">
          <div className="hv2-card-img" aria-hidden="true">
            <img src="assets/hero-card-room.jpg" alt="Lumina Cap Roig room" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <div className="hv2-card-badge">AI Match</div>
          </div>
          <div className="hv2-card-body">
            <div className="hv2-card-title">{m.roomTitle}</div>
            <div className="hv2-card-sub">{m.roomSub}</div>
            <div className="hv2-card-rate">
              <span className="hv2-card-rate-num">{m.rate}</span>
              <span className="hv2-card-rate-unit">{m.rateUnit}</span>
              <span className="hv2-card-rate-tag">{m.rateNote}</span>
            </div>
            <ul className="hv2-card-perks">
              {m.perks.map((p, i) => (
                <li key={i}>
                  <svg viewBox="0 0 12 12" width="9" height="9" fill="none" aria-hidden="true">
                    <path d="M2 6 L5 9 L10 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  {p}
                </li>
              ))}
            </ul>
            <div className="hv2-card-actions">
              <button className="hv2-card-cta">View rates</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (m.kind === "link") {
    return (
      <div className="hv2-row hv2-row-ai">
        <div className="hv2-ai-mark" aria-hidden="true">
          <svg viewBox="0 0 16 16" width="9" height="9">
            <path d="M8 1 L9.4 6.6 L15 8 L9.4 9.4 L8 15 L6.6 9.4 L1 8 L6.6 6.6 Z" fill="currentColor"/>
          </svg>
        </div>
        <div className="hv2-link">
          <div className="hv2-link-head">
            <span className="hv2-link-tag">
              <svg viewBox="0 0 12 12" width="9" height="9" fill="none" aria-hidden="true">
                <path d="M5 7 L7 5 M3.5 8.5 a2 2 0 1 1 0-3 L5 4 M8.5 3.5 a2 2 0 1 1 0 3 L7 8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
              </svg>
              Booking link
            </span>
            <span className="hv2-link-domain">{m.url}</span>
          </div>
          <div className="hv2-link-title">{m.title}</div>
          <div className="hv2-link-meta">{m.meta}</div>
          <div className="hv2-link-rate">
            <span className="hv2-link-rate-num">{m.rate}</span>
            <span className="hv2-link-rate-note">{m.rateNote}</span>
          </div>
          <button className="hv2-link-cta">
            Book now
            <svg viewBox="0 0 14 14" width="11" height="11" fill="none" aria-hidden="true">
              <path d="M3 7 L11 7 M7 3 L11 7 L7 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    );
  }
  // ai
  return (
    <div className="hv2-row hv2-row-ai">
      <div className="hv2-ai-mark" aria-hidden="true">
        <svg viewBox="0 0 16 16" width="9" height="9">
          <path d="M8 1 L9.4 6.6 L15 8 L9.4 9.4 L8 15 L6.6 9.4 L1 8 L6.6 6.6 Z" fill="currentColor"/>
        </svg>
      </div>
      <div className="hv2-bubble hv2-bubble-ai">
        {m.intro && <div className="hv2-bubble-intro">{m.intro}</div>}
        {m.bullets && (
          <ul className="hv2-bubble-bullets">
            {m.bullets.map((b, i) => (
              <li key={i}>
                <span className="hv2-bullet-label">{b.label}</span>
                <span className="hv2-bullet-value">{b.value}</span>
              </li>
            ))}
          </ul>
        )}
        {m.body && <div className="hv2-bubble-body">{m.body}</div>}
        <span className="hv2-bubble-time hv2-bubble-time-ai">{m.time}</span>
      </div>
    </div>
  );
};

const SectionHeroV2 = ({ tweaks }) => {
  const variant = heroV2H1Variants[tweaks?.h1Variant || "promise"];
  return (
    <header className="hero hero-v2">
      <div className="hero-grain" aria-hidden="true"></div>
      <div className="hero-glow" aria-hidden="true"></div>
      <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>

        {/* === The scene: photo + phone overlay === */}
        <Reveal delay={300}>
          <div className="hv2-stage">
            <div className="hv2-stage-frame">
              <img src="https://cdn.guestmaker.ai/marketing/homepage-v3/assets/hero-photo-staff.png" alt="Hotel team using GuestMaker" className="hv2-photo"/>
              <div className="hv2-photo-vignette" aria-hidden="true" />
              <div className="hv2-photo-feather" aria-hidden="true" />
            </div>

            {/* AI attribution chip, floating top */}
            <div className="hv2-ai-chip">
              <span className="hv2-ai-chip-spark" aria-hidden="true">
                <svg viewBox="0 0 16 16" width="11" height="11">
                  <path d="M8 1 L9.4 6.6 L15 8 L9.4 9.4 L8 15 L6.6 9.4 L1 8 L6.6 6.6 Z" fill="currentColor"/>
                </svg>
              </span>
              <span>GuestMaker AI · same conversation, both sides synced</span>
            </div>

            {/* The phone */}
            <HeroV2Phone />
          </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-v2 { position: relative; padding-top: 140px; padding-bottom: clamp(80px, 9vw, 120px); overflow: hidden; }
        .hero-v2 .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-v2 .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: .35;
          pointer-events: none;
        }
        .hero-v2 .hero-inner { position: relative; }
        .hero-v2 .hero-copy { max-width: 920px; margin: 0 auto; text-align: center; }
        .hero-v2 .hero-copy .eyebrow { justify-content: center; }
        .hero-v2 .hero-copy .h-display { font-size: clamp(48px, 7vw, 96px); }

        /* === Stage === */
        .hv2-stage {
          position: relative;
          margin: 80px auto 0;
          max-width: 1280px;
        }
        .hv2-stage-frame {
          position: relative;
          border-radius: 22px;
          overflow: hidden;
          background: #0a0a0a;
          box-shadow:
            0 80px 160px -40px rgba(0,0,0,.7),
            0 0 0 1px var(--hairline);
          aspect-ratio: 1536 / 1024;
        }
        .hv2-photo {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .hv2-photo-vignette {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse at 30% 60%, transparent 40%, rgba(0,0,0,0.30) 100%);
          pointer-events: none;
        }
        .hv2-photo-feather {
          position: absolute;
          left: 0; right: 0; bottom: 0;
          height: 14%;
          background: linear-gradient(180deg, transparent, rgba(0,0,0,0.40));
          pointer-events: none;
        }

        /* AI attribution chip */
        .hv2-ai-chip {
          position: absolute;
          left: 50%;
          top: -22px;
          transform: translateX(-50%);
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 16px;
          background: var(--bg-elev-1);
          border: 1px solid var(--accent);
          border-radius: 999px;
          font-size: 12px; font-weight: 500;
          color: var(--accent);
          backdrop-filter: blur(10px);
          box-shadow: 0 16px 30px -10px rgba(0,0,0,.4);
          white-space: nowrap;
          z-index: 7;
          animation: hv2ChipFloat 6s ease-in-out infinite;
        }
        .hv2-ai-chip-spark {
          color: var(--accent);
          display: inline-flex;
          animation: pulse 2.4s infinite;
        }
        @keyframes hv2ChipFloat {
          0%, 100% { transform: translate(-50%, 0); }
          50%      { transform: translate(-50%, -3px); }
        }

        /* === Phone === */
        .hv2-phone {
          position: absolute;
          right: 5.5%;
          bottom: -7%;
          width: 290px;
          z-index: 5;
          animation: hv2Float 8s ease-in-out infinite;
        }
        @keyframes hv2Float {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(-6px); }
        }
        .hv2-phone-bezel {
          position: relative;
          background: #0a0907;
          border-radius: 38px;
          padding: 7px;
          border: 1px solid rgba(245, 241, 234, 0.08);
          box-shadow:
            0 60px 120px -20px rgba(0, 0, 0, 0.85),
            0 0 0 1.5px rgba(255, 255, 255, 0.04),
            inset 0 1px 1px rgba(255,255,255,0.05),
            0 0 80px -10px var(--accent-glow);
          aspect-ratio: 9 / 19.4;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
        .hv2-island {
          position: absolute;
          top: 14px; left: 50%;
          transform: translateX(-50%);
          width: 80px; height: 22px;
          background: #000;
          border-radius: 12px;
          z-index: 10;
        }

        /* === Header === */
        .hv2-head {
          display: flex; align-items: center; gap: 10px;
          padding: 44px 14px 12px;
          background: var(--bg);
          border-radius: 31px 31px 0 0;
          color: var(--ink);
          border-bottom: 1px solid var(--hairline);
          flex-shrink: 0;
        }
        .hv2-head-back {
          background: transparent; border: 0; padding: 4px;
          color: var(--ink-3);
          display: inline-flex;
          cursor: default;
        }
        .hv2-head-brand {
          display: flex; align-items: center; gap: 9px;
          flex: 1; min-width: 0;
        }
        .hv2-head-avatar {
          width: 30px; height: 30px;
          border-radius: 50%;
          background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #1a1410), color-mix(in srgb, var(--accent) 30%, var(--bg-elev-2)));
          display: inline-grid; place-items: center;
          flex-shrink: 0;
          font-family: var(--f-display);
          font-size: 14px;
          color: var(--ink);
          letter-spacing: -0.01em;
          font-weight: 400;
          box-shadow: inset 0 0 0 1px rgba(245,241,234,0.08);
        }
        .hv2-head-meta { min-width: 0; }
        .hv2-head-name {
          font-family: var(--f-display);
          font-size: 13px;
          letter-spacing: -0.005em;
          font-weight: 400;
          color: var(--ink);
          line-height: 1.15;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hv2-head-sub {
          font-size: 9.5px;
          color: var(--ink-3);
          display: inline-flex; align-items: center; gap: 5px;
          margin-top: 2px;
          font-family: var(--f-mono);
          letter-spacing: 0.04em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hv2-head-pulse {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 6px var(--accent);
          animation: pulse 2s infinite;
        }

        /* Scenario tag */
        .hv2-scenario-tag {
          margin: 10px 10px 6px;
          align-self: flex-start;
          max-width: calc(100% - 20px);
          box-sizing: border-box;
          display: inline-flex; align-items: center; gap: 5px;
          padding: 5px 10px 5px 9px;
          background: color-mix(in srgb, var(--accent) 12%, transparent);
          border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
          border-radius: 999px;
          font-family: var(--f-mono);
          font-size: 8.5px;
          letter-spacing: 0.02em;
          color: var(--accent);
          animation: hv2RowIn 0.5s ease both;
          flex-shrink: 0;
          line-height: 1;
          white-space: nowrap;
          overflow: visible;
        }
        .hv2-scenario-tag-text {
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 0;
        }
        .hv2-scenario-dot {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 6px var(--accent);
        }

        /* === Convo surface === */
        .hv2-convo {
          flex: 1;
          background: var(--bg);
          padding: 10px 10px 12px;
          overflow-y: auto;
          scrollbar-width: none;
          display: flex;
          flex-direction: column;
          gap: 4px;
          position: relative;
          transition: opacity .35s ease;
        }
        .hv2-convo.is-fading { opacity: 0; }
        .hv2-convo::-webkit-scrollbar { display: none; }

        /* Rows */
        .hv2-row {
          display: flex;
          gap: 6px;
          align-items: flex-end;
          animation: hv2RowIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
          margin-bottom: 4px;
        }
        @keyframes hv2RowIn {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .hv2-row-guest { justify-content: flex-end; }
        .hv2-row-ai { justify-content: flex-start; }
        .hv2-row-system { justify-content: center; margin: 4px 0; }
        .hv2-row-context { justify-content: stretch; margin-bottom: 6px; }

        /* AI mark before AI bubbles */
        .hv2-ai-mark {
          width: 18px; height: 18px;
          border-radius: 50%;
          background: var(--accent);
          color: var(--accent-ink);
          display: inline-grid; place-items: center;
          flex-shrink: 0;
          margin-bottom: 4px;
          box-shadow: 0 0 10px var(--accent-glow);
        }

        /* === Context panel, "what the AI sees" === */
        .hv2-context {
          width: 100%;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          padding: 9px 11px 10px;
        }
        .hv2-context-head {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--accent);
          margin-bottom: 8px;
        }
        .hv2-context-icon {
          width: 14px; height: 14px;
          border-radius: 50%;
          background: color-mix(in srgb, var(--accent) 16%, transparent);
          display: inline-grid; place-items: center;
          color: var(--accent);
        }
        .hv2-context-rows {
          list-style: none; margin: 0; padding: 0;
          display: grid; grid-template-columns: 1fr;
          gap: 4px;
        }
        .hv2-context-rows li {
          display: grid; grid-template-columns: 64px 1fr;
          gap: 8px;
          font-size: 10.5px;
          padding: 3px 0;
          border-top: 1px dashed var(--hairline);
        }
        .hv2-context-rows li:first-child { border-top: 0; padding-top: 0; }
        .hv2-context-label {
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-3);
          align-self: center;
        }
        .hv2-context-value {
          color: var(--ink);
          line-height: 1.3;
          font-weight: 500;
        }

        /* Bubbles */
        .hv2-bubble {
          max-width: 84%;
          padding: 8px 11px 6px;
          border-radius: 14px;
          font-size: 12.5px;
          line-height: 1.45;
          position: relative;
          word-wrap: break-word;
          letter-spacing: -0.005em;
        }
        .hv2-bubble-guest {
          background: var(--accent);
          color: var(--accent-ink);
          border-bottom-right-radius: 4px;
          font-weight: 500;
          box-shadow: 0 4px 12px var(--accent-glow);
        }
        .hv2-bubble-ai {
          background: var(--bg-elev-1);
          color: var(--ink);
          border: 1px solid var(--hairline);
          border-bottom-left-radius: 4px;
        }

        .hv2-bubble-intro {
          font-weight: 500;
          margin-bottom: 6px;
          letter-spacing: -0.005em;
        }
        .hv2-bubble-body {
          margin-top: 6px;
          color: var(--ink-2);
        }

        .hv2-bubble-bullets {
          list-style: none;
          margin: 6px 0 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 3px;
        }
        .hv2-bubble-bullets li {
          display: grid;
          grid-template-columns: 70px 1fr;
          gap: 8px;
          padding: 5px 8px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 6px;
          font-size: 10.5px;
          align-items: center;
        }
        .hv2-bullet-label {
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-3);
        }
        .hv2-bullet-value {
          color: var(--ink);
          line-height: 1.3;
          font-weight: 500;
        }

        .hv2-bubble-time {
          display: inline-flex;
          float: right;
          align-items: center;
          gap: 3px;
          margin-left: 8px;
          margin-top: 4px;
          font-size: 9px;
          font-family: var(--f-mono);
          color: color-mix(in srgb, var(--accent-ink) 60%, transparent);
        }
        .hv2-bubble-time-ai {
          color: var(--ink-3);
        }

        /* Typing */
        .hv2-typing {
          display: inline-flex; gap: 4px;
          padding: 9px 12px;
          border-radius: 14px;
        }
        .hv2-typing-guest {
          background: var(--accent);
          border-bottom-right-radius: 4px;
        }
        .hv2-typing-guest span {
          background: var(--accent-ink);
          opacity: 0.55;
        }
        .hv2-typing-ai {
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-bottom-left-radius: 4px;
        }
        .hv2-typing-ai span {
          background: var(--ink-3);
        }
        .hv2-typing span {
          width: 5px; height: 5px;
          border-radius: 50%;
          display: inline-block;
          animation: hv2TypingDot 1.2s infinite;
        }
        .hv2-typing span:nth-child(2) { animation-delay: 0.15s; }
        .hv2-typing span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes hv2TypingDot {
          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
          30%           { transform: translateY(-3px); opacity: 1; }
        }

        /* System line */
        .hv2-system {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 4px 10px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-3);
        }
        .hv2-system-dot {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 6px var(--accent);
          animation: pulse 1.6s infinite;
        }

        /* === Deep-link booking card === */
        .hv2-link {
          width: 88%;
          background: linear-gradient(180deg, var(--bg-elev-1), var(--bg-elev-2));
          border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hairline));
          border-radius: 12px;
          padding: 10px 12px 12px;
          box-shadow:
            0 8px 24px -8px rgba(0,0,0,0.6),
            inset 0 1px 0 rgba(245, 241, 234, 0.04),
            0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
        }
        .hv2-link-head {
          display: flex; align-items: center; justify-content: space-between;
          gap: 8px;
          margin-bottom: 8px;
          padding-bottom: 8px;
          border-bottom: 1px dashed var(--hairline);
        }
        .hv2-link-tag {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 3px 8px;
          background: color-mix(in srgb, var(--accent) 14%, transparent);
          border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
          border-radius: 999px;
          font-family: var(--f-mono);
          font-size: 8.5px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--accent);
        }
        .hv2-link-domain {
          font-family: var(--f-mono);
          font-size: 9px;
          color: var(--ink-3);
          letter-spacing: 0.02em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .hv2-link-title {
          font-family: var(--f-display);
          font-size: 13.5px;
          color: var(--ink);
          letter-spacing: -0.005em;
          line-height: 1.2;
        }
        .hv2-link-meta {
          font-size: 10.5px;
          color: var(--ink-2);
          margin-top: 2px;
        }
        .hv2-link-rate {
          display: flex; align-items: baseline; gap: 8px;
          margin-top: 8px;
        }
        .hv2-link-rate-num {
          font-family: var(--f-display);
          font-size: 22px;
          font-weight: 400;
          color: var(--ink);
          letter-spacing: -0.01em;
        }
        .hv2-link-rate-note {
          font-size: 9.5px;
          font-family: var(--f-mono);
          color: var(--ink-3);
          letter-spacing: 0.04em;
          text-transform: uppercase;
        }
        .hv2-link-cta {
          width: 100%;
          margin-top: 10px;
          padding: 9px 10px;
          background: var(--accent);
          color: var(--accent-ink);
          border: 0;
          border-radius: 8px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.01em;
          cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center; gap: 6px;
          box-shadow: 0 4px 12px var(--accent-glow);
        }

        /* Escalation marker */
        .hv2-row-escalation { justify-content: center; margin: 8px 0 6px; }
        .hv2-escalation {
          display: flex; align-items: center; gap: 8px;
          width: 100%;
        }
        .hv2-escalation-line {
          flex: 1; height: 1px;
          background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
        }
        .hv2-escalation-card {
          display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
          padding: 6px 11px 7px;
          background: var(--bg-elev-1);
          border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
          border-radius: 10px;
          flex-shrink: 0;
        }
        .hv2-escalation-head {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--accent);
          font-weight: 600;
        }
        .hv2-escalation-icon {
          width: 14px; height: 14px; border-radius: 50%;
          background: color-mix(in srgb, var(--accent) 16%, transparent);
          display: inline-grid; place-items: center;
          color: var(--accent);
        }
        .hv2-escalation-meta {
          font-size: 9.5px;
          color: var(--ink-3);
          font-family: var(--f-mono);
          letter-spacing: 0.02em;
        }

        /* === AI Card === */
        .hv2-card {
          width: 88%;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 12px;
          overflow: hidden;
          box-shadow:
            0 8px 24px -8px rgba(0,0,0,0.6),
            inset 0 1px 0 rgba(245, 241, 234, 0.04);
        }
        .hv2-card-img {
          position: relative;
          aspect-ratio: 16 / 8;
          background: linear-gradient(135deg, #2a2622 0%, color-mix(in srgb, var(--accent) 50%, #1a1410) 100%);
          overflow: hidden;
        }
        .hv2-card-img-grad {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse at 70% 20%, var(--accent-glow), transparent 60%);
        }
        .hv2-card-img-icon {
          position: absolute;
          inset: 0;
          width: 100%; height: 100%;
        }
        .hv2-card-badge {
          position: absolute;
          top: 8px; left: 8px;
          display: inline-flex; align-items: center; gap: 4px;
          padding: 3px 8px;
          background: rgba(14, 13, 12, 0.7);
          border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
          border-radius: 999px;
          font-family: var(--f-mono);
          font-size: 8.5px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--accent);
          backdrop-filter: blur(6px);
        }
        .hv2-card-body {
          padding: 10px 12px 12px;
        }
        .hv2-card-title {
          font-family: var(--f-display);
          font-size: 14px;
          color: var(--ink);
          letter-spacing: -0.005em;
          line-height: 1.2;
        }
        .hv2-card-sub {
          font-size: 10px;
          color: var(--ink-3);
          margin-top: 2px;
          font-family: var(--f-mono);
          letter-spacing: 0.02em;
        }
        .hv2-card-rate {
          display: flex; align-items: baseline; gap: 6px;
          margin-top: 8px;
          padding-top: 8px;
          border-top: 1px dashed var(--hairline);
          flex-wrap: wrap;
        }
        .hv2-card-rate-num {
          font-family: var(--f-display);
          font-size: 18px;
          font-weight: 400;
          color: var(--ink);
          letter-spacing: -0.01em;
        }
        .hv2-card-rate-unit {
          font-size: 10px;
          color: var(--ink-3);
        }
        .hv2-card-rate-tag {
          margin-left: auto;
          padding: 2px 7px;
          background: color-mix(in srgb, var(--accent) 14%, transparent);
          border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
          border-radius: 999px;
          font-family: var(--f-mono);
          font-size: 8.5px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--accent);
        }
        .hv2-card-perks {
          list-style: none;
          margin: 8px 0 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 3px;
          font-size: 10.5px;
          color: var(--ink-2);
        }
        .hv2-card-perks li {
          display: inline-flex; align-items: center; gap: 6px;
        }
        .hv2-card-perks svg {
          color: var(--accent);
          flex-shrink: 0;
        }
        .hv2-card-actions {
          display: flex;
          gap: 6px;
          margin-top: 10px;
        }
        .hv2-card-cta {
          flex: 1;
          padding: 8px 10px;
          background: var(--accent);
          color: var(--accent-ink);
          border: 0;
          border-radius: 7px;
          font-size: 10.5px;
          font-weight: 600;
          letter-spacing: 0.01em;
          cursor: pointer;
          box-shadow: 0 4px 10px var(--accent-glow);
        }

        /* === Composer === */
        .hv2-composer {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px 14px;
          background: var(--bg);
          border-top: 1px solid var(--hairline);
          border-radius: 0 0 31px 31px;
          flex-shrink: 0;
        }
        .hv2-composer-input {
          flex: 1;
          padding: 8px 12px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-size: 11px;
          color: var(--ink-4);
        }
        .hv2-composer-send {
          width: 32px; height: 32px;
          border-radius: 50%;
          background: var(--accent);
          color: var(--accent-ink);
          border: 0;
          display: inline-grid; place-items: center;
          cursor: pointer;
          box-shadow: 0 4px 10px var(--accent-glow);
        }
        .hv2-home {
          position: absolute;
          bottom: 4px; left: 50%;
          transform: translateX(-50%);
          width: 100px; height: 3px;
          background: rgba(245, 241, 234, 0.3);
          border-radius: 2px;
        }

        /* Scenario pager */
        .hv2-scenario-pager {
          position: absolute;
          bottom: -28px; left: 50%;
          transform: translateX(-50%);
          display: inline-flex;
          gap: 6px;
        }
        .hv2-pager-dot {
          width: 16px; height: 3px;
          background: var(--hairline-strong);
          border-radius: 2px;
          transition: background .4s ease, width .4s ease;
        }
        .hv2-pager-dot.is-active {
          background: var(--accent);
          width: 24px;
          box-shadow: 0 0 6px var(--accent-glow);
        }

        /* === Trust strip === */
        .hero-v2 .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;
        }
        .hero-v2 .trust-strip .caption { letter-spacing: 0.08em; }
        .hero-v2 .trust-logos { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
        .hero-v2 .trust-logo {
          font-family: var(--f-display);
          font-style: italic;
          font-size: 22px;
          color: var(--ink-2);
          letter-spacing: -0.01em;
          opacity: .9;
        }
        .hero-v2 .trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }

        /* Responsive */
        @media (max-width: 1100px) {
          .hv2-phone { width: 250px; right: 4%; }
        }
        @media (max-width: 800px) {
          .hv2-phone {
            position: relative;
            right: auto; bottom: auto;
            margin: -60px auto 0;
            width: 270px;
          }
          .hv2-ai-chip {
            font-size: 11px;
            padding: 7px 12px;
            white-space: normal;
            text-align: center;
            max-width: 90%;
          }
        }
      `}</style>
    </header>
  );
};

window.SectionHeroV2 = SectionHeroV2;