/* Celestia Pictures — Section Components */

const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

/* ============ NAV ============ */
function Nav({ scrolled, active, onNav, onOpenDrawer }) {
  const items = [
    ['studio', 'Studio'],
    ['services', 'Services'],
    ['work', 'Work'],
    ['vision', 'Vision'],
    ['team', 'Team'],
    ['investors', 'Investors'],
    ['careers', 'Careers'],
    ['contact', 'Contact'],
  ];
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-logo" onClick={() => scrollToSection('home')}>
        <img src="assets/celestia-horizontal.svg" alt="Celestia Pictures" />
      </div>
      <div className="nav-links">
        {items.map(([id, label]) => (
          <a key={id}
             href={`#${id}`}
             className={active === id ? 'active' : ''}
             onClick={(e) => { e.preventDefault(); onNav(id); }}>
            {label}
          </a>
        ))}
      </div>
      <a className="nav-cta" href="#contact" onClick={(e)=>{e.preventDefault(); onNav('contact');}}>
        Partner With Us
      </a>
      <button className="nav-burger" onClick={onOpenDrawer} aria-label="Open menu">
        <span/><span/><span/>
      </button>
    </nav>
  );
}

function Drawer({ open, onClose, onNav }) {
  const items = [
    ['home', 'Home'], ['studio', 'Studio'], ['services', 'Services'],
    ['work', 'Work'], ['vision', 'Vision'], ['team', 'Team'],
    ['partners', 'Partnerships'], ['investors', 'Investors'],
    ['careers', 'Careers'], ['contact', 'Contact'],
  ];
  return (
    <div className={`nav-drawer ${open ? 'open' : ''}`}>
      <button className="close" onClick={onClose}>✕</button>
      {items.map(([id, label]) => (
        <a key={id} href={`#${id}`} onClick={(e)=>{e.preventDefault(); onNav(id); onClose();}}>{label}</a>
      ))}
    </div>
  );
}

/* ============ HERO ============ */
function Hero({ onNav }) {
  return (
    <section id="home" className="hero">
      <div className="hero-bg" />
      <StarField count={80} />
      <div className="hero-vignette" />
      <div className="wrap hero-content">
        <div className="hero-logo">
          <img src="assets/celestia-vertical.svg" alt="Celestia Pictures" />
        </div>
        <h1 className="hero-tag">
          Where Great Stories<br/><span className="accent"><em>Find Their Light.</em></span>
        </h1>
        <p className="hero-sub">
          Celestia Pictures is a premium film and OTT content studio crafting
          cinematic experiences for modern audiences across India and global
          entertainment markets.
        </p>
        <div className="hero-ctas">
          <button className="btn primary" onClick={()=>onNav('vision')}>
            Explore Our Vision <span className="arrow">→</span>
          </button>
          <button className="btn" onClick={()=>onNav('investors')}>
            Partner With Us <span className="arrow">→</span>
          </button>
          <button className="btn ghost" onClick={()=>onNav('careers')}>
            Submit Talent <span className="arrow">→</span>
          </button>
          <button className="btn ghost" onClick={()=>onNav('contact')}>
            Connect With Us <span className="arrow">→</span>
          </button>
        </div>
      </div>

      <div className="hero-meta">
        <div className="col">
          <span>Est. MMXXVI</span>
          <span>Mumbai · India</span>
        </div>
        <div className="col scroll">
          <span>Scroll</span>
          <span className="bar" />
        </div>
        <div className="col right">
          <span>A Celestia Constrade Co.</span>
          <span>Reel № 01 / Showreel ’26</span>
        </div>
      </div>
    </section>
  );
}

