// Main app. The Office Photographer — construction through culture.

const { useState, useEffect } = React;
const { TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakToggle, TweakColor, TweakRadio } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e91e63",
  "darkMode": false,
  "viewfinderSpeed": 3800,
  "heroVariant": "viewfinder"
}/*EDITMODE-END*/;

// ─────────── DATA ───────────

const AUDIENCES = [
  { n: "01", title: "The internal real estate team", sub: "This is a highlight reel of your work. Years of procurement, design reviews, and vendor wrangling, finally rendered as something people want to look at.", spec: "Board-ready hero film + stills" },
  { n: "02", title: "Staff at the all-hands",        sub: "Show the team what went into the room they walked into. The timelapse behind the ribbon-cutting gets a proper reaction every time.", spec: "16:9 hero, 1:1 socials, captioned" },
  { n: "03", title: "Shareholders & the board",     sub: "A capital project told as a story with a beginning, middle, and end. Useful at AGMs, quarterly reviews, and in the annual report.", spec: "Archival masters, sRGB" },
  { n: "04", title: "Marketing & brand",            sub: "A real library of the finished space, shot properly, with the construction arc sitting alongside for campaign use.", spec: "16:9 + 4:5 masters, 300 DPI" },
  { n: "05", title: "HR & recruiting",              sub: "Careers pages that show where the company chose to put its money. Candidates notice.", spec: "60 to 90s sizzle, 9:16 cutdowns" },
  { n: "06", title: "Press, awards & brokers",      sub: "IIDA, ASID, AIA, Best Places to Work. Landlord decks. Trade media. The submission packs write themselves.", spec: "3000px edge, award-ready" },
];

const MILESTONES = [
  { when: "Pre-build",  what: "The shell you inherited", count: "A few honest frames of where you started. The contrast gives the finished room its weight.", key: false },
  { when: "During build", what: "Timelapse runs quietly", count: "Cameras mounted, out of everyone's way. Your team keeps working. The story records itself.", key: false },
  { when: "Key handover", what: "The win",                count: "The moment your real estate team actually completes the project. Documented properly.",       key: true },
  { when: "Move-in",     what: "The room populated",     count: "People, light, first-day energy. The photos everyone will actually use.",                    key: true },
  { when: "Month 03",    what: "Settled and lived in",   count: "The space doing its job. Rituals formed. The library that keeps paying off.",                key: true },
  { when: "Month 12",    what: "The film",               count: "A documentary edit of the whole journey. Premieres at the anniversary all-hands.",           key: true },
];

const PROGRAMS = [
  {
    name: "The Suite",
    coverage: "Single tenant suite",
    img: "uploads/DSC0410745.png",
    desc: "A proper shoot of the finished space, with a quiet timelapse camera running during the fitout so your team has a short story to tell.",
    specs: [
      ["Finished shoot", "Half day on site, 1 photographer"],
      ["Stills", "12 to 15 retouched masters of the final room"],
      ["Timelapse", "1 camera during construction, 45s edit"],
      ["Revisit", "One populated shoot post move-in"],
      ["Turnaround", "10 business days"],
      ["License", "Full rights, no restrictions"],
    ],
  },
  {
    name: "The Floor",
    coverage: "Half floor, multi-zone",
    img: "uploads/DSC04108_filter.png",
    desc: "A full-day shoot of the completed floor and a proper move-in day, with two timelapse cameras running through the build for an all-hands reveal. Where most clients land.",
    specs: [
      ["Finished shoot", "Full day, 2 photographers + video tech"],
      ["Stills", "30 to 40 retouched masters"],
      ["Timelapse", "2 cameras, 90s build film, 3 social cutdowns"],
      ["Revisits", "Move-in day plus month 3 settle"],
      ["Turnaround", "10 business days per milestone"],
      ["License", "Full rights, no restrictions"],
    ],
  },
  {
    name: "The Headquarters",
    coverage: "Full floor + building context",
    img: "uploads/DSC0410_anon.png",
    desc: "The full program. Hero photography of the finished HQ, multi-camera construction timelapse, and a documentary film at twelve months for the anniversary all-hands.",
    specs: [
      ["Finished shoot", "Full crew + producer + art director"],
      ["Stills", "60 to 80 retouched per milestone"],
      ["Timelapse", "3 to 5 cameras, drone if feasible"],
      ["Motion", "2 to 3 min hero film, sizzle, cutdown suite"],
      ["Revisits", "Up to 6 milestones across the year"],
      ["License", "Full rights, no restrictions"],
    ],
  },
];

