const { useState, useEffect, useRef } = React;

const ABOUT_TWEAKS = /*EDITMODE-BEGIN*/{
  "showStats": true
}/*EDITMODE-END*/;

// ============ shared icons ============
const AIcon = {
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}>
      <path d="M5 12 H19 M13 6 L19 12 L13 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  ),
  Menu: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}>
      <line x1="4" y1="6" x2="20" y2="6" stroke="currentColor" strokeWidth="1.8"/>
      <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" strokeWidth="1.8"/>
      <line x1="4" y1="18" x2="20" y2="18" stroke="currentColor" strokeWidth="1.8"/>
    </svg>
  ),
  Chevrons: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <path d="M10 14 L20 24 L10 34" stroke="currentColor" strokeWidth="3" strokeLinecap="square"/>
      <path d="M22 14 L32 24 L22 34" stroke="currentColor" strokeWidth="3" strokeLinecap="square"/>
      <path d="M34 14 L44 24 L34 34" stroke="currentColor" strokeWidth="3" strokeLinecap="square"/>
    </svg>
  ),
  Grid: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      {[0,1,2].map(r => [0,1,2].map(c => (
        <rect key={`${r}${c}`} x={6+c*13} y={6+r*13} width="9" height="9" fill="currentColor"/>
      )))}
    </svg>
  ),
  Target: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <circle cx="24" cy="24" r="14" stroke="currentColor" strokeWidth="2.5"/>
      <circle cx="24" cy="24" r="3.5" fill="currentColor"/>
      <line x1="24" y1="2" x2="24" y2="10" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="24" y1="38" x2="24" y2="46" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="2" y1="24" x2="10" y2="24" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="38" y1="24" x2="46" y2="24" stroke="currentColor" strokeWidth="2.5"/>
    </svg>
  ),
  Shield: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <path d="M24 4 L42 10 V24 C42 34 34 41 24 44 C14 41 6 34 6 24 V10 Z" stroke="currentColor" strokeWidth="2.5"/>
      <path d="M16 24 L22 30 L33 18" stroke="currentColor" strokeWidth="3" strokeLinecap="square"/>
    </svg>
  ),
  Network: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <path d="M14 18 C14 12 19 8 24 8 C29 8 34 12 34 18" stroke="currentColor" strokeWidth="2.5" fill="none"/>
      <circle cx="24" cy="8" r="4" fill="currentColor"/>
      <circle cx="10" cy="36" r="4" fill="currentColor"/>
      <circle cx="38" cy="36" r="4" fill="currentColor"/>
      <line x1="20" y1="12" x2="13" y2="32" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="28" y1="12" x2="35" y2="32" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="14" y1="36" x2="34" y2="36" stroke="currentColor" strokeWidth="2.5"/>
    </svg>
  ),
};

// ============ NAV (matches site) ============
function Nav({ scrolled }) {
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const closeMenu = () => setMenuOpen(false);
  const scrollTop = (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); closeMenu(); };
  return (
    <header className={`nav ${scrolled ? 'nav--solid' : 'nav--floating'}`}>
      <div className="nav__inner">
        <a href="/" className="nav__logo" aria-label="Ages Productions home">
          <img src="assets/logo-primary.png" alt="Ages Productions"/>
        </a>
        <nav className="nav__links">
          <a href="/" className="nav__link">Home</a>
          <a href="Ages Productions Media Workflow.html" className="nav__link">Media Workflow</a>
          <a href="Ages Productions Self-Shoot.html" className="nav__link">Self-Shoot Systems</a>
          <a href="#" className="nav__link nav__link--active" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>About</a>
          <a href="Ages Productions Use Cases.html" className="nav__link">Use Cases</a>
          <a href="Ages Productions Contact.html" className="nav__link">Contact</a>
        </nav>
        <div className="nav__cta"></div>
        <button className="nav__menu" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)}>
          {menuOpen
            ? <svg viewBox="0 0 24 24" width="22" height="22" fill="none"><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" strokeWidth="1.8"/><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" strokeWidth="1.8"/></svg>
            : <AIcon.Menu width="22" height="22"/>}
        </button>
      </div>
      <div className={`nav__drawer ${menuOpen ? 'nav__drawer--open' : ''}`} aria-hidden={!menuOpen}>
        <div className="nav__drawer-inner">
            <a href="/" className="nav__drawer-link" onClick={closeMenu}>Home</a>
            <a href="Ages Productions Media Workflow.html" className="nav__drawer-link" onClick={closeMenu}>Media Workflow</a>
            <a href="Ages Productions Self-Shoot.html" className="nav__drawer-link" onClick={closeMenu}>Self-Shoot Systems</a>
            <a href="#" className={`nav__drawer-link nav__drawer-link--active`} onClick={scrollTop}>About</a>
            <a href="Ages Productions Use Cases.html" className="nav__drawer-link" onClick={closeMenu}>Use Cases</a>
            <a href="Ages Productions Contact.html" className="nav__drawer-link" onClick={closeMenu}>Contact</a>
        </div>
      </div>
    </header>
  );
}

