function Nav({ current, go, onTweaks }) {
  const items = [
    { id: 'hero', label: 'Home' },
    { id: 'work', label: 'Work' },
    { id: 'case-01', label: 'Building Beyond' },
    { id: 'case-02', label: 'Oasis Brand' },
    { id: 'photo', label: 'Stills' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <nav className="nav">
      <div className="nav-wm" onClick={() => go('hero')}>
        LUIS CARDONA<span className="dot">.</span>
        <span className="mono">Director / Creative Lead</span>
      </div>
      <div className="nav-links">
        {items.map((i, idx) => (
          <a key={i.id}
            className={'nav-link ' + (current === i.id ? 'active' : '')}
            onClick={() => go(i.id)}>
            <span className="num">{String(idx + 1).padStart(2, '0')}</span>{i.label}
          </a>
        ))}
      </div>
      <a className="nav-cta" href={`mailto:${RESUME.email}?subject=Let%27s%20work%20together`}>Let's work together →</a>
    </nav>
  );
}

function Hero({ variant, roleFraming }) {
  // variant: 'video' | 'kinetic' | 'split'
  const marquee = [
    'CREATIVE DIRECTION', '●', 'BRAND SYSTEMS', '●', 'CAMPAIGN FILM',
    '●', 'VIDEO PRODUCTION', '●', 'COLOR GRADING', '●', 'MOTION DESIGN',
    '●', 'ART DIRECTION', '●', 'TEAM LEADERSHIP', '●',
  ];
  const lines = roleFraming === 'cd'
    ? [['I DIRECT', null], ['CREATIVE.', null], ['END TO', 'END.']]
    : roleFraming === 'producer'
      ? [['I PRODUCE', null], ['STORIES', null], ['THAT', 'MOVE.']]
      : [['I DIRECT', null], ['CREATIVE.', null], ['END TO', 'END.']];

  const renderTitle = () => (
    <h1 className="hero-title">
      <span className="row"><span>{lines[0][0]}{lines[0][1] && <em className="hi"> {lines[0][1]}</em>}</span></span>
      <span className="row"><span>{lines[1][0]}{lines[1][1] && <em className="hi"> {lines[1][1]}</em>}</span></span>
      <span className="row"><span>{lines[2][0]}{lines[2][1] && <em className="hi"> {lines[2][1]}</em>}</span></span>
    </h1>
  );

  return (
    <section className={`panel hero ${variant === 'kinetic' ? 'hero-kinetic' : ''} ${variant === 'split' ? 'hero-split' : ''}`}>
      <div className="hero-topline">
        <span>LUIS CARDONA / PORTFOLIO</span>
        <span className="mid">SOUTH FLORIDA — REMOTE / HYBRID</span>
        <span className="right">AVAILABLE TO WORK</span>
      </div>

      {variant === 'split' ? (
        <div className="hero-split-grid">
          <div>
            <div className="role-eyebrow">CREATIVE DIRECTOR / VIDEO DIRECTOR / PRODUCER</div>
            {renderTitle()}
          </div>
          <div className="hero-split-still">
            <img src="photos/p04.jpeg" alt="Still" />
            <div className="meta">
              <span>FR_001 / BUILDING BEYOND</span>
              <span>2.39:1</span>
            </div>
          </div>
        </div>
      ) : (
        renderTitle()
      )}

      {variant === 'kinetic' && (
        <div className="hero-sub">— CREATIVE DIRECTOR  ·  VIDEO PRODUCER  ·  EDITOR —</div>
      )}

      <div className="hero-footer">
        <div><span className="lbl">Based</span><b>Fort Lauderdale, FL</b></div>
        <div><span className="lbl">For hire</span><b>Creative Director / Associate Creative Director / Video</b></div>
        <div><span className="lbl">Creative That Converts</span><b className="hi" style={{ color: 'var(--neon)' }}>$3.55M+ Raised</b></div>
        <div className="scrollhint">
          <span>Scroll</span><span className="arrow">↓</span>
        </div>
      </div>

      <div className="hero-marquee">
        <div className="track">
          {[...marquee, ...marquee].map((m, i) => (
            m === '●' ? <span key={i} className="sep">●</span> : <span key={i}>{m}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkIndex({ onOpen, onOpenVideo, onOpenGuide }) {
  const handleClick = (w) => {
    if (w.id === 'oasis-brand') return onOpenGuide();
    if (w.youtube) return onOpenVideo(w.youtube);
    onOpen(w.id);
  };
  return (
    <section className="panel work">
      <div className="panel-eyebrow" data-reveal><span className="num">02</span>Selected work</div>
      <h2 className="panel-h" data-reveal><span className="reveal-line"><span>Selected</span></span><br /><span className="reveal-line"><span>work.<em className="hi">_</em></span></span></h2>
      <div className="work-list">
        {WORKS.map((w, i) => (
          <div key={w.id} className="work-row" data-reveal
            onClick={() => handleClick(w)}>
            <span className="num">{String(i + 1).padStart(2, '0')} —</span>
            <span className="title">{w.title}</span>
            <span className="client">{w.client}</span>
            <span className="type">{w.type}</span>
            <span className="arrow">→</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function CaseBuildingBeyond({ onOpenVideo }) {
  return (
    <section className="panel case case-bb">
      <div className="panel-eyebrow" data-reveal><span className="num">03</span>Case Study 01 / Capital Campaign</div>
      <h2 className="panel-h" data-reveal><span className="reveal-line"><span>Building</span></span><br /><span className="reveal-line"><span>Beyond.<em className="hi">_</em></span></span></h2>

      <div className="case-meta">
        <div><span className="lbl">Client</span><b>Oasis Church</b></div>
        <div><span className="lbl">Role</span><b>Creative Director</b></div>
        <div><span className="lbl">Deliverable</span><b>Anchor Film + Campaign</b></div>
        <div><span className="lbl">Runtime</span><b>02:45</b></div>
        <div><span className="lbl">Ratio</span><b>16:9</b></div>
      </div>

      <div className="case-hero" onClick={() => onOpenVideo('EjeLAraoQ2k')}>
        <img src="https://img.youtube.com/vi/EjeLAraoQ2k/maxresdefault.jpg"
          onError={(e) => { e.target.src = 'photos/p04.jpeg'; }}
          alt="Building Beyond thumbnail" />
        <div className="overlay">
          <button className="play">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
          </button>
        </div>
        <div className="bars">
          <span>FILM / BUILDING BEYOND / 02:45</span>
          <span>CLICK TO PLAY</span>
        </div>
      </div>

      <div className="stat-strip">
        <div className="stat-cell"><div className="n">$2.5M</div><div className="l">Raised</div></div>
        <div className="stat-cell"><div className="n">1</div><div className="l">Anchor film</div></div>
        <div className="stat-cell"><div className="n">6</div><div className="l">Weeks in production</div></div>
        <div className="stat-cell"><div className="n">100%</div><div className="l">In-house</div></div>
      </div>

      <div className="case-body">
        <div>
          <span className="lbl">The Brief</span>
          <h4>The biggest ask in the church's history.</h4>
          <p>
            Oasis set out to raise the capital for a new building — the
            largest campaign it had ever attempted. We needed one film that
            could carry the emotional and strategic weight of the entire ask.
          </p>
        </div>
        <div>
          <span className="lbl">The Work</span>
          <h4>Concept → script → direction → cut.</h4>
          <p>
            I led the campaign as Creative Director and directed the anchor
            video end-to-end — setting the creative strategy, writing the
            story, directing the shoot, and cutting the final film. The film
            played in services, in meetings, and across every channel we owned.
          </p>
          <p>
            The approach: under-promise on production polish, over-deliver on
            the human story. Real people. Honest light. A single clear line of
            thought the audience could hold onto through the ask.
          </p>
        </div>
      </div>

      <blockquote className="case-pull">
        "Real people. Honest light. One clear line of thought."
      </blockquote>

      <div className="case-body">
        <div>
          <span className="lbl">The Result</span>
          <h4>$2.5M raised.</h4>
          <p>
            The campaign closed at $2.5M — the largest the organization had
            ever run. Follow-up work has compounded since, continuing a pattern
            of strategic storytelling tied directly to measurable outcomes.
          </p>
        </div>
        <div>
          <span className="lbl">Also on this project</span>
          <h4>Previous campaign work drove an additional $1M.</h4>
          <p>
            Earlier fundraising work I directed at Oasis generated $750K in
            pledges in 2019; a follow-up spot added $300K. The pattern isn't
            an accident — it's what happens when story, strategy and delivery
            are in one pair of hands.
          </p>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav; window.Hero = Hero; window.WorkIndex = WorkIndex; window.CaseBuildingBeyond = CaseBuildingBeyond;