// Main App — composes everything

const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

function WorkSection({ num, label, accent, items, count, layout, onOpen, sectionId, verticalItems, campaigns, onOpenCampaign }) {
  const ref = window.useReveal();
  const hasVertical = verticalItems && verticalItems.length > 0;
  const hasCampaigns = campaigns && campaigns.length > 0;
  return (
    <section className="section" id={sectionId} ref={ref}>
      <div className="container">
        <div className="section-header">
          <span className="section-num">// {num}</span>
          <h2 className="section-title">
            {label.split('/').map((part, i) =>
              i % 2 === 1
                ? <span key={i} className="accent">/{part}/</span>
                : <span key={i}>{part}</span>
            )}
          </h2>
          <span className="section-meta">{count} films</span>
        </div>
        <div className={`work-grid ${layout || ''}`}>
          {items.map((it, i) => (
            <window.WorkCard
              key={it.id}
              id={it.id}
              idx={i}
              total={items.length}
              tag={accent ? 'VFX' : 'Director'}
              accent={accent}
              onOpen={onOpen}
            />
          ))}
        </div>

        {hasCampaigns && (
          <div className="vertical-sub">
            <div className="vertical-sub-header">
              <span className="section-num">// campaigns</span>
              <h3 className="vertical-sub-title">
                Vertical Films <span className="accent">/campaigns/</span>
              </h3>
              <span className="vertical-sub-meta">{campaigns.length} brands</span>
            </div>
            <div className="work-grid">
              {campaigns.map((c) => (
                <window.CampaignCard
                  key={c.id}
                  campaign={c}
                  onOpenCampaign={onOpenCampaign}
                />
              ))}
            </div>
          </div>
        )}

        {hasVertical && (
          <div className="vertical-sub">
            <div className="vertical-sub-header">
              <span className="section-num">// shorts + reels</span>
              <h3 className="vertical-sub-title">
                Vertical <span className="accent">/shorts/</span>
              </h3>
              <span className="vertical-sub-meta">{verticalItems.length} films</span>
            </div>
            <div className="work-grid vertical">
              {verticalItems.map((it, i) => (
                <window.WorkCard
                  key={it.id}
                  id={it.id}
                  idx={i}
                  total={verticalItems.length}
                  tag="Director"
                  onOpen={onOpen}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function FlipkartSection({ data, onOpen }) {
  const ref = window.useReveal();
  return (
    <section className="section" id="work-live" ref={ref}>
      <div className="container">
        <div className="section-header">
          <span className="section-num">// 03</span>
          <h2 className="section-title">Virtual Production <span className="accent">/live/</span></h2>
          <span className="section-meta">First-of-its-kind</span>
        </div>
        <div className="work-grid feature">
          <window.FeatureCard
            id={data.id}
            title={data.title}
            desc={data.desc}
            points={data.points}
            tag="LIVE · VP"
            onOpen={onOpen}
          />
        </div>
        <p style={{
          fontFamily: 'var(--font-sans)',
          fontSize: 13,
          color: 'var(--fg-mute)',
          marginTop: 24,
          maxWidth: '60ch',
          lineHeight: 1.6,
        }}>
          // I direct consistent virtual production lives and live streams for Flipkart, pioneering
          real-time CG &amp; broadcast pipelines on this scale.
        </p>
      </div>
    </section>
  );
}

const ACCENT_PRESETS = {
  amber:  { '--accent': '#ffa940', '--accent-soft': 'rgba(255,169,64,0.12)', '--accent-line': 'rgba(255,169,64,0.35)' },
  red:    { '--accent': '#ff5a47', '--accent-soft': 'rgba(255,90,71,0.12)',  '--accent-line': 'rgba(255,90,71,0.35)' },
  cyan:   { '--accent': '#5ad6ff', '--accent-soft': 'rgba(90,214,255,0.12)', '--accent-line': 'rgba(90,214,255,0.35)' },
  acid:   { '--accent': '#b8ff3a', '--accent-soft': 'rgba(184,255,58,0.12)', '--accent-line': 'rgba(184,255,58,0.35)' },
  white:  { '--accent': '#f5f5f5', '--accent-soft': 'rgba(245,245,245,0.10)', '--accent-line': 'rgba(245,245,245,0.30)' },
};

function App() {
  const lb = window.useLightboxState();
  const data = window.WORK_DATA;
  const [activeCampaign, setActiveCampaign] = useStateApp(null);

  // Tweaks defaults
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "cyan",
    "density": "default"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply accent + density to root
  useEffectApp(() => {
    const root = document.documentElement;
    const preset = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS.amber;
    Object.entries(preset).forEach(([k, v]) => root.style.setProperty(k, v));
    root.setAttribute('data-density', tweaks.density);
  }, [tweaks.accent, tweaks.density]);

  return (
    <>
      <window.CursorGlow />
      <window.ScrollProgress />
      <window.Nav />
      <window.Hero />

      <WorkSection
        num="01"
        sectionId="work-director"
        label="Direction & /Tech Direction/"
        items={data.director}
        count={data.director.length}
        layout=""
        onOpen={lb.open}
        verticalItems={data.directorVertical}
        campaigns={data.campaigns}
        onOpenCampaign={setActiveCampaign}
      />

      <WorkSection
        num="02"
        sectionId="work-vfx"
        label="VFX /Supervisor/"
        accent
        items={data.vfx}
        count={data.vfx.length}
        layout=""
        onOpen={lb.open}
      />

      <FlipkartSection data={data.flipkart} onOpen={lb.open} />

      <window.About />
      <window.Contact />
      <window.Footer />

      <window.Lightbox
        activeId={lb.activeId}
        activeMeta={lb.activeMeta}
        onClose={lb.close}
      />

      <window.CampaignPanel
        campaign={activeCampaign}
        onClose={() => setActiveCampaign(null)}
        onPlayVideo={lb.open}
      />

      <window.TweaksPanel title="Tweaks" defaultPos={{ right: 24, bottom: 24 }}>
        <window.TweakSection label="Accent">
          <window.TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'amber', label: 'Amber' },
              { value: 'red',   label: 'Red' },
              { value: 'cyan',  label: 'Cyan' },
              { value: 'acid',  label: 'Acid' },
              { value: 'white', label: 'Mono' },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Density">
          <window.TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'cozy',    label: 'Cozy' },
              { value: 'default', label: 'Default' },
              { value: 'dense',   label: 'Dense' },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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