// ============ FOOTER (matches site) ============
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src="assets/logo-primary.png" alt="Ages Productions" className="footer__logo"/>
          <p className="footer__tag">Field-to-post media workflow management for high-volume Reality TV productions.</p>
        </div>
        <div className="footer__cols">
          <div>
            <h6>SERVICES</h6>
            <a href="Ages Productions Media Workflow.html">Media Workflow</a>
            <a href="Ages Productions Self-Shoot.html">Self-Shoot Systems</a>
            <a href="Ages Productions Media Workflow.html#remote-cloud">Remote Delivery</a>
          </div>
          <div>
            <h6>COMPANY</h6>
            <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>About</a>
            <a href="Ages Productions Use Cases.html">Use Cases</a>
            <a href="Ages Productions Contact.html">Contact</a>
          </div>
          <div>
            <h6>CONTACT</h6>
            <a href="Ages Productions Contact.html">Build a Media Plan</a>
            <span className="footer__loc">Miami · Worldwide</span>
          </div>
        </div>
      </div>
      <div className="footer__bar">
        <span>© 2026 Ages Productions. All rights reserved.</span>
        <span>v1.0 · Field → Post</span>
      </div>
    </footer>
  );
}
// ============================================================
// VARIANT B — BOLDER · Cinematic, animated technical motif
// ============================================================

function HeroB() {
  return (
    <section className="bb-hero">
      <div className="bb-hero__bg" aria-hidden="true">
        <div className="bb-hero__scan"></div>
        <div className="bb-hero__grid"></div>
      </div>
      <div className="bb-hero__inner container">
        <div className="bb-hero__crumb">
          <span>AGES&nbsp;PRODUCTIONS</span>
          <span className="bb-hero__sep">/</span>
          <span>ABOUT</span>
          <span className="bb-hero__sep">/</span>
          <span className="bb-hero__crumb-active">ORIGIN HUB</span>
        </div>
        <h1 className="bb-hero__title">
          We don't just<br/>
          move media.
        </h1>
        <h2 className="bb-hero__sub">
          We engineer the<br/>
          <span className="text-blue-bright">workflow it moves through.</span>
        </h2>
        <p className="bb-hero__lede">
          Ages Productions is a media workflow company built around the pressure of unscripted
          production. Two decades in the industry. Ten years leading media management on Reality TV.
          One discipline: field to post, without surprises.
        </p>

        {/* large readout strip */}
        <div className="bb-hero__readout" aria-hidden="true">
          <div><em>SIGNAL</em><span className="bb-hero__live"><i></i>LIVE</span></div>
          <div><em>OFFLOAD</em><span>11.42 TB</span></div>
          <div><em>VERIFY</em><span>100%</span></div>
          <div><em>UPLOAD</em><span>612 GB → S3</span></div>
          <div><em>DAY</em><span>27 / S04</span></div>
        </div>
      </div>
    </section>
  );
}

