/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

const prefersReducedMotion = typeof window !== "undefined" &&
window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

/* ============================================================
   HOOKS — cinematic motion (slow, restrained)
   ============================================================ */
/** Add .is-in to the element when it enters the viewport. */
function useReveal(threshold = 0.18) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {el.classList.add("is-in");obs.unobserve(el);}
      });
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return ref;
}

/** Parallax: shifts the image inside its container based on scroll position. */
function useImageParallax(intensity = 0.18) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || prefersReducedMotion) return;
    let rafId,running = true;
    const tick = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // when section is centered, parallax = 0
      // when section top hits top of viewport, shift down; when bottom hits bottom, shift up
      const progress = (r.top + r.height / 2 - vh / 2) / vh;
      const offset = progress * intensity * 100;
      el.style.setProperty("--py", `${-6 + offset}%`);
      if (running) rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);
    return () => {running = false;cancelAnimationFrame(rafId);};
  }, [intensity]);
  return ref;
}

/** Count up from 0 to `to` once when in view. */
function useCounter(to, duration = 1800) {
  const ref = useRef(null);
  const [n, setN] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (prefersReducedMotion) {setN(to);return;}
    let raf,t0 = 0;
    const tick = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
      setN(Math.round(to * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        raf = requestAnimationFrame(tick);
        obs.disconnect();
      }
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => {obs.disconnect();cancelAnimationFrame(raf);};
  }, [to, duration]);
  return [ref, n];
}

/* ============================================================
   COMPONENTS — line reveal, mask media
   ============================================================ */
/** Split children into <span class="line"><span class="inner">...</span></span> blocks.
 * Accepts an array of strings or React nodes (one per line). */
function LineReveal({ lines, className = "", as: Tag = "h1", stagger = 140, delay = 0 }) {
  const ref = useReveal(0.22);
  useEffect(() => {
    if (!ref.current) return;
    const inners = ref.current.querySelectorAll(".inner");
    inners.forEach((el, i) => {
      el.style.transitionDelay = `${delay + i * stagger}ms`;
    });
  }, [stagger, delay]);
  return (
    <Tag ref={ref} className={`line-reveal ${className}`}>
      {lines.map((l, i) =>
      <span className="line" key={i}>
          <span className="inner">{l}</span>
        </span>
      )}
    </Tag>);

}

/** Wrap an image with the mask-wipe reveal. */
function MediaReveal({ src, alt = "", className = "", dark = false, parallax = false, children }) {
  const ref = useReveal(0.18);
  const imgRef = useImageParallax(parallax ? 0.22 : 0);
  return (
    <div ref={ref} className={`media-reveal ${dark ? "media-reveal-dark" : ""} ${parallax ? "parallax-frame" : ""} ${className}`}>
      {parallax ?
      <img ref={imgRef} src={src} alt={alt} loading="lazy" /> :
      children ? children : <img src={src} alt={alt} loading="lazy" />}
    </div>);

}

/* ============================================================
   DATA
   ============================================================ */
const HERO = {
  video: "assets/video/homepage.mp4",
  poster: "assets/img/entrance-1.jpg",
};

const HERO_SCENES = [
  "Ras Al Khaimah · November 2025",
  "Dubai · March 2026",
  "Abu Dhabi · January 2026",
  "Sharjah · December 2025",
  "Dubai · February 2026",
];

const FEATURED = {
  img: "assets/img/catwalk-3.jpg",
  tag: "Featured Work · 01",
  title: "An aubergine wedding at the Ritz‑Carlton",
  date: "November 2025",
  venue: "Ras Al Khaimah",
  guests: "280"
};

const SERVICES = [
{ num: "01", name: "Entrance", desc: "Floral architecture and arrival sequencing.", img: "assets/img/entrance-1.jpg" },
{ num: "02", name: "Catwalk", desc: "Petal-lined pathways, mirror runways, light.", img: "assets/img/catwalk-2.jpg" },
{ num: "03", name: "Stage", desc: "Statement backdrops and balanced staging.", img: "assets/img/stage-1.jpg" },
{ num: "04", name: "Ceiling", desc: "Overhead florals, chandeliers, and drape.", img: "assets/img/ceiling-1.jpg" },
{ num: "05", name: "Florals", desc: "Seasonal arrangements composed in proportion.", img: "assets/img/flowers-1.jpg" },
{ num: "06", name: "Lighting", desc: "Layered washes, accents, and amber moods.", img: "assets/img/lighting-1.jpg" },
{ num: "07", name: "Centerpieces", desc: "Tablescapes designed for the room and the camera.", img: "assets/img/centerpiece-1.jpg" },
{ num: "08", name: "Cake & Detail", desc: "Cake tables, perfume bars, signature finishes.", img: "assets/img/cake-1.jpg" }];