/* ============ MARQUEE ============ */
function Marquee() {
  const items = ['Feature Films', 'OTT Originals', 'Web Series', 'Music Films', 'Branded Stories', 'Global Co-Productions'];
  const repeated = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {[...repeated, ...repeated].map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

/* ============ STUDIO / ABOUT ============ */
function Studio() {
  return (
    <section id="studio" className="studio">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">01 — The Studio</span>
            <h2 className="display reveal">A modern studio for<br/><em className="italic">cinematic storytelling.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Celestia Pictures is the media and entertainment division of
              Celestia Constrade Private Limited — built to craft powerful
              cinematic experiences across films, OTT content, digital
              entertainment and branded storytelling.
            </p>
          </div>
        </div>

        <div className="studio-grid">
          <div className="reveal">
            <div className="img-frame">
              <div className="studio-rays" />
              <div className="studio-motif">
                <img className="lg" src="assets/celestia-vertical.svg" alt="" />
                <p className="quote">“Every great story<br/>begins with light.”</p>
              </div>
              <div style={{position:'absolute', bottom:18, left:20, right:20, display:'flex', justifyContent:'space-between'}}>
                <span className="label" style={{color:'var(--gold)'}}>Celestia Studios</span>
                <span className="label">Mumbai · MMXXVI</span>
              </div>
              <div style={{position:'absolute', top:18, left:20, right:20, display:'flex', justifyContent:'space-between'}}>
                <span className="label">A Constrade Co.</span>
                <span className="label">2.39 : 1</span>
              </div>
            </div>
          </div>
          <div className="reveal d1 body">
            <p>
              Founded by experienced entrepreneurs and entertainment
              professionals, the company combines business strategy, creative
              development and scalable production capabilities to build a
              future-ready entertainment ecosystem.
            </p>
            <p>
              The studio is focused on developing premium storytelling formats
              with strong commercial potential while maintaining cinematic
              excellence and global relevance.
            </p>
            <p>
              With ambitions spanning feature films, web series, music-driven
              content, advertising films and international collaborations,
              Celestia Pictures aims to become a recognised name in the
              evolving entertainment landscape.
            </p>

            <div className="stat-row">
              <div className="stat"><div className="n">05</div><div className="l">Content Verticals</div></div>
              <div className="stat"><div className="n">∞</div><div className="l">Stories In Light</div></div>
              <div className="stat"><div className="n">26</div><div className="l">Est. MMXXVI</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ SERVICES ============ */
function Services() {
  const items = [
    { n: '01', title: 'Film Production',
      desc: 'End-to-end feature film development and production for theatrical and OTT distribution.' },
    { n: '02', title: 'Web Series Production',
      desc: 'Development and execution of premium episodic content tailored for modern streaming platforms.' },
    { n: '03', title: 'OTT Content Development',
      desc: 'Concept creation, scripting, production planning and scalable digital entertainment development.' },
    { n: '04', title: 'Music Videos',
      desc: 'Luxury music video production with cinematic execution and premium visual storytelling.' },
    { n: '05', title: 'Ad Films & Brand Content',
      desc: 'High-impact branded storytelling and advertising films designed for digital-first audiences.' },
    { n: '06', title: 'Creative Development',
      desc: 'IP incubation, script development and packaging — from premise to greenlit production.' },
  ];
  return (
    <section id="services">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">02 — Services</span>
            <h2 className="display reveal">Six disciplines.<br/><em className="italic">One cinematic standard.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              From feature slate to brand films, every Celestia production is
              built around the same belief — story first, executed with the
              craft and finish of a global studio.
            </p>
          </div>
        </div>
        <div className="services-grid">
          {items.map((s, i) => (
            <div key={s.n} className={`service reveal d${(i % 4) + 1}`}>
              <div className="num">{s.n}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ WORK / PROJECTS ============ */
function Work() {
  const projects = [
    { code: 'CP-01', title: 'Untitled Feature 01', genre: 'Drama · Thriller',     status: 'In Development',    format: 'Feature Film', glyph: 'I',    v: 1, cat: 'feature' },
    { code: 'CP-02', title: 'Untitled OTT Series', genre: 'Crime · Limited Series', status: 'In Pre-Production', format: 'OTT Series',   glyph: 'II',   v: 2, cat: 'series' },
    { code: 'CP-03', title: 'Untitled Music Film',  genre: 'Romance · Anthology',  status: 'In Development',    format: 'Music Film',   glyph: 'III',  v: 4, cat: 'music' },
    { code: 'CP-04', title: 'Untitled Web Series',  genre: 'Coming-of-Age',         status: 'In Development',    format: 'Web Series',   glyph: 'IV',   v: 5, cat: 'series' },
    { code: 'CP-05', title: 'Untitled Brand Film',  genre: 'Luxury · Lifestyle',   status: 'In Production',     format: 'Ad Film',      glyph: 'V',    v: 6, cat: 'brand' },
    { code: 'CP-06', title: 'Untitled Feature 02',  genre: 'Action · Espionage',   status: 'In Development',    format: 'Feature Film', glyph: 'VI',   v: 3, cat: 'feature' },
    { code: 'CP-07', title: 'Untitled Music Film 02', genre: 'Pop · Visual Album', status: 'In Pre-Production', format: 'Music Film',   glyph: 'VII',  v: 5, cat: 'music' },
    { code: 'CP-08', title: 'Untitled Brand Series', genre: 'Fashion · Heritage',  status: 'In Development',    format: 'Ad Series',    glyph: 'VIII', v: 1, cat: 'brand' },
    { code: 'CP-09', title: 'Untitled Feature 03',  genre: 'Romance · Period',    status: 'In Development',    format: 'Feature Film', glyph: 'IX',   v: 4, cat: 'feature' },
    { code: 'CP-10', title: 'Untitled OTT Series 02', genre: 'Family · Drama',    status: 'In Pre-Production', format: 'OTT Series',   glyph: 'X',    v: 6, cat: 'series' },
    { code: 'CP-11', title: 'Untitled Music Film 03', genre: 'Indie · Folk',       status: 'In Development',    format: 'Music Film',   glyph: 'XI',   v: 2, cat: 'music' },
    { code: 'CP-12', title: 'Untitled Brand Film 02', genre: 'Auto · Cinema',     status: 'In Development',    format: 'Ad Film',      glyph: 'XII',  v: 3, cat: 'brand' },
  ];
  const cats = [
    ['all', 'All Projects'],
    ['feature', 'Feature Films'],
    ['series', 'OTT & Web Series'],
    ['music', 'Music Films'],
    ['brand', 'Brand Content'],
  ];
  const [filter, setFilter] = useS('all');
  const visible = filter === 'all' ? projects : projects.filter(p => p.cat === filter);

  return (
    <section id="work">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">03 — Confidential Slate</span>
            <h2 className="display reveal">Projects in<br/><em className="italic">development.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Celestia Pictures is currently developing multiple premium
              entertainment properties across OTT formats, cinematic
              storytelling, music-driven productions and digital-first content
              ecosystems. Titles and partners are held in confidence until
              announcement.
            </p>
          </div>
        </div>

        <div className="project-filters reveal">
          {cats.map(([id, lbl]) => (
            <button key={id}
                    className={`chip ${filter === id ? 'active' : ''}`}
                    onClick={() => setFilter(id)}>
              {lbl}
            </button>
          ))}
        </div>

        <div className="projects-grid">
          {visible.map((p, i) => (
            <div key={p.code} className="proj">
              <CinematicVisual variant={p.v} glyph={p.glyph} />
              <div className="proj-overlay" />
              <div className="proj-tl">
                <span className={`pill ${p.status.includes('Pre') ? 'pre' : 'dev'}`}>{p.status}</span>
                <span className="pill fmt">{p.format}</span>
              </div>
              <div className="proj-tr">{p.code}</div>
              <div className="proj-info">
                <div className="code">Project Codename</div>
                <div className="title">{p.title}</div>
                <div className="genre">{p.genre}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{display:'flex', justifyContent:'center', marginTop: 64}} className="reveal">
          <button className="btn" onClick={()=>scrollToSection('contact')}>
            Inquire About Collaborations <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* ============ VISION ============ */
function Vision() {
  const mission = [
    'Create premium-quality cinematic and digital content',
    'Build scalable intellectual properties and entertainment franchises',
    'Collaborate with OTT platforms, music labels and global studios',
    'Promote innovative storytelling and emerging talent',
    'Expand into international co-productions and digital ecosystems',
  ];
  const expansion = [
    'International Co-Productions',
    'Feature Films',
    'Regional Cinema',
    'AI-Driven Entertainment Technology',
    'Global OTT Collaborations',
    'Music Label Expansion',
    'Animation & Digital IP',
    'Event & Entertainment Ventures',
  ];
  return (
    <section id="vision">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">04 — Vision & Expansion</span>
            <h2 className="display reveal">A globally recognised studio,<br/><em className="italic">built for the next era.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Celestia Pictures is building a future-ready entertainment
              ecosystem designed for the next era of global cinematic
              storytelling — an integrated studio across film, OTT, music
              and branded content.
            </p>
          </div>
        </div>

        <div className="mission-cols">
          <div className="reveal">
            <span className="tag-line" style={{marginBottom: 28, display:'inline-flex'}}>Our Mission</span>
            <ul style={{listStyle:'none', marginTop: 28}}>
              {mission.map((m, i) => (
                <li key={i} style={{display:'grid', gridTemplateColumns: '40px 1fr', gap: 18, padding: '18px 0', borderBottom: '1px solid var(--line-soft)'}}>
                  <span style={{fontFamily:'var(--font-sans)', fontSize: 11, letterSpacing: '0.3em', color: 'var(--gold)'}}>0{i+1}</span>
                  <p style={{color: 'var(--cream)', fontSize: 16, lineHeight: 1.55}}>{m}</p>
                </li>
              ))}
            </ul>
          </div>
          <div className="reveal d1" style={{paddingTop: 24}}>
            <p className="vision-quote">
              To establish Celestia Pictures as a globally recognised entertainment studio producing impactful cinematic experiences with international storytelling standards.
            </p>
          </div>
        </div>

        <div style={{marginBottom: 28}}>
          <span className="tag-line">Future Expansion</span>
        </div>
        <div className="expansion-grid">
          {expansion.map((e, i) => (
            <div key={i} className={`exp reveal d${(i % 4) + 1}`}>
              <div className="n">{String(i+1).padStart(2,'0')}</div>
              <h4>{e}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ TEAM ============ */
function Team() {
  const leaders = [
    {
      name: 'Ankkit Poddar', role: 'Director & Promoter',
      initials: 'AP',
      photo: 'assets/team/ankkit-poddar.jpg',
      bio: 'Entrepreneur, investor, actor and business strategist with over a decade of involvement in the entertainment industry. An alumnus of IIM Bangalore with diversified business interests spanning US healthcare, media, international ventures, branding and creative businesses.',
    },
    {
      name: 'Rani Mala Shukla', role: 'Director & Promoter',
      initials: 'RS',
      photo: 'assets/team/rani-mala-shukla.jpeg',
      bio: 'Seasoned entrepreneur and infrastructure developer with extensive experience in construction, business management and long-term project execution across residential and commercial developments.',
    },
    {
      name: 'Abhijeet Shukla', role: 'Legal Counsel',
      initials: 'AS',
      photo: 'assets/team/abhijeet-shukla.jpg',
      bio: 'Seasoned entertainment and IP lawyer practising in Bombay High Court with expertise in media law, intellectual property, entertainment agreements and legal structuring for creative businesses.',
    },
  ];
  return (
    <section id="team">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">05 — Leadership</span>
            <h2 className="display reveal">The minds <em className="italic">behind the lens.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              A leadership team that brings together creative ambition,
              business strategy and legal craft — the three foundations of a
              modern studio.
            </p>
          </div>
        </div>

        <div className="team-grid">
          {leaders.map((l, i) => (
            <div key={l.name} className={`leader reveal d${i+1}`}>
              <div className="portrait">
                <img className="photo" src={l.photo} alt={l.name} />
                <div className="photo-vignette" />
                <div className="frame-corners" />
                <div className="ph-label">Portrait № 0{i+1}</div>
              </div>
              <div className="body-pad">
                <div className="role">{l.role}</div>
                <h3>{l.name}</h3>
                <p>{l.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ PARTNERS ============ */
function Partners() {
  const items = [
    { t: 'Streaming Platforms', d: 'Originals, licensed slate and platform-led OTT collaborations.' },
    { t: 'Music Labels',        d: 'Music-driven content, integrated soundtracks and label co-ventures.' },
    { t: 'Creative Agencies',   d: 'Brand storytelling, advertising films and integrated campaigns.' },
    { t: 'Global Studios',      d: 'International co-productions, distribution and IP partnerships.' },
  ];
  const icons = ['▶', '♪', '✦', '◈'];
  return (
    <section id="partners" className="partner-section">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">06 — Strategic Partnerships</span>
            <h2 className="display reveal">Alliances built <em className="italic">to scale stories.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Celestia Pictures is actively building strategic alliances across
              entertainment, music, digital distribution, OTT ecosystems and
              production partnerships to strengthen its long-term growth
              strategy.
            </p>
          </div>
        </div>

        <div className="partner-grid">
          {items.map((p, i) => (
            <div key={p.t} className={`partner reveal d${i+1}`}>
              <div className="icon">{icons[i]}</div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ INVESTORS ============ */
function Investors() {
  const highlights = [
    'Multiple projects in active development',
    'Experienced promoters and management team',
    'Multi-sector entrepreneurial background',
    'Expansion-focused business strategy',
    'Growing OTT and digital entertainment opportunity',
    'International collaboration roadmap',
  ];
  return (
    <section id="investors">
      <div className="wrap">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">07 — Investor Relations</span>
            <h2 className="display reveal">Building the future of <em className="italic">premium entertainment.</em></h2>
          </div>
          <div className="reveal d1">
            <p className="lede">
              Celestia Pictures is positioned at the intersection of cinematic
              storytelling, OTT expansion and global digital entertainment.
              Our long-term vision is focused on scalable intellectual
              property, strategic partnerships and sustainable business growth.
            </p>
          </div>
        </div>

        <div className="investor-grid">
          <div className="reveal">
            <span className="tag-line" style={{marginBottom: 24, display:'inline-flex'}}>Key Highlights</span>
            <ul className="highlights" style={{marginTop: 28}}>
              {highlights.map((h, i) => (
                <li key={i}>
                  <span className="num">{String(i+1).padStart(2,'0')}</span>
                  <span className="txt">{h}</span>
                  <span className="arrow">✦</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="reveal d1" style={{
            background: 'linear-gradient(180deg, var(--charcoal), var(--black-2))',
            border: '1px solid var(--line-soft)',
            padding: 'clamp(32px, 4vw, 56px)',
            position: 'relative',
          }}>
            <div className="cv v3" style={{position:'absolute', inset: 0, opacity: 0.3}}>
              <div className="vignette" />
            </div>
            <div style={{position:'relative'}}>
              <span className="eyebrow">Investor Inquiry</span>
              <h3 className="display" style={{marginTop: 18, marginBottom: 18}}>
                Let's build the <em>next chapter</em> together.
              </h3>
              <p className="body" style={{marginBottom: 28}}>
                We work with select investors, family offices and institutional
                partners aligned with long-term entertainment IP development.
                Reach out for a detailed conversation.
              </p>
              <div style={{display:'grid', gap: 12, marginBottom: 28}}>
                <div style={{display:'flex', justifyContent:'space-between', padding:'12px 0', borderBottom:'1px solid var(--line-soft)'}}>
                  <span className="label">Email</span>
                  <a href="mailto:ap@celestiapictures.com" style={{color:'var(--cream)', textDecoration:'none'}}>ap@celestiapictures.com</a>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', padding:'12px 0', borderBottom:'1px solid var(--line-soft)'}}>
                  <span className="label">Phone</span>
                  <a href="tel:+917979978068" style={{color:'var(--cream)', textDecoration:'none'}}>+91 79799 78068</a>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', padding:'12px 0'}}>
                  <span className="label">Entity</span>
                  <span style={{color:'var(--cream)'}}>Celestia Constrade Pvt. Ltd.</span>
                </div>
              </div>
              <button className="btn primary" onClick={()=>scrollToSection('contact')}>
                Request an Introduction <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Nav, Drawer, Hero, Marquee, Studio, Services, Work, Vision, Team, Partners, Investors,
});