const { useState, useEffect, useRef } = React;

// ============ DATA ============
const SERVICES = [
  { n: "01", t: "Social Media", em: "Management", d: "End-to-end feed ownership. Strategy, calendar, posting, community." },
  { n: "02", t: "Content", em: "Production", d: "Photo + video shoots engineered for the algorithm. Reels, UGC, stills." },
  { n: "03", t: "Creative", em: "Direction", d: "The look, the voice, the world your audience wants to live inside." },
  { n: "04", t: "Paid", em: "Campaigns", d: "Meta, TikTok, Pinterest. Creative-led and ROAS-honest." },
  { n: "05", t: "Influencer", em: "Partnerships", d: "Sourcing, briefing, negotiating. Matches that land on camera." },
  { n: "06", t: "Launch", em: "Strategy", d: "Drop a product or rebrand without silence. Rollouts that actually land." },
];

const WORK = [
  { img: "assets/portfolio-6.png", client: "Boona Signature", tag: "Brand film · 2026", desc: "A signature campaign we shot in-house — red heels, grey sweats, laptop open. The tone we build for every client.", layout: "l" },
  { img: "assets/portfolio-3.png", client: "Skyline, Miami", tag: "Editorial · Night", desc: "Rooftop shoot for a hospitality launch. Dual-camera, behind-the-scenes, social-first cut delivered in 48 hours.", layout: "r" },
  { img: "assets/portfolio-5.png", client: "The Trio", tag: "Lifestyle · Reels", desc: "Founder storytelling cut into three-week rollout: before the shoot, at the shoot, what we made with it.", layout: "center" },
  { img: "assets/portfolio-1.png", client: "Kōnā Sushi", tag: "Hospitality · Content", desc: "Monthly retainer: four shoot days, twenty Reels, a feed that tripled saves inside a quarter.", layout: "l" },
  { img: "assets/portfolio-2.png", client: "Nova Beauty", tag: "Beauty · UGC", desc: "Product drop for a clean beauty line. Close-up, fingers-in-frame, let the texture speak.", layout: "r", tall: true },
  { img: "assets/portfolio-4.png", client: "Off-Duty", tag: "Lifestyle · Stills", desc: "A day off, captured on film. Sometimes the best feed is the one that doesn't look like one.", layout: "center" },
];

const FOUNDERS = [
  { idx: "01", name: "Founder", last: "One", role: "Creative Director", bio: "Directs the look and voice. Believes a feed should feel like a place, not a channel.", handle: "@boona.media", img: "assets/portfolio-2.png", pos: "center 22%" },
  { idx: "02", name: "Founder", last: "Two", role: "Strategy & Social", bio: "Turns ideas into a calendar and a budget. Reads the data so the team doesn't have to.", handle: "@boona.media", img: "assets/portfolio-4.png", pos: "center 28%" },
  { idx: "03", name: "Founder", last: "Three", role: "Content & Production", bio: "Shoots and edits. Ships the Reel at the exact hour it performs.", handle: "@boona.media", img: "assets/portfolio-5.png", pos: "center 22%" },
];

// ============ HOOKS ============
function useInView(options = { threshold: 0.15 }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const o = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); o.disconnect(); }
    }, options);
    o.observe(ref.current);
    return () => o.disconnect();
  }, []);
  return [ref, inView];
}