const WORKS = [
{ src: "assets/img/entrance-2.jpg", name: "Aubergine archway", meta: "Ras Al Khaimah · 2025", span: 7, shape: "w-wide" },
{ src: "assets/img/catwalk-3.jpg", name: "Mirror procession", meta: "Dubai · 2026", span: 5, shape: "w-tall" },
{ src: "assets/img/centerpiece-2.jpg", name: "Heavy florals", meta: "Abu Dhabi · 2025", span: 6, shape: "w-sq" },
{ src: "assets/img/ceiling-2.jpg", name: "Cascade overhead", meta: "Dubai · 2025", span: 6, shape: "w-sq" },
{ src: "assets/img/backdrop-2.jpg", name: "Petal wall", meta: "Sharjah · 2025", span: 5, shape: "w-tall" },
{ src: "assets/img/welcome-1.jpg", name: "Reception", meta: "Dubai · 2024", span: 7, shape: "w-wide" }];


const QUOTE = {
  text: "We described a feeling. They returned the room we imagined — and then some.",
  name: "Hassan & Mariam",
  role: "Engagement · Dubai"
};

const CHAT_INTRO = [{ type: "bot", text: "Hello — I'm Evo's studio assistant. Tell me about your celebration and I'll outline a starting concept." }];
const CHAT_SUGGESTIONS = ["Wedding · 250 guests", "Engagement · Dubai", "Timeline?"];

/* ============================================================
   NAV
   ============================================================ */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
  { id: "services", label: "Services" },
  { id: "featured", label: "Work" },
  { id: "studio", label: "About" },
  { id: "portfolio", label: "Portfolio" }];

  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#home" className="nav-mark">
          <img src="assets/img/evologo.png" alt="Evo Creation DXB" />
        </a>
        <div className="nav-links">
          {links.map((l) =>
          <a key={l.id} href={`#${l.id}`}>{l.label}</a>
          )}
        </div>
        <a href="#contact" className="nav-cta">Enquire</a>
      </div>
    </nav>);

}

/* ============================================================
   HERO — single cinema image
   ============================================================ */
function Hero() {
  const videoRef = useRef(null);
  const [sceneIdx, setSceneIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setSceneIdx(i => (i + 1) % HERO_SCENES.length);
    }, 4000);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="hero" id="home" data-screen-label="01 Hero">
      <div className="hero-stage">
        <video
          ref={videoRef}
          src={HERO.video}
          poster={HERO.poster}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          aria-hidden="true" />
        
      </div>

      <span className="hero-rail">Est. UAE — Since 2018</span>

      <div className="hero-frame">
        <div className="hero-mark">
          <span>EVO CREATION — Luxury Event Studio, DXB</span>
          <span className="right">
            <span className="pulse">Booking 2026</span>
          </span>
        </div>

        <div className="hero-grow">
          <div className="hero-bottom">
            <div>
              <LineReveal
                as="h1"
                className="hero-title"
                stagger={180}
                delay={300}
                lines={[
                <>Where celebrations</>,
                <>become <span className="it">unforgettable</span>.</>]
                } />
              
              <div className="hero-actions">
                <a className="btn btn-on-dark solid" href="#contact">Request a Quote <span className="arrow">→</span></a>
                <a className="btn btn-on-dark" href="#portfolio">View Our Work <span className="arrow">→</span></a>
              </div>
            </div>
            <div className="hero-meta">
              <span>Now Showing</span>
              <span className="em hero-scene" key={sceneIdx}>{HERO_SCENES[sceneIdx]}</span>
            </div>
          </div>
        </div>

        <div className="hero-press">
          <span className="label">Trusted across the UAE</span>
          <span className="list">
            <span>Dubai</span>
            <span>Abu Dhabi</span>
            <span>Ras Al Khaimah</span>
          </span>
          <span className="scroll">Scroll</span>
        </div>
      </div>
    </section>);

}