const TICKER_WORDS = [
  "Finished hero shot", "Reception at golden hour", "Boardroom wide", "Detail of the millwork",
  "Lifestyle frame", "Twilight exterior", "Anniversary film", "All-hands reveal",
  "Construction timelapse", "Ribbon-cutting cut", "Sizzle reel", "Walkthrough film",
  "B-roll library", "Social cutdown", "Interview module", "Color grade",
  "Window pull", "Motion graphics", "Contact sheet", "Selects gallery",
];

const PROCESS = [
  { n: "01", name: "Scope with the real estate team", desc: "We sit down with the people running the project. Understand the design intent, the contractor schedule, who the final film is really for. The shoot list follows from that." },
  { n: "02", name: "Quiet coverage during the build", desc: "Timelapse cameras go up early and stay out of the way. Your team, your GC, and your designers don't change anything about how they work." },
  { n: "03", name: "The finished shoot", desc: "The main event. Full production day once the space is done. This is the imagery that actually ends up on the careers page and in the pitch deck." },
  { n: "04", name: "The reveal", desc: "Cloud gallery sorted by milestone. A cut of the build timelapse scored for the all-hands. Everything exported to 16:9, 4:5, 9:16, 1:1, 3:2." },
];

const LICENSES = [
  { name: "Yours", tag: "Full ownership", desc: "Every frame, every cut, every master file. Use them on your website, in the all-hands deck, in the annual report, in paid ads, on a billboard. Forever." },
  { name: "Everywhere", tag: "No media restrictions", desc: "Web, print, broadcast, paid social, OOH, internal comms, recruiting, press. Marketing today, the careers page in five years, a documentary in ten." },
  { name: "Forever", tag: "No expiry, no renewals", desc: "No re-licensing fees, no per-impression math, no usage caps. Pay once for the work and the rights together. The library is yours to keep." },
];

// ─────────── LOGO ───────────

function LogoMark({ size = 36 }) {
  return (
    <img
      src="site/logo.png"
      alt="The Office Photographer"
      style={{ height: size + "px", width: "auto", display: "block" }}
    />
  );
}

// ─────────── NAV ───────────

function Nav() {
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 96, behavior: "smooth" });
  };
  return (
    <nav className="nav">
      <a href="#top" onClick={go("top")} className="nav-brand" aria-label="The Office Photographer">
        <LogoMark size={216} />
      </a>
      <div className="nav-links">
        <a href="#programs" onClick={go("programs")} className="nav-link">Programs</a>
        <a href="#process" onClick={go("process")} className="nav-link">How we work</a>
        <a href="#refurb" onClick={go("refurb")} className="nav-link">Recent builds</a>
        <a href="#licensing" onClick={go("licensing")} className="nav-link">Studio</a>
      </div>
      <a className="nav-cta" href="mailto:masone@theofficephotographer.com">Contact the studio</a>
    </nav>
  );
}

function Hero({ cycleSpeed }) {
  return (
    <section className="hero shell" id="top">
      <div className="hero-kicker">REC, a live capture on a build right now</div>
      <h1 className="hero-title">
        Celebrate the room<br/>
        your <em>real estate team</em> just delivered.
      </h1>
      <p className="hero-sub">
        I photograph finished workspaces properly. Hero stills, a film of the room doing its job, and a quiet
        timelapse running during the build so staff and shareholders get to see what it actually took. The
        finished office is the point. The story behind it is what makes people care.
      </p>
      <div className="hero-actions">
        <a className="cta-primary" href="mailto:masone@theofficephotographer.com">Contact the studio</a>
        <button className="cta-secondary" onClick={() => { const el = document.getElementById('programs'); if (el) window.scrollTo({ top: el.offsetTop - 96, behavior: 'smooth' }); }}>See the programs</button>
      </div>

      <window.Viewfinder cycleSpeed={cycleSpeed} />

      <div className="stat-row">
        <div className="stat">
          <div className="stat-num">A finished room</div>
          <div className="stat-label">shot the way the design actually deserves, not phone snaps on day one.</div>
        </div>
        <div className="stat">
          <div className="stat-num">A story</div>
          <div className="stat-label">of the build, edited into a film your real estate team can actually present.</div>
        </div>
        <div className="stat">
          <div className="stat-num">One library</div>
          <div className="stat-label">that marketing, HR, press, and the annual report all pull from for years.</div>
        </div>
        <div className="stat">
          <div className="stat-num">5 ratios</div>
          <div className="stat-label">exported from every master: 16:9, 4:5, 9:16, 1:1, 3:2.</div>
        </div>
      </div>
    </section>
  );
}

