const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTreatment": "image",
  "navStyle": "transparent",
  "accentIntensity": "balanced",
  "showTicker": true,
  "principleStyle": "icons"
}/*EDITMODE-END*/;

// ============ ICONS (matching brand guide style — thin stroke, geometric) ============
const Icon = {
  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" strokeLinejoin="miter"/>
      <path d="M22 14 L32 24 L22 34" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter"/>
      <path d="M34 14 L44 24 L34 34" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter"/>
    </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" strokeLinejoin="miter"/>
      <path d="M16 24 L22 30 L33 18" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  ),
  Network: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <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"/>
      <path d="M24 12 C16 14 11 22 10 32" stroke="currentColor" strokeWidth="2.5" fill="none"/>
      <path d="M24 12 C32 14 37 22 38 32" stroke="currentColor" strokeWidth="2.5" fill="none"/>
      <path d="M14 36 C20 40 28 40 34 36" stroke="currentColor" strokeWidth="2.5" fill="none"/>
    </svg>
  ),
  Card: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <path d="M12 6 H30 L36 12 V42 H12 Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="miter"/>
      <rect x="16" y="14" width="16" height="6" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="18" y1="17" x2="30" y2="17" stroke="currentColor" strokeWidth="3"/>
    </svg>
  ),
  Monitor: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <rect x="4" y="8" width="40" height="26" stroke="currentColor" strokeWidth="2"/>
      <rect x="8" y="12" width="32" height="18" stroke="currentColor" strokeWidth="1"/>
      <line x1="16" y1="42" x2="32" y2="42" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="24" y1="34" x2="24" y2="42" stroke="currentColor" strokeWidth="2"/>
    </svg>
  ),
  Gauge: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <circle cx="24" cy="24" r="18" stroke="currentColor" strokeWidth="2"/>
      <line x1="24" y1="24" x2="34" y2="14" stroke="currentColor" strokeWidth="2.5"/>
      <circle cx="24" cy="24" r="2" fill="currentColor"/>
      <line x1="24" y1="6" x2="24" y2="9" stroke="currentColor" strokeWidth="2"/>
      <line x1="42" y1="24" x2="39" y2="24" stroke="currentColor" strokeWidth="2"/>
      <line x1="6" y1="24" x2="9" y2="24" stroke="currentColor" strokeWidth="2"/>
    </svg>
  ),
  Cloud: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <path d="M14 34 C8 34 6 30 6 26 C6 22 9 18 14 18 C15 13 19 10 24 10 C30 10 34 14 35 19 C40 19 42 22 42 26 C42 30 39 34 34 34 Z" stroke="currentColor" strokeWidth="2"/>
      <path d="M19 28 L24 33 L29 28" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square"/>
      <line x1="24" y1="22" x2="24" y2="32" stroke="currentColor" strokeWidth="2.5"/>
    </svg>
  ),
  Phone: (p) => (
    <svg viewBox="0 0 48 48" fill="none" {...p}>
      <rect x="14" y="4" width="20" height="40" stroke="currentColor" strokeWidth="2"/>
      <line x1="14" y1="10" x2="34" y2="10" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="14" y1="38" x2="34" y2="38" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="24" cy="41" r="1.2" fill="currentColor"/>
    </svg>
  ),
  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>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}>
      <path d="M5 12 L10 17 L19 7" stroke="currentColor" strokeWidth="2.2" 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>
  ),
};

