// Hero — oversized editorial display, with reel-launch card and chat-style CTA.

const Hero = () => {
  const [value, setValue] = React.useState("");
  const [focused, setFocused] = React.useState(false);
  const [reelOpen, setReelOpen] = React.useState(false);
  const [agentOpen, setAgentOpen] = React.useState(false);
  const [agentSeed, setAgentSeed] = React.useState("");
  const openAgent = (seed = "") => {setAgentSeed(seed);setAgentOpen(true);};

  const suggestions = [
  copyText("home.hero.suggestion_1"),
  copyText("home.hero.suggestion_2"),
  copyText("home.hero.suggestion_3")];


  return (
    <>
    <section className="r-hero" style={{ position: "relative", paddingTop: 24, paddingBottom: 16, overflow: "hidden" }}>
      <div className="container">
        {/* Top meta row */}
        <div className="r-hero-meta" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <SectionEyebrow index="00 / Index" label={copyText("home.hero.location")} />
          <div className="mono" style={{ color: "var(--muted)" }}>
            <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 99, background: "var(--blue)", marginRight: 8, transform: "translateY(1px)" }}></span>
            {copyText("home.hero.availability")}
          </div>
        </div>

        {/* HEADLINE */}
        <h1
            className="display r-headline"
            style={{
              fontSize: "clamp(46px, 6.6vw, 108px)",
              margin: 0,
              fontVariationSettings: '"opsz" 96',
              fontWeight: 700,
              letterSpacing: "-0.035em",
              lineHeight: 0.92, padding: "0px 0px 45px"
            }}>
            
          {copyText("home.hero.headline_line1")}
          <br />
          {copyText("home.hero.headline_line2")}{" "}
          <span style={{ fontStyle: "italic", fontWeight: 500, color: "var(--ink)" }}>
            {copyText("home.hero.headline_emphasis_pre")}{" "}
            <span style={{ color: "var(--blue)", fontStyle: "italic", position: "relative", display: "inline-block" }}>
              {copyText("home.hero.headline_emphasis_accent")}
              <SketchUnderline animate strokeWidth={3.5} color="#1AA5F5" style={{ position: "absolute", left: 0, bottom: "-0.14em", width: "100%", height: "0.18em", pointerEvents: "none" }} />
            </span>
          </span>
        </h1>

        {/* Sub + chat input row */}
        <div
            className="r-hero-grid r-grid-1-1"
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.1fr",
              gap: 64,
              marginTop: 28,
              alignItems: "start"
            }}>
            
          <div className="r-hero-sub">
            <SectionEyebrow index="(01)" label="Introduction" />
            <p style={{
                fontSize: 20,
                lineHeight: 1.4,
                maxWidth: 520,
                marginTop: 20,
                marginBottom: 0,
                color: "var(--ink)",
                fontWeight: 400,
                letterSpacing: "-0.01em"
              }}>
              {copyText("home.hero.intro_pre")}<span style={{ position: "relative", display: "inline-block", whiteSpace: "nowrap" }}>{copyText("home.hero.intro_accent")}
                <SketchUnderline width={220} height={14} color="#1AA5F5" strokeWidth={2.5} style={{ position: "absolute", left: 0, bottom: -6, width: "100%", height: 8 }} />
              </span>{copyText("home.hero.intro_post")}
            </p>
          </div>

          {/* Chat input — the "what's your biggest marketing challenge?" entry */}
          <div style={{ position: "relative" }}>
            <div className="mono" style={{ color: "var(--muted)", marginBottom: 14, display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 99, background: "var(--blue)", boxShadow: "0 0 0 4px rgba(26,165,245,0.18)" }}></span>
              {copyText("home.hero.chat_label")}
            </div>
            <form
                className="r-chat-form"
                onSubmit={(e) => {e.preventDefault();openAgent(value.trim());setValue("");}}
                style={{
                  background: "var(--ink)",
                  color: "white",
                  borderRadius: 999,
                  padding: "10px 10px 10px 28px",
                  display: "flex",
                  alignItems: "center",
                  gap: 12,
                  border: focused ? "1px solid var(--blue)" : "1px solid var(--ink)",
                  boxShadow: focused ? "0 0 0 6px rgba(26,165,245,0.18)" : "0 12px 40px -12px rgba(10,10,15,0.4)",
                  transition: "box-shadow .2s ease, border-color .2s ease"
                }}>
                
              <input
                  value={value}
                  onChange={(e) => setValue(e.target.value)}
                  onFocus={() => setFocused(true)}
                  onBlur={() => setFocused(false)}
                  placeholder={copyText("home.hero.chat_placeholder")}
                  style={{
                    flex: 1,
                    background: "transparent",
                    border: "none",
                    outline: "none",
                    color: "white",
                    fontFamily: "var(--body)",
                    fontSize: 17,
                    letterSpacing: "-0.01em",
                    padding: "16px 0",
                    minWidth: 0
                  }} />
                
              <button
                  type="submit"
                  aria-label="Send"
                  style={{
                    width: 48, height: 48,
                    borderRadius: 99,
                    background: "var(--blue)",
                    border: "none",
                    color: "white",
                    display: "grid",
                    placeItems: "center",
                    flexShrink: 0
                  }}>
                  
                <ArrowUpRight size={16} />
              </button>
            </form>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 14 }}>
              {suggestions.map((s) =>
                <button
                  key={s}
                  type="button"
                  onClick={() => openAgent(s)}
                  className="mono"
                  style={{
                    padding: "8px 12px",
                    background: "transparent",
                    border: "1px solid var(--rule-strong)",
                    color: "var(--muted)",
                    borderRadius: 99,
                    cursor: "pointer",
                    fontSize: 10
                  }}
                  onMouseEnter={(e) => {e.currentTarget.style.borderColor = "var(--ink)";e.currentTarget.style.color = "var(--ink)";}}
                  onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--rule-strong)";e.currentTarget.style.color = "var(--muted)";}}>
                  
                  {s}
                </button>
                )}
            </div>
          </div>
        </div>
      </div>

      {reelOpen && <ReelModal onClose={() => setReelOpen(false)} />}
      <AgentModal open={agentOpen} seed={agentSeed} onClose={() => setAgentOpen(false)} />
    </section>
    <section className="r-reel-row" style={{ paddingBottom: 0, position: "relative", zIndex: 2, marginBottom: -180 }}>
      <div className="container">
        <ReelLauncher onClick={() => setReelOpen(true)} wide />
      </div>
    </section>
    </>);

};