function Audiences() {
  return (
    <section className="section" data-screen-label="Audiences">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-label">Who the work is for</div>
            <h2 className="section-title">Your real estate team did the hard part. Everyone else gets to enjoy it.</h2>
          </div>
          <p className="section-desc">
            The same library feeds the board, the all-hands, marketing, HR, and press. The point is a set of assets
            that make your internal team&rsquo;s work visible to every audience that should be seeing it.
          </p>
        </div>
        <div className="audience-grid">
          {AUDIENCES.map((a) => (
            <div key={a.n} className="audience-card">
              <div className="audience-num">{a.n}</div>
              <h3 className="audience-title">{a.title}</h3>
              <p className="audience-sub">{a.sub}</p>
              <div className="audience-spec">{a.spec}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Milestone() {
  return (
    <section className="section" data-screen-label="Milestone">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-label">The Milestone Program</div>
            <h2 className="section-title">A year your real estate team will actually want to show off.</h2>
          </div>
          <p className="section-desc">
            The finished room is the hero. The journey gives it weight. We keep coverage light during the build,
            then do a proper production for the reveal, and revisit once the room has settled into itself.
          </p>
        </div>
        <div className="milestone">
          <div className="section-label" style={{ margin: 0 }}>From bare shell to anniversary cut</div>
          <h3 className="audience-title" style={{ fontSize: 24, marginTop: 8, marginBottom: 0 }}>
            Six beats. One arc.
          </h3>
          <div className="milestone-track">
            {MILESTONES.map((m) => (
              <div key={m.when} className={"milestone-stop " + (m.key ? "key" : "")}>
                <div className="milestone-dot" />
                <div>
                  <div className="milestone-when">{m.when}</div>
                  <div className="milestone-what">{m.what}</div>
                  <div className="milestone-count">{m.count}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Programs() {
  return (
    <section className="section" data-screen-label="Programs" id="programs">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-label">Engagement programs</div>
            <h2 className="section-title">Pick a shape. I&rsquo;ll quote the rest.</h2>
          </div>
          <p className="section-desc">
            Three programs, sized to the build. Every engagement includes a pre-construction site visit, a private
            cloud gallery, motion on every milestone, and a ten business day turnaround.
          </p>
        </div>
        <div className="prog-grid">
          {PROGRAMS.map((p) => (
            <div key={p.name} className="prog-card">
              <div className="prog-image" style={{ backgroundImage: `url(${p.img})` }}>
                <div className="prog-badge">Most booked</div>
                <div className="prog-favorite">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                  </svg>
                </div>
              </div>
              <div className="prog-meta">
                <h3 className="prog-name">{p.name}</h3>
                <div className="prog-coverage">{p.coverage}</div>
              </div>
              <p className="prog-desc">{p.desc}</p>
              <ul className="prog-specs">
                {p.specs.map(([k, v]) => (
                  <li key={k}><span className="prog-spec-label">{k}</span>{v}</li>
                ))}
              </ul>
              <div style={{ padding: "0 2px" }}>
                <span className="prog-cta">Start a conversation</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Refurb() {
  return (
    <section className="section" data-screen-label="Refurb" id="refurb">
      <div className="shell">
        <div className="ba-wrap">
          <div>
            <div className="section-label">Before and after</div>
            <h2 className="section-title" style={{ marginBottom: 20 }}>
              Proof of the work your team pulled off.
            </h2>
            <p className="section-desc" style={{ marginBottom: 24 }}>
              Locked tripod positions during the walkthrough, matched focal length and time of day across visits,
              and every empty frame paired with a populated counterpart. Drag the slider and see what your real
              estate team actually started with.
            </p>
            <p className="section-desc">
              Direct before and after pairs at 300 DPI. Ready for IIDA, ASID, AIA, and Best Places to Work
              submissions a year later.
            </p>
          </div>
          <window.BeforeAfter
            before="uploads/DSC0410_composite.png"
            after="uploads/DSC0415.png"
            beforeLabel="Pre-demo, Feb"
            afterLabel="Stabilized, Nov"
          />
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const doubled = [...TICKER_WORDS, ...TICKER_WORDS];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {doubled.map((w, i) => (
          <span key={i} className="ticker-item">{w}</span>
        ))}
      </div>
    </div>
  );
}

function Process() {
  return (
    <section className="section" data-screen-label="Process" id="process">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-label">How we work</div>
            <h2 className="section-title">Quiet during the build. Loud for the reveal.</h2>
          </div>
          <p className="section-desc">
            The last thing anyone running a fitout needs is a photographer in the way. Cameras go up early, stay
            out of the mix, then we produce properly once the room is ready to be seen.
          </p>
        </div>
        <div className="process-grid">
          {PROCESS.map((p) => (
            <div key={p.n} className="process-step">
              <div className="process-num">{p.n}</div>
              <h3 className="process-name">{p.name}</h3>
              <p className="process-desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Licensing() {
  return (
    <section className="section" data-screen-label="Licensing" id="licensing">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-label">Licensing</div>
            <h2 className="section-title">Your office. Your photos. Your rules.</h2>
          </div>
          <p className="section-desc">
            No tiers, no usage caps, no per-impression math. You commissioned the work, you own how it gets used.
            On delivery, full rights transfer to your team for any use, any media, any timeframe.
          </p>
        </div>
        <div className="lic-grid">
          {LICENSES.map((l) => (
            <div key={l.name} className="lic-col">
              <div className="lic-tag">{l.tag}</div>
              <h3 className="lic-name">{l.name}</h3>
              <p className="lic-desc">{l.desc}</p>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 13, color: "var(--ash)", marginTop: 24, fontStyle: "italic", maxWidth: "60ch" }}>
          The only thing I ask is a credit when used externally, and the option to add work to my portfolio.
          Anything else: yours, no questions.
        </p>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="section contact" data-screen-label="Contact" id="contact">
      <div className="shell">
        <div className="hero-kicker" style={{ justifyContent: "center" }}>{`Booking ${new Date().getFullYear() + 1} and ${new Date().getFullYear() + 2} builds now`}</div>
        <h2 className="hero-title" style={{ textAlign: "center" }}>
          Tell me about<br/>your <em>project</em>.
        </h2>
        <p className="hero-sub contact-sub" style={{ textAlign: "center" }}>
          One conversation, one walkthrough, one quote. I like to meet your real estate team at the site, whether
          it&rsquo;s still framing or already signed off.
        </p>
        <div className="contact-detail">
          <a href="mailto:masone@theofficephotographer.com">masone@theofficephotographer.com</a>
        </div>
        <div className="contact-tagline">
          &ldquo;Your real estate team did the hard part. My job is making sure everyone else sees it.&rdquo;
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer-main">
      <div className="footer-row">
        <div className="footer-brand">
          <LogoMark size={40} />
          <small>A documentary studio for new workspaces. Est. 2021.</small>
        </div>
        <div className="footer-legal">© 2026, all work under studio copyright.</div>
      </div>
    </footer>
  );
}

// ─────────── APP ───────────

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.classList.toggle("dark", !!tweaks.darkMode);
  }, [tweaks.darkMode]);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--accent-deep", tweaks.accent);
  }, [tweaks.accent]);

  return (
    <>
      <Nav />
      <Hero cycleSpeed={tweaks.viewfinderSpeed} />
      <Audiences />
      <Milestone />
      <Programs />
      <Refurb />
      <Ticker />
      <Process />
      <Licensing />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Dark mode" value={tweaks.darkMode} onChange={(v) => setTweak("darkMode", v)} />
        <TweakSection label="Viewfinder" />
        <TweakSlider label="Cycle speed" min={1500} max={8000} step={100} unit="ms"
          value={tweaks.viewfinderSpeed} onChange={(v) => setTweak("viewfinderSpeed", v)} />
      </TweaksPanel>
    </>
  );
}

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