// Hero.jsx — H1 + 4 CTAs + photo placeholder on right

function Hero() {
  useLucide();
  const phone = "07378 242539";

  return (
    <section id="top" style={{ background: "#fff", padding: "48px 32px 40px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1.05fr 1fr",
        gap: 72, alignItems: "center" }}
      className="hero-grid">

        {/* Left: copy */}
        <div>
          <h1 style={{
            fontSize: "clamp(44px, 5.6vw, 72px)", fontWeight: 800, lineHeight: 1.02,
            letterSpacing: "-0.04em", margin: "0 0 24px", color: "var(--ink)",
            textWrap: "balance"
          }}>
            AI, fitted to your business.<br />
            <span style={{ color: "var(--muted-2)", display: "inline-block", marginTop: "0.25em" }}>Stop using your people for work AI can do.</span>
          </h1>

          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)",
            maxWidth: 560, margin: "0 0 20px" }}>Incoming calls, emails, booking appointments, answering customer questions, chasing follow-ups, paperwork — they don't have to take up your time, or your people's.
          </p>

          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)",
            maxWidth: 560, margin: "0 0 32px" }}>Construction, garages, hospitality, services — whatever your business — we fit AI quietly into your operations so your people can get on with the work that actually matters.
</p>

          {/* CTAs — 4 buttons grouped: 2 messaging, 1 call, 1 send-message */}
          <div className="hero-ctas" style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
            <a href="https://wa.me/447572367442" target="_blank" rel="noopener" style={ctaBtnStyle("#25D366")} onMouseEnter={btnHoverIn} onMouseLeave={btnHoverOut}>
              <span style={ctaIconStyle("#25D366")}>
                <i data-lucide="message-circle" style={{ width: 14, height: 14, strokeWidth: 2.5 }}></i>
              </span>
              WhatsApp
            </a>

            <a href="https://t.me/mikhailtruf" target="_blank" rel="noopener" style={ctaBtnStyle("#229ED9")} onMouseEnter={btnHoverIn} onMouseLeave={btnHoverOut}>
              <span style={ctaIconStyle("#229ED9")}>
                <i data-lucide="send" style={{ width: 14, height: 14, strokeWidth: 2.5 }}></i>
              </span>
              Telegram
            </a>

            <a href={`tel:${phone.replace(/\s/g, "")}`}
            style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "12px 18px", borderRadius: 12,
              background: "var(--blue)", color: "#fff",
              fontSize: 14, fontWeight: 600, textDecoration: "none",
              border: "1px solid var(--blue)",
              transition: "transform .12s var(--t-ease), background .15s var(--t-ease)"
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-1px)";e.currentTarget.style.background = "var(--blue-700)";e.currentTarget.style.borderColor = "var(--blue-700)";}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";e.currentTarget.style.background = "var(--blue)";e.currentTarget.style.borderColor = "var(--blue)";}}>
              <i data-lucide="phone" style={{ width: 14, height: 14, strokeWidth: 2.25 }}></i>
              Call us
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500,
                opacity: 0.85, paddingLeft: 6, marginLeft: 4,
                borderLeft: "1px solid rgba(255,255,255,0.25)" }}>{phone}</span>
            </a>

          </div>

          <div style={{ marginTop: 28, display: "flex", gap: 24, alignItems: "center",
            flexWrap: "wrap",
            fontSize: 13, color: "var(--muted)" }}>
            <span style={metaItem}>
              <i data-lucide="check" style={{ width: 14, height: 14, color: "var(--success)" }}></i>
              No commitment
            </span>
            <span style={metaItem}>
              <i data-lucide="check" style={{ width: 14, height: 14, color: "var(--success)" }}></i>
              UK-based
            </span>
            <span style={metaItem}>
              <i data-lucide="check" style={{ width: 14, height: 14, color: "var(--success)" }}></i>
              AI assistants live in two weeks
            </span>
          </div>
        </div>

        {/* Right: video placeholder w/ floating elements */}
        <HeroMedia />
      </div>
    </section>);

}

const metaItem = { display: "inline-flex", alignItems: "center", gap: 6 };
function ctaBtnStyle() {
  return {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "11px 18px 11px 12px", borderRadius: 12,
    background: "var(--white)", color: "var(--ink)",
    fontSize: 14, fontWeight: 600, textDecoration: "none",
    border: "1px solid var(--line)",
    transition: "transform .12s var(--t-ease), border-color .15s var(--t-ease), box-shadow .15s var(--t-ease)"
  };
}
function ctaIconStyle(bg) {
  return {
    width: 24, height: 24, borderRadius: 7, background: bg,
    display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff"
  };
}
function btnHoverIn(e) {
  e.currentTarget.style.transform = "translateY(-1px)";
  e.currentTarget.style.borderColor = "var(--ink)";
  e.currentTarget.style.boxShadow = "var(--sh-xs)";
}
function btnHoverOut(e) {
  e.currentTarget.style.transform = "translateY(0)";
  e.currentTarget.style.borderColor = "var(--line)";
  e.currentTarget.style.boxShadow = "none";
}

function HeroMedia() {
  const slides = [
  { src: "assets/hero-garage.jpg", alt: "Independent garage owner",
    label: "Booked", title: "MOT — Sarah C.", when: "Tue 16 May · 09:15" },
  { src: "assets/hero-cafe.jpg", alt: "Cafe owner with paperwork",
    label: "Sorted", title: "All invoices are processed", when: "Wed 17 May · 14:48" },
  { src: "assets/hero-builders.jpg", alt: "Builders next to their van",
    label: "Booked", title: "Boiler service — Mr Phillips", when: "Thu 18 May · 10:30" }];

  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % slides.length), 5000);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    if (window.lucide && window.lucide.createIcons) window.lucide.createIcons();
  }, [idx]);

  return (
    <div style={{ position: "relative" }}>
      <div style={{
        background: "var(--sand)", borderRadius: 20, aspectRatio: "4 / 5",
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative", overflow: "hidden"
      }}>
        {slides.map((s, i) =>
        <img key={s.src} src={s.src} alt={s.alt}
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center top",
          opacity: i === idx ? 1 : 0,
          transition: "opacity 1.2s ease-in-out"
        }} />
        )}
      </div>

      {/* Floating "appointment booked" card — bottom-right */}
      <div style={{
        position: "absolute", right: -24, bottom: 40,
        background: "var(--blue-900)", color: "#fff",
        borderRadius: 14, padding: "16px 18px",
        boxShadow: "var(--sh-md)",
        minWidth: 240
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
        <div key={idx} style={{ display: "inline-flex" }}>
          <i data-lucide={slides[idx].label === "Sorted" ? "check-circle-2" : "calendar-check"} style={{ width: 16, height: 16, color: "var(--blue-400)" }}></i>
        </div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".06em",
            textTransform: "uppercase", color: "var(--blue-400)" }}>{slides[idx].label}</div>
        </div>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{slides[idx].title}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.6)", marginTop: 4 }}>
          {slides[idx].when}
        </div>
      </div>
    </div>);

}

window.Hero = Hero;