// Reel launcher card — sits in the hero sub area, opens modal on click
const ReelLauncher = ({ onClick, wide = false }) => {
  const videoRef = React.useRef(null);
  const [hover, setHover] = React.useState(false);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;v.volume = 0;v.defaultMuted = true;
    if (v.audioTracks) {
      for (let i = 0; i < v.audioTracks.length; i++) v.audioTracks[i].enabled = false;
    }
  }, []);

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="r-reel-launcher"
      aria-label="Launch reel"
      style={{
        background: "transparent",
        border: "none",
        padding: 0,
        cursor: "pointer",
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        gap: 14,
        width: wide ? "100%" : 200,
        flexShrink: 0
      }}>
      
      <div style={{
        position: "relative",
        width: "100%",
        aspectRatio: wide ? "21/9" : "16/10",
        borderRadius: 8,
        overflow: "hidden",
        background: "var(--ink)",
        boxShadow: hover ? "0 14px 40px -10px rgba(10,10,15,0.45)" : "0 8px 24px -10px rgba(10,10,15,0.35)",
        transform: hover ? "translateY(-2px)" : "none",
        transition: "transform .2s ease, box-shadow .2s ease"
      }}>
        <video
          ref={videoRef}
          src="assets/reel.mp4"
          autoPlay muted loop playsInline disableRemotePlayback
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        
        {/* Play overlay */}
        <div style={{
          position: "absolute", inset: 0,
          display: "grid", placeItems: "center",
          background: "linear-gradient(to top, rgba(10,10,15,0.35), rgba(10,10,15,0.05))"
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 99,
            background: "rgba(255,255,255,0.95)",
            display: "grid", placeItems: "center",
            color: "var(--ink)",
            transform: hover ? "scale(1.08)" : "scale(1)",
            transition: "transform .2s ease"
          }}>
            <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor" aria-hidden="true">
              <path d="M0 0 L14 8 L0 16 Z" />
            </svg>
          </div>
        </div>
      </div>
    </button>);

};

// Reel modal — fullscreen overlay with playing reel
const ReelModal = ({ onClose }) => {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  return ReactDOM.createPortal(
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(10,10,15,0.92)",
        display: "grid", placeItems: "center",
        padding: 32,
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        animation: "reelFade .25s ease"
      }}>
      
      <button
        onClick={onClose}
        aria-label="Close reel"
        style={{
          position: "absolute", top: 8, right: 16,
          width: 48, height: 48,
          background: "transparent",
          border: "none",
          color: "white",
          display: "grid", placeItems: "center",
          cursor: "pointer",
          fontSize: 24,
          zIndex: 10
        }}>
        
        ✕
      </button>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: "relative",
          width: "min(100%, 1200px)",
          aspectRatio: "16/9",
          background: "var(--ink)",
          borderRadius: 12,
          overflow: "hidden",
          boxShadow: "0 40px 120px -20px rgba(0,0,0,0.6)"
        }}>
        
        <video
          ref={videoRef}
          src="assets/reel.mp4"
          autoPlay
          controls
          playsInline
          style={{ width: "100%", height: "100%", display: "block" }} />
        
      </div>
      <style>{`@keyframes reelFade { from { opacity: 0 } to { opacity: 1 } }`}</style>
    </div>,
    document.body
  );
};

window.Hero = Hero;