/* ============================================================
   STATEMENT
   ============================================================ */
function Statement() {
  return (
    <section className="statement" id="statement" data-screen-label="02 Statement">
      <span className="eyebrow statement-eyebrow">The Studio</span>
      <LineReveal
        as="p"
        className="statement-text"
        stagger={120}
        lines={[
        <>We do not decorate rooms.</>,
        <>We compose <span className="it">atmospheres</span> —</>,
        <>designed for the entrance,</>,
        <>balanced for the photograph.</>]
        } />
      
    </section>);

}

/* ============================================================
   FEATURED — single cinema photo + minimal caption
   ============================================================ */
function Featured() {
  const ref = useReveal(0.15);
  const imgRef = useImageParallax(0.22);
  return (
    <section className="featured" id="featured" data-screen-label="03 Featured Work">
      <div ref={ref} className="media-reveal featured-frame">
        <div className="parallax-frame" style={{ position: 'absolute', inset: 0 }}>
          <img ref={imgRef} src={FEATURED.img} alt={FEATURED.title} />
        </div>
        <div className="featured-frame-content">
          <div className="featured-tag">{FEATURED.tag}</div>
          <div className="featured-bottom">
            <div>
              <LineReveal as="h2" className="featured-title" stagger={140} lines={[
              <>An <span className="it">aubergine</span> wedding</>,
              <>at the Ritz‑Carlton.</>]
              } />
              <a href="#contact" className="featured-link">Read the edit</a>
            </div>
            <div className="featured-meta">
              <div>Date<br /><span className="em">{FEATURED.date}</span></div>
              <div>Venue<br /><span className="em">{FEATURED.venue}</span></div>
              <div>Guests<br /><span className="em">{FEATURED.guests}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   STUDIO NOTE
   ============================================================ */
function Studio() {
  return (
    <section className="studio" id="studio" data-screen-label="04 Studio">
      <div className="studio-wrap">
        <div className="studio-photo media-reveal">
          <video
            src="assets/video/aboutus.mp4"
            poster="assets/img/flowers-1.jpg"
            autoPlay muted loop playsInline preload="auto"
            aria-hidden="true" />
          
        </div>
        <div className="studio-copy">
          <span className="eyebrow">About the Studio</span>
          <LineReveal as="h2" className="h-big" stagger={140} lines={[
          <>From <span className="it">sketch</span></>,
          <>to install.</>]
          } />
          <p className="copy">
            Evo Creation is a luxury wedding and event design studio based in Dubai. We plan the entire arrival sequence — from the moment your guests step out of the car to the first kiss on stage. Lighting, scent, scale, and floral are tuned together, in-house, so the venue reads as a single composition.
          </p>
          <p className="copy">
            We work across the Emirates and stay through the evening. You hold the moment. We hold the room.
          </p>
          <div className="studio-signature">
            <div>
              <span className="name">The Evo Creation Studio</span>
              <span className="role">Dubai — United Arab Emirates</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   SERVICES — quiet list of photo + name + desc
   ============================================================ */
function Services() {
  const [active, setActive] = useState(0);
  const listRef = useRef(null);

  useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger || !listRef.current) return;
    const items = listRef.current.querySelectorAll(".service");
    const triggers = [];
    items.forEach((it, i) => {
      const t = window.ScrollTrigger.create({
        trigger: it,
        start: "top 65%",
        end: "bottom 35%",
        onEnter: () => setActive(i),
        onEnterBack: () => setActive(i)
      });
      triggers.push(t);
    });
    return () => triggers.forEach((t) => t.kill());
  }, []);

  return (
    <section className="services" id="services" data-screen-label="05 Services">
      <div className="services-head">
        <div>
          <span className="eyebrow">Signature Services</span>
          <LineReveal as="h2" className="h-big" stagger={120} lines={[
          <>Every element,</>,
          <><span className="it">considered</span>.</>]
          } />
        </div>
        <span className="count">{SERVICES.length}</span>
      </div>
      <div className="services-grid">
        <div className="services-list" ref={listRef}>
          {SERVICES.map((s, i) =>
          <a
            key={s.num}
            href="#contact"
            className={`service ${i === active ? "is-active" : ""}`}
            onMouseEnter={() => setActive(i)}
            data-comment-anchor={`service-${s.num}`}>
            
              <span className="num">{s.num}.</span>
              <span className="name">{s.name}</span>
              <span className="arrow">↗</span>
            </a>
          )}
        </div>
        <div className="services-stage">
          {SERVICES.map((s, i) =>
          <img
            key={s.num}
            src={s.img}
            alt={s.name}
            loading="lazy"
            className={`services-stage-img ${i === active ? "is-active" : ""}`} />

          )}
          <div className="services-stage-cap">
            <div>
              <div className="name">{SERVICES[active].name}</div>
              <span className="desc">{SERVICES[active].desc}</span>
            </div>
            <div className="meta">{String(active + 1).padStart(2, "0")} / {String(SERVICES.length).padStart(2, "0")}</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   PORTFOLIO — alternating 7/5 + 6/6 grid
   ============================================================ */
function Portfolio() {
  // Loop the works 3x so the marquee has enough buffer to translate without gaps
  const items = [...WORKS, ...WORKS, ...WORKS];
  return (
    <section className="portfolio" id="portfolio" data-screen-label="06 Portfolio">
      <div className="portfolio-head">
        <div>
          <span className="eyebrow">Selected Work</span>
          <LineReveal as="h2" className="h-big" stagger={120} lines={[
          <>A small <span className="it">archive</span>.</>]
          } />
        </div>
        <span className="count">{WORKS.length}</span>
      </div>
      <div className="portfolio-loop">
        <div className="portfolio-track" style={{ opacity: "0.99", flexDirection: "row-reverse", alignItems: "flex-end", color: "rgb(127, 96, 44)", textAlign: "center", fontFamily: "Tahoma", gap: "27px" }}>
          {items.map((w, i) =>
          <a key={w.src + i} href="#contact" className={`work ${w.shape}`}>
              <div className="img">
                <img src={w.src} alt={w.name} loading="lazy" />
              </div>
              <div className="cap">
                <span className="cap-name">{w.name}</span>
                <span className="cap-meta">{w.meta}</span>
              </div>
            </a>
          )}
        </div>
      </div>
      <span className="portfolio-hint">Continuous · UAE 2024 — 2026</span>
    </section>);

}

/* ============================================================
   QUOTE
   ============================================================ */
function Quote() {
  return (
    <section className="quote" id="quote" data-screen-label="07 Words">
      <div className="quote-wrap">
        <LineReveal as="p" className="quote-text" stagger={140} lines={[
        <>"We described a feeling.</>,
        <>They returned the room</>,
        <>we imagined — and then some."</>]
        } />
        <div className="quote-attr">
          <span className="em">{QUOTE.name}</span>
          <span className="sep">·</span>
          {QUOTE.role}
        </div>
      </div>
    </section>);

}

/* ============================================================
   CONTACT
   ============================================================ */
function Contact() {
  return (
    <section className="contact" id="contact" data-screen-label="08 Contact">
      <div className="contact-wrap">
        <span className="eyebrow">Begin a project</span>
        <h2>Tell us the <span className="it">vision</span>.</h2>
        <p>
          Share your date, venue, and a sentence about the atmosphere you want. We respond within twenty-four hours with a concept worth opening.
        </p>
        <div className="contact-actions">
          <a className="btn btn-on-dark solid" href="https://wa.me/971502241116" target="_blank" rel="noopener">WhatsApp the studio <span className="arrow">→</span></a>
          <a className="btn btn-on-dark" href="mailto:evocreationuae@gmail.com">evocreationuae@gmail.com <span className="arrow">→</span></a>
        </div>
        <div className="contact-meta">
          <div className="contact-meta-item">Studio<span className="v">Dubai, UAE</span></div>
          <div className="contact-meta-item">Coverage<span className="v">All Emirates</span></div>
          <div className="contact-meta-item">Lead time<span className="v">8 – 12 weeks</span></div>
          <div className="contact-meta-item">Reply within<span className="v">24 hours</span></div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="footer-top">
        <div>
          <a href="#home" className="footer-mark">
            <img src="assets/img/evologo.png" alt="Evo Creation DXB" />
          </a>
          <p className="footer-tagline">Celebrations composed with care — once in the room, once in the photographs.</p>
        </div>
        <div className="footer-col">
          <h5>Studio</h5>
          <a href="#statement">About</a>
          <a href="#studio">Studio Note</a>
          <a href="#services">Services</a>
          <a href="#portfolio">Portfolio</a>
        </div>
        <div className="footer-col">
          <h5>Contact</h5>
          <a href="tel:+971502241116">+971 50 224 1116</a>
          <a href="https://wa.me/971502241116">WhatsApp</a>
          <a href="mailto:evocreationuae@gmail.com">evocreationuae@gmail.com</a>
          <a href="https://www.instagram.com/evocreation" target="_blank" rel="noopener">Instagram</a>
          <a href="https://www.tiktok.com/@evo_creation" target="_blank" rel="noopener">TikTok</a>
        </div>
        <div className="footer-col">
          <h5>Visit</h5>
          <p>Studio, Dubai<br />By appointment</p>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} Evo Creation</span>
        <span>Dubai · United Arab Emirates</span>
        <span>Held in confidence</span>
      </div>
    </footer>);

}

/* ============================================================
   CHATBOT — kept, but visually quiet
   ============================================================ */
/* ============================================================
   NUMBERS — count-up
   ============================================================ */
function NumCell({ to, suffix = "", label }) {
  const [ref, n] = useCounter(to);
  return (
    <div className="num-cell" ref={ref}>
      <span className="v">{n}{suffix && <span className="it">{suffix}</span>}</span>
      <span className="l">{label}</span>
    </div>);

}
function Numbers() {
  return (
    <section className="numbers" data-screen-label="03b Numbers">
      <div className="numbers-wrap">
        <NumCell to={184} suffix="+" label="Celebrations styled" />
        <NumCell to={10} suffix="yrs" label="UAE studio" />
        <NumCell to={23} suffix="" label="Venue partners" />
        <NumCell to={24} suffix="hr" label="Reply window" />
      </div>
    </section>);

}

/* ============================================================
   MARQUEE — quiet city drift
   ============================================================ */
const CITIES = [
{ en: "Dubai", it: "dūbay" },
{ en: "Abu Dhabi", it: "abu ẓaby" },
{ en: "Ras Al Khaimah", it: "rās" },
{ en: "Sharjah", it: "shāriqah" },
{ en: "Al Ain", it: "al ʻayn" },
{ en: "Fujairah", it: "fujayrah" }];

function Marquee() {
  const items = [...CITIES, ...CITIES, ...CITIES];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {items.map((c, i) =>
        <span className="marquee-item" key={i}>
            {c.en}
            <span className="star">✦</span>
          </span>
        )}
      </div>
    </div>);

}

function Pillars() {
  const pillars = [
  { n: "01", t: "Luxury Finishing", p: "Florals, ceiling, stage, lighting — tuned together as one composition rather than separate vendors." },
  { n: "02", t: "Full Venue Harmony", p: "From the moment guests arrive to the last photograph, every element is sequenced for the feeling you want." },
  { n: "03", t: "Fast Consultation", p: "Tell us the venue and a sentence about the atmosphere. We respond within 24 hours with a starting concept." }];

  return (
    <section className="pillars" id="pillars" data-screen-label="04 Pillars">
      <div className="pillars-head">
        <div>
          <span className="eyebrow">A Refined Experience</span>
          <LineReveal as="h2" className="h-big" stagger={140} lines={[
          <>Designed for celebrations</>,
          <>that feel <span className="it">immersive</span></>,
          <>from every angle.</>]
          } />
        </div>
        <p className="lede">Every Evo Creation event is built in-house and delivered end-to-end. No third-party logistics, no surprises on the day.</p>
      </div>
      <div className="pillars-grid">
        {pillars.map((p) =>
        <div className="pillar" key={p.n}>
            <span className="num">{p.n}.</span>
            <h4>{p.t}</h4>
            <p>{p.p}</p>
          </div>
        )}
      </div>
    </section>);

}

function Chatbot() {
  const [open, setOpen] = useState(false);
  const [msgs, setMsgs] = useState(CHAT_INTRO);
  const [val, setVal] = useState("");
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef(null);
  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, typing]);
  const send = async (text) => {
    if (!text.trim()) return;
    setMsgs((m) => [...m, { type: "user", text }]);
    setVal("");
    setTyping(true);
    const replies = {
      wedding: "Beautiful. For a UAE wedding we begin with the entrance, stage, and ceiling. What's the venue and guest count?",
      engagement: "Engagements are a sweet brief. Intimate, or full-scale?",
      timeline: "Best to book eight to twelve weeks ahead. What's your date?",
      outdoor: "Yes — estates, beach venues, and rooftops. Wind and light planning is part of the build.",
      default: "Lovely. Our studio replies within 24 hours — message us on WhatsApp and we'll begin there."
    };
    const t = text.toLowerCase();
    const reply = t.includes("wedding") ? replies.wedding :
    t.includes("engagement") ? replies.engagement :
    t.includes("timeline") || t.includes("when") || t.includes("how long") ? replies.timeline :
    t.includes("outdoor") || t.includes("beach") || t.includes("rooftop") ? replies.outdoor :
    replies.default;
    await new Promise((r) => setTimeout(r, 900 + Math.random() * 500));
    setTyping(false);
    setMsgs((m) => [...m, { type: "bot", text: reply }]);
  };
  return (
    <>
      {!open &&
      <button className="chat-launcher" onClick={() => setOpen(true)}>Enquire</button>
      }
      {open &&
      <section className="chat-panel" role="dialog" aria-modal="true">
          <div className="chat-head">
            <div>
              <h4>Ask <span className="it">Evo</span></h4>
              <span className="sub">Studio Assistant</span>
            </div>
            <button className="chat-close" onClick={() => setOpen(false)} aria-label="Close">×</button>
          </div>
          <div className="chat-body" ref={bodyRef}>
            {msgs.map((m, i) =>
          <div key={i} className={`chat-msg ${m.type}`}>
                {m.text}
                {i === 0 && m.type === "bot" &&
            <div className="chat-sugs">
                    {CHAT_SUGGESTIONS.map((s) =>
              <button key={s} className="chat-sug" onClick={() => send(s)}>{s}</button>
              )}
                  </div>
            }
              </div>
          )}
          </div>
          <form className="chat-input" onSubmit={(e) => {e.preventDefault();send(val);}}>
            <input value={val} onChange={(e) => setVal(e.target.value)} placeholder="Tell us about your event…" />
            <button type="submit">Send</button>
          </form>
        </section>
      }
    </>);

}