function ManifestoB() {
  const lines = [
    "Ages Productions exists because Reality TV media management was being treated as data entry.",
    "It is not data entry. It is a craft.",
    "It is the difference between footage that makes the cut and footage lost to a corrupted card.",
    "The difference between post starting on Monday and post waiting until Wednesday.",
    "The difference between a show finishing on time and a show that doesn't.",
    "We built Ages to handle that difference.",
  ];
  return (
    <section className="bb-manifesto">
      <div className="container">
        <span className="section-label">[01]&nbsp;&nbsp;MANIFESTO</span>
        <div className="bb-manifesto__body">
          {lines.map((l, i) => (
            <p key={i} className={`bb-manifesto__line ${i === 1 ? 'bb-manifesto__line--accent' : ''}`}>
              <span className="bb-manifesto__num">{String(i+1).padStart(2,'0')}</span>
              <span>{l}</span>
            </p>
          ))}
        </div>
      </div>
    </section>
  );
}

function TimelineB() {
  const lanes = [
    { years: '2005 — Present', tag: 'AUDIO',     items: ['FOH Operator', 'Album & Vocal Recording', 'Production Sound', 'Multitrack Workflows'] },
    { years: '2008 — Present', tag: 'BROADCAST', items: ['Live Satellite Events', 'Technical Director', 'Multi-Cam Control', 'Network Broadcast'] },
    { years: '2012 — Present', tag: 'CAMERA',    items: ['Senior Rental Tech', 'Camera Op · 1st AC · Jib', 'Specialty Rigs & PTZ'] },
    { years: '2010 — Present', tag: 'POST',      items: ['Editor → Lead Editor', 'NLE Pipelines', 'Proxy Transcoding', 'Remote Access'] },
    { years: '2014 — Present', tag: 'DATA',      items: ['10+ Yrs Lead Media Mgmt', 'DIT · Data Wrangling', 'Custom Pipelines & Automation', '50TB-per-Day Workflows'] },
  ];
  return (
    <section className="bb-timeline">
      <div className="container">
        <div className="bb-timeline__head">
          <span className="section-label">[02]&nbsp;&nbsp;TWO DECADES OF SIGNAL</span>
          <h2 className="h-display">
            Every adjacent craft<br/>
            <span className="text-blue">feeds the workflow.</span>
          </h2>
          <p className="bb-timeline__lede">
            Audio, broadcast, camera, post, and data. The reason Ages Productions can build
            workflows that hold under pressure is that the team has lived inside every adjacent
            craft — and knows where they break.
          </p>
        </div>

        <div className="bb-lanes">
          <div className="bb-lane bb-lane--head">
            <span>DOMAIN</span>
            <span>YEARS</span>
            <span>WHERE WE'VE WORKED</span>
          </div>
          {lanes.map(l => (
            <div className="bb-lane" key={l.tag}>
              <span className="bb-lane__tag">{l.tag}</span>
              <span className="bb-lane__years">{l.years}</span>
              <div className="bb-lane__items">
                {l.items.map(i => <span key={i} className="bb-lane__chip">{i}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsB() {
  const stats = [
    { num: '20', unit: 'YRS', label: 'In production' },
    { num: '10', unit: 'YRS', label: 'Leading media management' },
    { num: '100', unit: '+', label: 'Productions delivered' },
    { num: '50', unit: 'TB', label: 'Daily offload capacity' },
    { num: '0',  unit: '',   label: 'Data loss events' },
    { num: '100', unit: '%', label: 'Checksum verified' },
  ];
  return (
    <section className="bb-stats">
      <div className="container">
        <div className="bb-stats__head">
          <span className="section-label section-label--light">[03]&nbsp;&nbsp;BY THE NUMBERS</span>
          <h2 className="bb-stats__title">Two decades. Zero data loss.</h2>
        </div>
        <div className="bb-stats__grid">
          {stats.map((s, i) => (
            <div className="bb-stat" key={i}>
              <div className="bb-stat__big">
                <span className="bb-stat__num">{s.num}</span>
                <span className="bb-stat__unit">{s.unit}</span>
              </div>
              <div className="bb-stat__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PrinciplesB() {
  const items = [
    { kw: '01', label: 'FORWARD MOTION', sub: 'Always moving ahead.' },
    { kw: '02', label: 'STRUCTURE',      sub: 'Organized. Systematic.' },
    { kw: '03', label: 'PRECISION',      sub: 'Detail-driven. Purposeful.' },
    { kw: '04', label: 'RELIABILITY',    sub: 'Trusted. Dependable.' },
    { kw: '05', label: 'WORKFLOW',       sub: 'Connected. Seamless.' },
  ];
  return (
    <section className="bb-principles">
      <div className="container bb-principles__inner">
        <div className="bb-principles__head">
          <span className="section-label">[04]&nbsp;&nbsp;PRINCIPLES</span>
          <h2 className="h-display">Five non-negotiables.</h2>
        </div>
        <div className="bb-principles__list">
          {items.map((it, i) => (
            <div className="bb-prin" key={i}>
              <span className="bb-prin__num">{it.kw}</span>
              <span className="bb-prin__label">{it.label}</span>
              <span className="bb-prin__sub">{it.sub}</span>
              <span className="bb-prin__line" aria-hidden="true"></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamB() {
  return (
    <section className="bb-team">
      <div className="container">
        <div className="bb-team__head">
          <span className="section-label">[05]&nbsp;&nbsp;TEAM</span>
          <h2 className="h-display">
            A core team.<br/>
            <span className="text-blue">A scalable bench.</span>
          </h2>
        </div>
        <div className="bb-team__grid">
          <div className="bb-team__cell bb-team__cell--lead">
            <div className="bb-team__cell-tag">CORE</div>
            <div className="bb-team__cell-title">Lead media management</div>
            <p>Single point of accountability. The most experienced lead is matched to your project — based on the scale, complexity, and demands of the show.</p>
          </div>
          <div className="bb-team__cell">
            <div className="bb-team__cell-tag">BENCH</div>
            <div className="bb-team__cell-title">Vetted freelance team</div>
            <p>DITs, data wranglers, and post liaisons we've worked with before. Right Sized for the show.</p>
          </div>
          <div className="bb-team__cell">
            <div className="bb-team__cell-tag">ENGINEERING</div>
            <div className="bb-team__cell-title">Pipeline build-out</div>
            <p>Specialists brought in — or assigned from the core team — for as many hours as it takes to get the custom pipeline right from day one.</p>
          </div>
          <div className="bb-team__cell">
            <div className="bb-team__cell-tag">SCALE</div>
            <div className="bb-team__cell-title">1 → 20 wranglers</div>
            <p>Our people and workflow scale because of the systems we've built. The discipline doesn't change with team size — only the number of hands on the cards.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTAB() {
  return (
    <section className="bb-cta" id="contact">
      <div className="bb-cta__bg" aria-hidden="true">
        <div className="bb-cta__scan"></div>
      </div>
      <div className="container bb-cta__inner">
        <span className="section-label section-label--light">[06]&nbsp;&nbsp;NEXT STEP</span>
        <h2 className="bb-cta__title">
          Bring us your hardest<br/>
          <span className="text-blue-bright">media problem.</span>
        </h2>
        <p className="bb-cta__lede">
          Multi-cam, multi-city, multi-country. 50TB days. Cast phones. Cloud handoff.
          We'll design the workflow before the first card hits the bay.
        </p>
        <div className="bb-cta__buttons">
          <a href="Ages Productions Contact.html" className="btn btn--primary btn--lg">
            <span>Build a Media Management Plan</span>
            <AIcon.Arrow width="20" height="20"/>
          </a>
        </div>
      </div>
    </section>
  );
}

function VariantB({ tweaks }) {
  return (
    <div className="variant variant--b">
      <HeroB/>
      <ManifestoB/>
      <TimelineB/>
      {tweaks.showStats && <StatsB/>}
      <PrinciplesB/>
      <TeamB/>
      <CTAB/>
    </div>
  );
}

// ============================================================
// APP — design canvas with two artboards
// ============================================================

function AboutApp() {
  const [t, setTweak] = window.useTweaks(ABOUT_TWEAKS);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const { DesignCanvas, DCSection, DCArtboard } = window;

  return (
    <div className="about-app">
      <Nav scrolled={scrolled}/>
      <VariantB tweaks={t}/>
      <Footer/>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Sections">
          <window.TweakToggle label="Stats strip" value={t.showStats} onChange={v => setTweak('showStats', v)}/>
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AboutApp/>);