function CaseOasis({ onOpenGuide }) {
  return (
    <section className="panel case case-oasis">
      <div className="panel-eyebrow" data-reveal><span className="num">04</span>Case Study 02 / Brand System</div>
      <h2 className="panel-h" data-reveal><span className="reveal-line"><span>Oasis</span></span><br /><span className="reveal-line"><span>Brand.<em style={{ color: '#00c0e0', fontStyle: 'normal' }}>_</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>Brand Guide v1.0</b></div>
        <div><span className="lbl">Pages</span><b>48</b></div>
        <div><span className="lbl">Scope</span><b>Full system</b></div>
      </div>

      <div className="case-hero" style={{ aspectRatio: '16/9' }} onClick={onOpenGuide}>
        <img src="photos/oasis_cover.jpg" alt="Oasis Style Guide cover" style={{ objectPosition: 'center' }} />
        <div className="overlay">
          <button className="play" style={{ borderColor: '#00c0e0' }}>
            <svg viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 0, width: 32, height: 32 }}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 7V3.5L19.5 9H14z" /></svg>
          </button>
        </div>
        <div className="bars">
          <span>OASIS CHURCH / STYLE GUIDE V.01</span>
          <span>CLICK TO VIEW PDF</span>
        </div>
      </div>

      <div className="stat-strip">
        <div className="stat-cell"><div className="n">10–20</div><div className="l">Creatives aligned</div></div>
        <div className="stat-cell"><div className="n">1ST</div><div className="l">Unified guide in 20+ yrs</div></div>
        <div className="stat-cell"><div className="n">48</div><div className="l">Pages</div></div>
        <div className="stat-cell"><div className="n">4</div><div className="l">Direct reports</div></div>
      </div>

      <div className="case-body">
        <div>
          <span className="lbl">The Brief</span>
          <h4>A multi-team operation with no shared language.</h4>
          <p>
            Before this, Oasis had no unified brand guide. Every team — video,
            print, social, live production, worship — had improvised their
            own rules. Consistency suffered. Time was lost redrawing the same
            wheels.
          </p>
        </div>
        <div>
          <span className="lbl">The Work</span>
          <h4>I built the first comprehensive brand guide from scratch.</h4>
          <p>
            Logo lockups, color system, scalable identity, typography, voice.
            Rolled out across every channel, with a companion library of
            templates so the teams could execute without me in the room.
          </p>
        </div>
      </div>

      <div className="logo-grid">
        <div className="logo-tile light"><img src="photos/oasis_logo.jpg" alt="Oasis primary lockup" /></div>
        <div className="logo-tile dark"><img src="photos/oasis_logovars.jpg" alt="Color variations" /></div>
        <div className="logo-tile"><img src="photos/oasis_scalable.jpg" alt="Scalable identity system" /></div>
        <div className="logo-tile teal"><img src="photos/oasis_type.jpg" alt="Typography" /></div>
      </div>

      <blockquote className="case-pull">
        "Consistency isn't a preference. It's a multiplier."
      </blockquote>

      <div className="color-chips">
        <div className="color-chip" style={{ background: '#0bbde4' }}>
          <span className="swatch-name">Vibrant Teal</span>
          <span className="swatch-hex">#0BBDE4 · PMS 306P</span>
        </div>
        <div className="color-chip" style={{ background: '#a9a9a9', color: '#0A0A0A' }}>
          <span className="swatch-name">Soft Grey</span>
          <span className="swatch-hex">#A9A9A9 · COOL GRAY 5C</span>
        </div>
        <div className="color-chip" style={{ background: '#00596e' }}>
          <span className="swatch-name">Deep Teal</span>
          <span className="swatch-hex">#00596E · PMS 7708C</span>
        </div>
      </div>
    </section>
  );
}