// ============ NAVIGATION ============
function Nav({ scrolled, navStyle }) {
  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(); };
  const isFloating = navStyle === "transparent" && !scrolled;
  return (
    <header className={`nav ${isFloating ? 'nav--floating' : 'nav--solid'}`}>
      <div className="nav__inner">
        <a href="#" className="nav__logo" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} aria-label="Ages Productions home">
          <img src="assets/logo-primary.png" alt="Ages Productions" />
        </a>
        <nav className="nav__links">
          <a href="#" className="nav__link nav__link--active" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>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="Ages Productions About.html" className="nav__link">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>
            : <Icon.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 nav__drawer-link--active`} onClick={scrollTop}>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="Ages Productions About.html" className="nav__drawer-link" onClick={closeMenu}>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>
  );
}

// ============ HERO ============
function Hero({ heroTreatment }) {
  return (
    <section className={`hero hero--${heroTreatment}`}>
      <div className="hero__bg" aria-hidden="true">
        <img src="assets/hero-bg.png" alt="" />
        <div className="hero__bg-tint"></div>
      </div>

      <div className="hero__inner">
        <div className="hero__eyebrow">
          <span className="dot"></span>
          <span>FIELD&nbsp;→&nbsp;POST</span>
          <span className="hero__eyebrow-sub">Media Workflow Management</span>
        </div>

        <h1 className="hero__title">
          Reality moves fast.<br/>
          <span className="hero__title-accent">Your media workflow<br/>should keep up.</span>
        </h1>

        <p className="hero__lede">
          Ages Productions provides Reality TV media workflow management from field to post —
          secure offloads, verified backups, organized reports, and clean handoffs for
          high-volume unscripted productions.
        </p>

        <div className="hero__cta">
          <a href="Ages Productions Contact.html" className="btn btn--primary">
            <span>Build a Media Plan</span>
            <Icon.Arrow width="18" height="18"/>
          </a>
        </div>

        <a href="Ages Productions Self-Shoot.html" className="hero__sub-link">
          Need support for cast phones or self-shot media? <u>Learn about Self-Shoot Systems</u>
          <Icon.Arrow width="14" height="14" className="hero__sub-arrow"/>
        </a>
      </div>

      {/* Spec readouts pinned to image */}
      <div className="hero__readout hero__readout--top" aria-hidden="true">
        <span className="readout__dot readout__dot--blue"></span>
        <span className="readout__label">OFFLOAD · VERIFIED</span>
        <span className="readout__val">11.42 TB</span>
      </div>
      <div className="hero__readout hero__readout--bottom" aria-hidden="true">
        <span className="readout__dot readout__dot--green"></span>
        <span className="readout__label">DAY 27 / S04 · CAM A</span>
        <span className="readout__val">CHK ✓</span>
      </div>

      <div className="hero__scroll">
        <span>SCROLL</span>
        <span className="hero__scroll-line"></span>
      </div>
    </section>
  );
}

// ============ TICKER ============
function Ticker() {
  const items = [
    "AI-ASSISTED LOGGING",
    "50TB DAILY OFFLOADS",
    "CHECKSUM VERIFIED",
    "REDUNDANT BACKUPS",
    "CONCURRENT CITY TRANSFERS",
    "PROXY TRANSCODING",
    "CLOUD HANDOFF",
    "ISSUE & ERROR REPORTS",
    "FIELD-TO-POST",
  ];
  const row = [...items, ...items, ...items];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker__track">
        {row.map((t, i) => (
          <span key={i} className="ticker__item">
            <span className="ticker__dot"></span>{t}
          </span>
        ))}
      </div>
    </div>
  );
}

// ============ PROMISE / SECTION 1 ============
function Promise() {
  return (
    <section className="promise" id="promise">
      <div className="container promise__grid">
        <div className="promise__label">
          <span className="section-label">[01]&nbsp;&nbsp;CORE PROMISE</span>
        </div>
        <div className="promise__body">
          <h2 className="h-display">
            You shoot the story.<br/>
            <span className="text-blue">We keep the media moving.</span>
          </h2>
          <div className="promise__copy">
            <p>
              Reality TV productions generate massive amounts of media across main cameras, B-cams,
              GoPros, PTZ cameras, car rigs, cast phones, and specialty devices.
            </p>
            <p>
              Our job is to make sure that media is <strong>protected, organized, tracked, and ready for post.</strong>
            </p>
            <p>
              At the end of each shoot day, production and post should know what was shot, what was
              backed up, where it lives, what issues exist, and what is ready to move forward.
            </p>
            <p className="promise__pull">
              That is the difference between simply copying cards and managing the media workflow.
            </p>
          </div>
        </div>
      </div>

      {/* End-of-day status card — visual signature element */}
      <div className="container">
        <div className="status-card">
          <div className="status-card__head">
            <span className="status-card__crumb">END OF DAY · WRAP REPORT</span>
            <span className="status-card__crumb">PROD #2241 · DAY 27</span>
            <span className="status-card__crumb status-card__crumb--time">21:42 PT</span>
          </div>
          <div className="status-card__rows">
            {[
              { k: "WHAT WAS SHOT", v: "8 cams · 14 cards · 11.42 TB raw", s: "logged" },
              { k: "WHAT WAS BACKED UP", v: "Primary + LTO mirror · checksum verified", s: "verified" },
              { k: "WHERE IT LIVES", v: "S04_E07 / RAW / DAY27 — bay 03", s: "indexed" },
              { k: "WHAT ISSUES EXIST", v: "1 dropped frame · CAM-D 14:22 (flagged)", s: "flagged" },
              { k: "WHAT'S READY TO MOVE", v: "Proxies → post · 612 GB → S3", s: "ready" },
            ].map((r, i) => (
              <div className="status-row" key={i}>
                <span className="status-row__k">{r.k}</span>
                <span className="status-row__v">{r.v}</span>
                <span className={`status-row__s status-row__s--${r.s}`}>
                  {r.s === 'flagged' ? '!' : <Icon.Check width="12" height="12"/>}
                  <span>{r.s.toUpperCase()}</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CAPABILITIES / SECTION 2 ============
function Capabilities() {
  const builtFor = [
    "AI-assisted logging and workflow automation",
    "High-volume daily media offloads",
    "Concurrent city transfers",
    "Cross-country and international workflows",
    "Proxy transcoding for NLE",
    "Uploads to secure cloud providers",
  ];
  const core = [
    "Checksum-verified offloads",
    "Redundant backups",
    "Drive organization and labeling",
    "Issue and error reports",
  ];
  return (
    <section className="capabilities" id="capabilities">
      <div className="container">
        <div className="cap__head">
          <span className="section-label">[02]&nbsp;&nbsp;WHAT WE DO BEST</span>
          <h2 className="h-display cap__title">
            Built for high data volume<br/>Reality TV media management.
          </h2>
          <p className="cap__lede">
            Most people can copy cards. Fewer people can keep a 50&nbsp;TB-per-day media workflow
            organized, verified, tracked, and ready for post. Ages Productions is built for
            fast-moving Reality TV productions where media comes from multiple cameras, locations,
            cities, or countries — and post still needs clean information fast just as much as the
            transfer itself.
          </p>
        </div>

        <div className="cap__grid">
          <div className="cap__col">
            <div className="cap__col-head">
              <span className="cap__col-num">A</span>
              <span className="cap__col-title">BUILT FOR</span>
            </div>
            <ul className="cap__list">
              {builtFor.map((t, i) => (
                <li key={i}>
                  <span className="cap__list-num">{String(i+1).padStart(2,'0')}</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="cap__col cap__col--alt">
            <div className="cap__col-head">
              <span className="cap__col-num">B</span>
              <span className="cap__col-title">CORE WORKFLOW</span>
            </div>
            <ul className="cap__list">
              {core.map((t, i) => (
                <li key={i}>
                  <span className="cap__list-num">{String(i+1).padStart(2,'0')}</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
            <div className="cap__stat">
              <div className="cap__stat-row">
                <div>
                  <div className="cap__stat-num">50<span>TB</span></div>
                  <div className="cap__stat-label">DAILY OFFLOAD CAPACITY</div>
                </div>
                <div>
                  <div className="cap__stat-num">100<span>%</span></div>
                  <div className="cap__stat-label">CHECKSUM VERIFIED</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ SERVICES / SECTION 3 ============
function Services() {
  const services = [
    {
      tag: "01 / WORKFLOW",
      icon: Icon.Card,
      title: "Media Workflow Management",
      sub: "Media workflow support for unscripted productions",
      body: "Reality TV is not a one-camera movie set. It is high-volume, unpredictable, multi-camera, multi-location, and deadline-driven. Verified offloads, backups, card tracking, drive management, clean folder structures, production media logs, issue reports, and post-ready handoffs.",
      tags: ["Verified Offloads", "Card Tracking", "Folder Structure", "Issue Reports"],
      href: "Ages Productions Media Workflow.html",
    },
    {
      tag: "02 / DELIVERY",
      icon: Icon.Cloud,
      title: "Remote & Cloud Delivery Support",
      sub: "Editorial access while shooting",
      body: "Experience transcoding weeks of footage for daily proxy uploads to remote post teams during international production. Secured direct access on-premises drives, S3 / object cloud transfer support, upload tracking, and remote post coordination.",
      tags: ["Proxy Transcoding", "S3 Transfer", "Upload Tracking", "Remote Post"],
      href: "Ages Productions Media Workflow.html#remote-cloud",
    },
    {
      tag: "03 / CAST",
      icon: Icon.Phone,
      title: "Cast Diary & Self-Shoot Footage",
      sub: "Cast-generated media from phones or self-shoot devices",
      body: "Ages Productions currently supports cast iPhone workflows including management and automated recording workflows with upload tracking, backups, and metadata collection.",
      tags: ["iPhone Workflows", "Auto Recording", "Metadata", "Backups"],
      href: "Ages Productions Self-Shoot.html",
    },
  ];

  return (
    <section className="services" id="services">
      <div className="container">
        <div className="services__head">
          <span className="section-label">[03]&nbsp;&nbsp;SERVICES</span>
          <h2 className="h-display">
            Three workflows.<br/>
            <span className="text-blue">One discipline.</span>
          </h2>
          <p className="services__lede">
            Ages Productions specializes in high-volume Reality TV media management where speed,
            organization, tracking, and communication matter just as much as the transfer itself.
          </p>
        </div>
        <div className="services__list">
          {services.map((s, i) => (
            <article className="service" key={i}>
              <div className="service__num">{s.tag}</div>
              <div className="service__icon"><s.icon width="48" height="48"/></div>
              <div className="service__body">
                <h3 className="service__title">{s.title}</h3>
                <div className="service__sub">{s.sub}</div>
                <p className="service__copy">{s.body}</p>
                <div className="service__tags">
                  {s.tags.map(t => <span key={t} className="chip">{t}</span>)}
                </div>
              </div>
              <a href={s.href} className="service__link">
                <span>Learn more</span>
                <Icon.Arrow width="16" height="16"/>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ PRINCIPLES (brand pillars) ============
function Principles({ style }) {
  const items = [
    { icon: Icon.Chevrons, label: "FORWARD MOTION", sub: "Always moving ahead." },
    { icon: Icon.Grid, label: "STRUCTURE", sub: "Organized. Systematic. Efficient." },
    { icon: Icon.Target, label: "PRECISION", sub: "Detail-driven. Purposeful." },
    { icon: Icon.Shield, label: "RELIABILITY", sub: "Trusted. Dependable. Proven." },
    { icon: Icon.Network, label: "WORKFLOW", sub: "Connected. Seamless. Collaborative." },
  ];
  return (
    <section className="principles">
      <div className="container">
        <div className="principles__head">
          <span className="section-label section-label--light">PRINCIPLES</span>
          <span className="principles__title">Built around five non-negotiables.</span>
        </div>
        <div className={`principles__grid principles__grid--${style}`}>
          {items.map((it, i) => (
            <div className="principle" key={i}>
              {style === 'icons' && <div className="principle__icon"><it.icon width="44" height="44"/></div>}
              {style === 'numerals' && <div className="principle__num">0{i+1}</div>}
              <div className="principle__label">{it.label}</div>
              <div className="principle__sub">{it.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ PIPELINE (Media → Post → Delivery) ============
function Pipeline() {
  const steps = [
    {
      icon: Icon.Card,
      title: "MEDIA",
      stage: "FIELD",
      desc: "Verified offloads from main cams, B-cams, GoPros, PTZ rigs, car cams and cast phones.",
      meta: ["8 cameras", "14 cards/day", "11.4 TB raw"],
    },
    {
      icon: Icon.Monitor,
      title: "POST",
      stage: "PIPELINE",
      desc: "Proxy transcoding, drive labeling, folder structure, daily logs and issue reporting.",
      meta: ["Proxies for NLE", "LTO mirror", "Daily wrap"],
    },
    {
      icon: Icon.Gauge,
      title: "DELIVERY",
      stage: "HANDOFF",
      desc: "Concurrent city transfers, secured S3 uploads and clean post handoff with metadata.",
      meta: ["S3 / object", "Cross-country", "Tracked"],
    },
  ];
  return (
    <section className="pipeline">
      <div className="container">
        <div className="pipeline__head">
          <span className="section-label">[04]&nbsp;&nbsp;THE PIPELINE</span>
          <h2 className="h-display">From field to post,<br/><span className="text-blue">tracked at every step.</span></h2>
        </div>
        <div className="pipeline__rail">
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div className="step">
                <div className="step__num">0{i+1}</div>
                <div className="step__icon"><s.icon width="56" height="56"/></div>
                <div className="step__stage">{s.stage}</div>
                <div className="step__title">{s.title}</div>
                <p className="step__desc">{s.desc}</p>
                <div className="step__meta">
                  {s.meta.map(m => <span key={m} className="step__meta-pill">{m}</span>)}
                </div>
              </div>
              {i < steps.length - 1 && (
                <div className="step__connector" aria-hidden="true">
                  <span className="step__line"></span>
                  <Icon.Arrow width="18" height="18"/>
                  <span className="step__line"></span>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ ABOUT ============
function About() {
  return (
    <section className="about" id="about">
      <div className="container about__grid">
        <div className="about__media" aria-hidden="true">
          <div className="about__panel">
            <div className="about__panel-head">
              <span className="about__panel-tag">// FIELD KIT · ACTIVE</span>
              <span className="about__panel-time">DAY 27 · 21:42 PT</span>
            </div>
            <div className="about__queue">
              {[
                { name: "AF01", size: "172.01 GB", time: "6:23 PM", status: "done" },
                { name: "RA01", size: "251.82 GB", time: "7:01 PM", status: "done" },
                { name: "RB01", size: "193.47 GB", time: "7:15 PM", status: "done" },
                { name: "Red01", size: "19.18 GB", time: "7:26 PM", status: "done" },
                { name: "Blue01", size: "10.15 GB", time: "7:33 PM", status: "done" },
                { name: "BB01", size: "92.4 MB/s", time: "0:05:23", status: "active" },
              ].map((r, i) => (
                <div className={`q-row q-row--${r.status}`} key={i}>
                  <div className="q-row__main">
                    <span className="q-row__name">{r.name}</span>
                    <span className="q-row__size">{r.size}</span>
                  </div>
                  <div className="q-row__meta">
                    <span className="q-row__status">{r.status === 'done' ? 'Done' : 'Transferring'}</span>
                    <span className="q-row__sep">|</span>
                    <span className="q-row__time">{r.time}</span>
                  </div>
                  <span className={`q-row__icon q-row__icon--${r.status}`}>
                    {r.status === 'done'
                      ? <svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M5 8 L7 10 L11 6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      : <svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M8 3 A 5 5 0 0 1 13 8" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"><animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1.4s" repeatCount="indefinite"/></path></svg>
                    }
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="about__body">
          <span className="section-label">[05]&nbsp;&nbsp;ABOUT</span>
          <h2 className="h-display">
            Built by a working<br/>
            <span className="text-blue">Reality TV media manager.</span>
          </h2>
          <p>
            Ages Productions was built from real set experience — long shoot days, massive media
            loads, multiple camera teams, tight post deadlines, and unpredictable production needs.
          </p>
          <p>
            This is not a generic data service. It is a media workflow company built around the
            pressure of unscripted production.
          </p>
          <div className="about__exp">
            <div className="about__exp-label">EXPERIENCE INCLUDES</div>
            <div className="about__exp-tags">
              {["Reality TV","Documentary","Live Events","Broadcast","High-Volume Transfers","Custom Hardware","Remote Post","Cast Workflows","Automation"].map(t => (
                <span className="chip chip--dark" key={t}>{t}</span>
              ))}
            </div>
          </div>
          <a href="Ages Productions About.html" className="link-arrow">
            <span>Learn more about Ages Productions</span>
            <Icon.Arrow width="16" height="16"/>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ FINAL CTA ============

function FinalCTA() {
  return (
    <section className="cta" id="contact">
      <div className="cta__bg" aria-hidden="true"></div>
      <div className="container cta__inner">
        <span className="section-label">[06]&nbsp;&nbsp;NEXT STEP</span>
        <h2 className="cta__title">
          Need media support<br/>for an upcoming production?
        </h2>
        <p className="cta__lede">
          On-set media management, remote post delivery, cast phone workflows, or a better
          production-to-post handoff — Ages Productions can build a workflow that keeps your media
          moving.
        </p>
        <div className="cta__buttons">
          <a href="Ages Productions Contact.html" className="btn btn--primary btn--lg">
            <span>Build a Media Management Plan</span>
            <Icon.Arrow width="20" height="20"/>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
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="Ages Productions About.html">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>
  );
}

// ============ APP ============
function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className={`app accent-${t.accentIntensity}`}>
      <Nav scrolled={scrolled} navStyle={t.navStyle} />
      <Hero heroTreatment={t.heroTreatment}/>
      {t.showTicker && <Ticker/>}
      <Promise/>
      <Capabilities/>
      <Pipeline/>
      <Services/>
      <Principles style={t.principleStyle}/>
      <About/>
      <FinalCTA/>
      <Footer/>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Hero">
          <window.TweakRadio
            label="Treatment"
            value={t.heroTreatment}
            options={[
              { value: 'image', label: 'Photo' },
              { value: 'dark', label: 'Pure dark' },
            ]}
            onChange={v => setTweak('heroTreatment', v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Navigation">
          <window.TweakRadio
            label="Style"
            value={t.navStyle}
            options={[
              { value: 'transparent', label: 'Float' },
              { value: 'solid', label: 'Solid' },
            ]}
            onChange={v => setTweak('navStyle', v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Brand accent">
          <window.TweakRadio
            label="Intensity"
            value={t.accentIntensity}
            options={[
              { value: 'subtle', label: 'Subtle' },
              { value: 'balanced', label: 'Balanced' },
              { value: 'bold', label: 'Bold' },
            ]}
            onChange={v => setTweak('accentIntensity', v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Sections">
          <window.TweakToggle
            label="Capability ticker"
            value={t.showTicker}
            onChange={v => setTweak('showTicker', v)}
          />
          <window.TweakRadio
            label="Principles style"
            value={t.principleStyle}
            options={[
              { value: 'icons', label: 'Icons' },
              { value: 'numerals', label: 'Numerals' },
            ]}
            onChange={v => setTweak('principleStyle', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

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