function useScrollY() {
  const [y, setY] = useState(0);
  useEffect(() => {
    const on = () => setY(window.scrollY);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return y;
}

// ============ COMPONENTS ============
function Nav() {
  const y = useScrollY();
  const stuck = y > 80;
  return (
    <nav className={`nav ${stuck ? "stuck" : ""}`}>
      <a href="#top" className="logo">
        <span className="logo-mark"></span>
        boona<sup>MIAMI</sup>
      </a>
      <ul>
        <li><a href="#work">Work</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#studio">Studio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <a href="#contact" className="cta"><span>Start a project →</span></a>
    </nav>
  );
}

function VideoStage() {
  const y = useScrollY();
  const winH = typeof window !== "undefined" ? window.innerHeight : 800;
  const p = Math.min(1, y / (winH * 0.9));
  const scale = 1 + p * 0.05;
  const brightness = 1 - p * 0.15;
  return (
    <div className="video-stage" style={{ filter: `brightness(${brightness}) saturate(0.95)` }}>
      <video
        src="assets/hero.mp4"
        muted
        loop
        playsInline
        autoPlay
        style={{ transform: `scale(${scale})`, transformOrigin: "center 72%", objectPosition: "center 72%" }}
      />
      <div className="vignette"></div>
      <div className="grain"></div>
    </div>
  );
}

function Hero() {
  return (
    <header className="hero" id="top" data-screen-label="Hero">
      <div className="hero-top">
        <div className="badge">LIVE · Miami, FL</div>
        <div style={{textAlign:'right', opacity: 0.8}}>Booking Q3 · '26</div>
      </div>
      <div className="hero-center">
        <div className="hero-eyebrow">A social media & creative agency</div>
        <h1 className="hero-title">
          Social <span className="ital">that</span><br/>
          moves <span className="outline">the</span> needle.
        </h1>
      </div>
      <div className="hero-bottom">
        <div style={{opacity: 0.85}}>Est. 2025 · Three founders, one sharp feed</div>
        <div className="scroll">
          <span>Scroll</span>
          <span className="line"></span>
          <span>Explore</span>
        </div>
      </div>
    </header>
  );
}

function IntroPanel() {
  return (
    <div className="intro-panel">
      <section className="wrap">
        <div className="sec-label">The Studio</div>
        <div className="intro-grid">
          <h2 className="intro-title">
            We're <em>three</em> women <span className="strong">building</span> the kind of social presence brands wish they had.
          </h2>
          <div className="intro-side">
            <p className="intro-p">Direction meets execution. Strategy meets production. We run the whole thing from Miami — the shoots, the calendar, the captions, the data.</p>
            <div className="intro-num">
              <div>
                <div>03</div>
                <div>Founders</div>
              </div>
              <div>
                <div>'25</div>
                <div>Est.</div>
              </div>
              <div>
                <div>24h</div>
                <div>Reply time</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function PortfolioTile({ w, i }) {
  const [ref, inView] = useInView({ threshold: 0.2 });
  return (
    <div ref={ref} className={`pf-tile ${inView ? "in" : ""}`} style={{ transitionDelay: `${(i % 3) * 80}ms` }}>
      <div className="pf-img" style={{ backgroundImage: `url("${w.img}")` }}></div>
      <div className="pf-tile-meta">
        <div className="pf-tile-client">{w.client}</div>
        <div className="pf-tile-tag">{w.tag}</div>
      </div>
      <div className="pf-idx">{String(i + 1).padStart(2, "0")}</div>
    </div>
  );
}

function Portfolio() {
  return (
    <div className="portfolio-wrap">
      <section id="work" className="wrap" data-screen-label="Work">
        <div className="pf-head">
          <div className="sec-label">Selected Work · 2025 – 2026</div>
          <h2 className="big-h pf-big-h">Recent <span className="ital">files</span>, off the feed.</h2>
        </div>
        <div className="pf-mosaic">
          {WORK.map((w, i) => <PortfolioTile key={i} w={w} i={i} />)}
        </div>
      </section>
    </div>
  );
}

function Services() {
  return (
    <div className="panel burgundy">
      <section id="services" className="wrap" data-screen-label="Services">
        <div className="sec-label">Services</div>
        <h2 className="big-h">Six lanes.<br/><span className="ital">Pick</span> what you need.</h2>
        <div className="svc-grid">
          {SERVICES.map((s) => (
            <div key={s.n} className="svc">
              <div className="svc-top">
                <div className="svc-n">— {s.n}</div>
                <div className="svc-arr">↗</div>
              </div>
              <div>
                <h3>{s.t} <em>{s.em}</em></h3>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function Studio() {
  return (
    <section id="studio" className="wrap" data-screen-label="Studio">
      <div className="sec-label">The Studio · Miami, FL</div>
      <h2 className="big-h">Three <span className="ital">women</span>, one sharp feed.</h2>
      <p className="studio-lede">
        We met doing the work — styling, shooting, strategizing — and decided we'd rather <em>build</em> it than keep fixing other people's decks.
      </p>
      <div className="founders">
        {FOUNDERS.map((f) => (
          <div className="f-card" key={f.idx}>
            <div className="f-portrait" style={{ backgroundImage: `url("${f.img}")`, backgroundPosition: f.pos }}>
              <div className="f-idx">{f.idx} / 03</div>
            </div>
            <h3 className="f-name">{f.name} <em>{f.last}</em></h3>
            <div className="f-role">{f.role}</div>
            <p className="f-bio">{f.bio}</p>
            <a className="f-link" href={`https://instagram.com/${f.handle.replace("@","")}`} target="_blank" rel="noreferrer">↳ {f.handle}</a>
          </div>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  return (
    <div className="panel burgundy">
      <section id="contact" className="wrap contact-section" data-screen-label="Contact">
        <div className="sec-label">Start a project</div>
        <p className="contact-lead">Tell us about the brand, the audience, and the problem. We'll tell you what we'd do and what it costs.</p>
        <div className="contact-big">
          <a href="mailto:hello@boona.media">
            hello<em>@</em>boona.media <span className="arr">↗</span>
          </a>
        </div>
        <div className="contact-meta">
          <div>
            <h5>Studio</h5>
            <p>Miami, Florida<br/>By appointment</p>
          </div>
          <div>
            <h5>Hours</h5>
            <p>Mon — Fri · 9–6 ET<br/>DMs open always</p>
          </div>
          <div>
            <h5>Instagram</h5>
            <p><a href="https://instagram.com/boona.media" target="_blank" rel="noreferrer">@boona.media</a></p>
          </div>
          <div>
            <h5>Inquiries</h5>
            <p><a href="mailto:hello@boona.media">hello@boona.media</a></p>
          </div>
        </div>
      </section>
      <footer className="wrap">
        <div className="foot-row">
          <div>© 2026 Boona Media · Miami, FL</div>
          <div>Made with sunshine ☀</div>
        </div>
        <h2 className="foot-word">boona<em>.</em></h2>
      </footer>
    </div>
  );
}

function Tweaks({ state, setState, visible }) {
  if (!visible) return null;
  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    window.parent?.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  return (
    <div className="tweaks">
      <h5>Tweaks · Boona</h5>
      <div className="g">
        <div className="gl">Video treatment</div>
        <div className="seg">
          <button className={state.videoMode === "cinema" ? "on" : ""} onClick={() => set("videoMode", "cinema")}>Cinema</button>
          <button className={state.videoMode === "raw" ? "on" : ""} onClick={() => set("videoMode", "raw")}>Raw</button>
        </div>
      </div>
      <div className="g">
        <div className="gl">Density</div>
        <div className="seg">
          <button className={state.density === "airy" ? "on" : ""} onClick={() => set("density", "airy")}>Airy</button>
          <button className={state.density === "tight" ? "on" : ""} onClick={() => set("density", "tight")}>Tight</button>
        </div>
      </div>
    </div>
  );
}

// ============ APP ============
function App() {
  const [state, setState] = useState(window.__TWEAKS__);
  const [tweaksOn, setTweaksOn] = useState(false);

  useEffect(() => {
    // video treatment
    const el = document.querySelector(".video-stage video");
    if (el) {
      if (state.videoMode === "raw") el.style.filter = "none";
      else el.style.filter = "saturate(0.95) contrast(1.02)";
    }
    document.documentElement.style.setProperty("--pad", state.density === "tight" ? "100px" : "140px");
  }, [state]);

  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setTweaksOn(true);
      if (d.type === "__deactivate_edit_mode") setTweaksOn(false);
    };
    window.addEventListener("message", onMsg);
    window.parent?.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <>
      <Nav />
      <VideoStage />
      <Hero />
      <IntroPanel />
      <Portfolio />
      <Studio />
      <Services />
      <Contact />
      <Tweaks state={state} setState={setState} visible={tweaksOn} />
    </>
  );
}

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