function Photography({ onOpenPhoto }) {
  const first = PHOTOS.slice(0, 6);
  const second = PHOTOS.slice(5).concat(PHOTOS.slice(0, 1));
  return (
    <section className="panel photography" style={{ padding: '104px 0 80px' }}>
      <div className="panel-head">
        <div className="panel-eyebrow" style={{ color: '#888' }}><span className="num">05</span>Stills — Photography</div>
        <h2 className="panel-h" data-reveal><span className="reveal-line"><span>Through</span></span><br /><span className="reveal-line"><span>the lens.<em className="hi">_</em></span></span></h2>
      </div>

      <div className="photo-marquee-wrap">
        <div className="photo-marquee">
          {[...first, ...first].map((p, i) => (
            <div key={'a' + i} className="shot" onClick={() => onOpenPhoto(p.src)}>
              <img src={p.src} alt="" />
              <span className="tc">{p.tc}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="photo-marquee-wrap">
        <div className="photo-marquee reverse">
          {[...second, ...second].map((p, i) => (
            <div key={'b' + i} className="shot" onClick={() => onOpenPhoto(p.src)}>
              <img src={p.src} alt="" />
              <span className="tc">{p.tc}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="photo-count">
        <div>
          <div className="big">011</div>
          <div style={{ marginTop: 8 }}>SHOWN / OF A LARGER ARCHIVE</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div>SHOT ON SONY / CANON</div>
          <div style={{ marginTop: 4, color: '#555' }}>2019 — 2024</div>
        </div>
      </div>
    </section>
  );
}

function About() {
  const timeline = [
    { year: '2021 — NOW', role: 'Creative Director', sub: 'Oasis Church', desc: 'Lead all creative output — video, design, live production, worship. Manage 4 direct reports and a team of 10–20. Full department budget. Directed the $2.5M Building Beyond anchor film. Built the org\'s first comprehensive brand guide.' },
    { year: '2015 — 2021', role: 'Video Director', sub: 'Oasis Church', desc: 'Built the video department from the ground up. Weekly same-day production cadence. Produced the anchor video that drove $750K in pledges, plus a follow-up that added $300K. Redesigned live-service visual presentation, end to end.' },
    { year: '2013 — 2014', role: 'Video Editor', sub: 'Christ Fellowship', desc: 'Filmed, edited, and delivered video content for a weekly television show aired on local broadcast — hitting hard production deadlines week over week.' },
  ];
  const skills = {
    'Creative Leadership': ['Creative Direction', 'Brand Systems & Identity', 'Creative Strategy', 'Campaign Concepting', 'Art Direction', 'Storytelling'],
    'Video & Production': ['Video Production', 'Video Editing', 'Motion Design', 'Color Grading', 'Cinematography', 'Photography'],
    'Software': ['Premiere Pro', 'After Effects', 'Photoshop', 'Illustrator', 'DaVinci Resolve', 'Cinema 4D'],
    'AI & Emerging': ['Claude', 'Gemini', 'Midjourney', 'Higgsfield', 'AI-augmented workflows', 'Python'],
  };

  return (
    <section className="panel about">
      <div className="panel-eyebrow light" data-reveal><span className="num">06</span>About — Director / Creative Lead</div>
      <h2 className="panel-h" data-reveal><span className="reveal-line"><span>Twenty years</span></span><br /><span className="reveal-line"><span>of reps.<em className="hi">_</em></span></span></h2>

      <div className="about-grid">
        <div>
          <p className="about-lead">
            I direct creative <em className="hi">end&nbsp;to&nbsp;end</em> — from back-of-napkin to final delivery. Nearly two decades in video production. Five-plus years leading teams, brand systems, and multi-channel campaigns.
          </p>
          <div className="about-copy">
            <p>
              I spot patterns other people miss and translate complex ideas into stories that move audiences and drive measurable results. I thrive in challenges that stretch me — building scalable creative systems, mentoring teams, and leading projects from concept through delivery.
            </p>
            <p>
              Fluent across the Adobe Creative Suite, AI-augmented production workflows, and the strategic side of brand, content, and paid media. I teach to live audiences of ~1,000 people on a near-monthly basis, which keeps the executive presence sharp and the messaging honest.
            </p>
          </div>
        </div>

        <div className="about-side">
          <div className="about-card dark">
            <span className="lbl">Currently</span>
            <h4>Creative Director<br />@ Oasis Church</h4>
            <small>Pembroke Pines, FL · 2021 — Now</small>
          </div>
          <div className="about-card">
            <span className="lbl">Open to</span>
            <h4>Creative Director · Associate Creative Director · Video Director · Producer</h4>
            <small>Remote / hybrid · South Florida</small>
          </div>
          <div className="about-card">
            <span className="lbl">Reels raised, to date</span>
            <h4 style={{ fontSize: 44, letterSpacing: '-0.04em' }}>$3.55M+</h4>
            <small>Across three campaigns I directed.</small>
          </div>
        </div>
      </div>

      <div className="timeline">
        {timeline.map((t) => (
          <div key={t.year} className="timeline-row">
            <span className="year">{t.year}</span>
            <span className="role">{t.role}<small>{t.sub}</small></span>
            <span className="desc">{t.desc}</span>
          </div>
        ))}
      </div>

      <div className="skills">
        <div className="skills-grid">
          {Object.entries(skills).map(([cat, list]) => (
            <div key={cat} className="skills-col">
              <h5>{cat}</h5>
              <ul>{list.map(s => <li key={s}>{s}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="panel contact">
      <div className="panel-eyebrow" style={{ color: '#888' }}><span className="num" style={{ background: 'var(--neon)', color: 'var(--ink)' }}>07</span>Contact — End Roll</div>

      <h2 className="contact-huge" data-reveal><span className="reveal-line"><span>Let's build</span></span><br /><span className="reveal-line"><span>the <em className="hi">next&nbsp;one.</em></span></span></h2>

      <div className="contact-grid">
        <div>
          <span className="lbl">Email</span>
          <a href={`mailto:${RESUME.email}`}>{RESUME.email}</a>
        </div>
        <div>
          <span className="lbl">Phone</span>
          <a href={`tel:${RESUME.phone.replace(/[^0-9]/g, '')}`}>{RESUME.phone}</a>
        </div>
        <div>
          <span className="lbl">Based</span>
          <b>{RESUME.location}</b>
        </div>
        <div>
          <span className="lbl">Elsewhere</span>
          <a href={`https://${RESUME.linkedin}`} target="_blank" rel="noreferrer">LinkedIn</a>
        </div>
      </div>

      <div className="contact-ctas">
        <a className="btn neon" href={`mailto:${RESUME.email}?subject=Let%27s%20work%20together`}>
          Let's work together →
        </a>
        <a className="btn" href="assets/Luis_Cardona_Resume.docx" download>
          Download résumé ↓
        </a>
        <a className="btn" href={`https://${RESUME.linkedin}`} target="_blank" rel="noreferrer">
          Connect on LinkedIn →
        </a>
      </div>

      <div className="contact-foot">
        <span>© 2026 LUIS CARDONA</span>
        <span>DIRECTOR / CREATIVE LEAD / PRODUCER</span>
        <span>END ROLL</span>
      </div>
    </section>
  );
}

window.CaseOasis = CaseOasis; window.Photography = Photography; window.About = About; window.Contact = Contact;