/* ============================================================
   TWEAKS — minimal, only what matters
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "brass"
} /*EDITMODE-END*/;

const ACCENTS = {
  brass: { c: "#9B7D4C", label: "Brass" },
  rose: { c: "#B17569", label: "Rose" },
  sage: { c: "#7A8770", label: "Sage" },
  midnight: { c: "#3E4A5A", label: "Midnight" },
  ink: { c: "#1D1A15", label: "Ink" }
};

function Tweaks() {
  const { useTweaks, TweaksPanel, TweakSection, TweakSelect } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    const a = ACCENTS[tweaks.accent] || ACCENTS.brass;
    document.documentElement.style.setProperty("--accent", a.c);
  }, [tweaks.accent]);
  return (
    <TweaksPanel title="Evo Tweaks">
      <TweakSection label="Accent">
        <TweakSelect
          label="Color"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={Object.entries(ACCENTS).map(([k, v]) => ({ value: k, label: v.label }))} />
        
      </TweakSection>
    </TweaksPanel>);

}

/* ============================================================
   APP
   ============================================================ */
function App() {
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add("is-in");obs.unobserve(e.target);}
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(
      "section .studio-copy, .service, .contact-wrap, .quote-attr"
    ).forEach((el) => {
      el.classList.add("reveal");
      obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);
  return (
    <>
      <div className="ambient-orb" aria-hidden="true"></div>
      <Nav />
      <main>
        <Hero />
        <Statement />
        <Featured />
        <Pillars />
        <Numbers />
        <Studio />
        <Marquee />
        <Services />
        <Portfolio />
        <Quote />
        <Contact />
      </main>
      <Footer />
      <Chatbot />
      <Tweaks />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);