/* global React */
// AKAM — Components Pt 1: shell, home, about

const { useState, useEffect, useMemo, useRef } = React;

/* ------------------------------------------------------------
   Logo (inline, color inherits)
   ------------------------------------------------------------ */
const Logo = ({ height = 16, color = 'currentColor' }) =>
<svg viewBox="0 0 1050 300" style={{ height, width: 'auto', fill: color }} aria-label="AKAM">
    <path d="M153.95,42.5h30.41l87.84,215h-45.15l-13.82-36.24h-88.46l-13.82,36.24h-45.15L153.95,42.5ZM199.41,185.32l-30.41-79.24-30.4,79.24h60.81Z" />
    <path d="M358.52,154.92v102.58h-43.62V42.5h43.62v102.59l83.54-102.59h54.67l-90.3,107.2,93.37,107.8h-55.59l-85.69-102.58Z" />
    <path d="M611.62,42.5h30.4l87.84,215h-45.15l-13.82-36.24h-88.46l-13.82,36.24h-45.15l88.15-215ZM657.07,185.32l-30.4-79.24-30.41,79.24h60.81Z" />
    <path d="M772.57,42.5h28.26l77.4,105.04,77.4-105.04h28.57v215h-42.08V127.89l-58.36,78.93h-11.06l-58.05-78.93v129.61h-42.07V42.5Z" />
  </svg>;


/* Big wordmark for footer */
const Wordmark = ({ color = 'currentColor' }) => {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setShown(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <svg ref={ref} viewBox="0 0 1050 300" className={`wordmark ${shown ? 'in' : ''}`} style={{ width: '100%', height: 'auto', fill: color, display: 'block' }} aria-label="AKAM">
      <path className="wm-letter" d="M153.95,42.5h30.41l87.84,215h-45.15l-13.82-36.24h-88.46l-13.82,36.24h-45.15L153.95,42.5ZM199.41,185.32l-30.41-79.24-30.4,79.24h60.81Z" />
      <path className="wm-letter" d="M358.52,154.92v102.58h-43.62V42.5h43.62v102.59l83.54-102.59h54.67l-90.3,107.2,93.37,107.8h-55.59l-85.69-102.58Z" />
      <path className="wm-letter" d="M611.62,42.5h30.4l87.84,215h-45.15l-13.82-36.24h-88.46l-13.82,36.24h-45.15l88.15-215ZM657.07,185.32l-30.4-79.24-30.41,79.24h60.81Z" />
      <path className="wm-letter" d="M772.57,42.5h28.26l77.4,105.04,77.4-105.04h28.57v215h-42.08V127.89l-58.36,78.93h-11.06l-58.05-78.93v129.61h-42.07V42.5Z" />
    </svg>);
};


/* ------------------------------------------------------------
   PingPong video — plays forward then reverses for seamless loop
   ------------------------------------------------------------ */
function PingPongVideo({ src, poster, style, className }) {
  return (
    <video
      src={src}
      poster={poster}
      muted
      playsInline
      autoPlay
      loop
      preload="auto"
      className={className}
      style={style} />);


}

/* ------------------------------------------------------------
   Sequence video — plays a list of clips back-to-back, looping
   ------------------------------------------------------------ */
function SequenceVideo({ sources = [], poster, style, className }) {
  const refA = useRef(null);
  const refB = useRef(null);

  useEffect(() => {
    const a = refA.current;
    const b = refB.current;
    if (!a || !b || sources.length === 0) return;

    const els = [a, b];
    const FADE = 0.7; // seconds of overlap crossfade
    let activeIdx = 0; // which source is currently showing
    let activeEl = 0; // 0 => a, 1 => b
    let fading = false;

    const startClip = (el, srcIdx, show) => {
      el.muted = true;
      el.volume = 0;
      el.src = sources[srcIdx];
      el.style.opacity = show ? '1' : '0';
      if (show) {
        try {el.currentTime = 0;} catch (e) {}
        el.play().catch(() => {});
      }
    };

    a.muted = true; b.muted = true;
    a.volume = 0; b.volume = 0;
    // Boot: A visible playing clip 0, B preloads clip 1 hidden
    startClip(a, 0, true);
    startClip(b, 1 % sources.length, false);

    const onTime = (e) => {
      const cur = els[activeEl];
      if (e.target !== cur || fading) return;
      if (!cur.duration) return;
      if (cur.duration - cur.currentTime <= FADE) {
        fading = true;
        const nextEl = els[(activeEl + 1) % 2];
        const nextIdx = (activeIdx + 1) % sources.length;
        // Bring the already-buffered next clip in and crossfade
        try {nextEl.currentTime = 0;} catch (err) {}
        nextEl.play().catch(() => {});
        nextEl.style.opacity = '1';
        cur.style.opacity = '0';

        window.setTimeout(() => {
          // Finalize swap; queue the following clip into the now-hidden element
          activeEl = (activeEl + 1) % 2;
          activeIdx = nextIdx;
          const hiddenEl = els[(activeEl + 1) % 2];
          hiddenEl.pause();
          startClip(hiddenEl, (activeIdx + 1) % sources.length, false);
          fading = false;
        }, FADE * 1000);
      }
    };

    a.addEventListener('timeupdate', onTime);
    b.addEventListener('timeupdate', onTime);

    return () => {
      a.removeEventListener('timeupdate', onTime);
      b.removeEventListener('timeupdate', onTime);
    };
  }, [sources.join('|')]);

  const layer = {
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    objectFit: 'cover', display: 'block',
    transition: 'opacity 700ms ease-in-out'
  };

  return (
    <div className={className} style={{ ...style, position: 'relative', overflow: 'hidden' }}>
      <video ref={refA} poster={poster} muted playsInline autoPlay preload="auto" style={{ ...layer, opacity: 1 }} />
      <video ref={refB} muted playsInline preload="auto" style={{ ...layer, opacity: 0 }} />
    </div>);

}

/* ------------------------------------------------------------
   Rotating word — cycles through words with a soft fade/rise
   ------------------------------------------------------------ */
function RotatingWord({ words = [], interval = 2600 }) {
  const [i, setI] = useState(0);
  const [vis, setVis] = useState(true);
  useEffect(() => {
    if (words.length <= 1) return;
    const tick = setInterval(() => {
      setVis(false); // fade out
      setTimeout(() => {
        setI((n) => (n + 1) % words.length);
        setVis(true); // fade in next
      }, 520);
    }, interval);
    return () => clearInterval(tick);
  }, [words.length, interval]);
  return (
    <span className="rotating-word">
      <span className={`rw-inner ${vis ? 'in' : 'out'}`}>{words[i]}</span>
    </span>
  );
}

/* ------------------------------------------------------------
   Placeholder
   ------------------------------------------------------------ */
const Placeholder = ({ tone = 'cream', label, meta, motion = false, className = '', style }) =>
<div className={`placeholder ${tone} ${motion ? 'motion' : ''} ${className}`} style={style}>
    {label ? <div className="ph-label">
      <span className="ph-dot" />
      <span>{label}</span>
    </div> : null}
  </div>;


/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
const NAV = [
{ id: 'home', label: 'index', idx: '00' },
{ id: 'about', label: 'about', idx: '01' },
{ id: 'projects', label: 'work', idx: '02' },
{ id: 'project', label: 'cremin street', idx: '02.1', hidden: true },
{ id: 'contact', label: 'contact', idx: '03' }];


function TopBar({ page, setPage, openMenu }) {
  return (
    <div className="topbar">
      <a className="brand" href="#home" onClick={(e) => {e.preventDefault();setPage('home');}}>
        <Logo height={22} />
      </a>
      <div className="meta" />
      <button className="menu-trigger" onClick={openMenu} aria-label="open menu">
        <span className="dot" />
        menu
      </button>
    </div>);

}

function MenuOverlay({ page, setPage, close }) {
  return (
    <div className="menu-overlay">
      <div className="menu-top">
        <a className="brand" href="#home" onClick={(e) => {e.preventDefault();setPage('home');close();}}>
          <Logo height={14} color="#F8F7F4" />
        </a>
        <button className="close" onClick={close}>close ×</button>
      </div>
      <div className="links">
        {NAV.filter((n) => !n.hidden).map((n) =>
        <a
          key={n.id}
          className={page === n.id ? 'active' : ''}
          href={`#${n.id}`}
          onClick={(e) => {e.preventDefault();setPage(n.id);close();}}>
          
            <span className="idx">{n.idx}</span>
            <span>{n.label === 'index' ? 'home' : n.label}.</span>
          </a>
        )}
      </div>
      <div className="menu-right">
        <div className="group">
          <a href="https://www.instagram.com/akam_constructions/?hl=en" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href="https://www.linkedin.com/company/akam-constructions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">LinkedIn</a>
        </div>
      </div>
    </div>);

}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="subscribe">
          <p>Notes from the ground up. Project releases and milestones.</p>
          <form onSubmit={(e) => {e.preventDefault();}}>
            <input type="email" placeholder="your email address" />
            <button type="submit">subscribe →</button>
          </form>
        </div>
        <div>
          <h4>site</h4>
          <ul>
            <li><a href="#about" onClick={(e) => {e.preventDefault();setPage('about');}}>About</a></li>
            <li><a href="#projects" onClick={(e) => {e.preventDefault();setPage('projects');}}>Work</a></li>
            <li><a href="#contact" onClick={(e) => {e.preventDefault();setPage('contact');}}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>follow</h4>
          <ul>
            <li><a href="https://www.instagram.com/akam_constructions/?hl=en" target="_blank" rel="noopener noreferrer">Instagram</a></li>
            <li><a href="https://www.linkedin.com/company/akam-constructions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
          </ul>
        </div>
        <div>
          <h4>info</h4>
          <ul>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Site Credit</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-wordmark">
        <Wordmark />
      </div>

      <div className="footer-bottom">
        <span />
        <span className="right">
          AKAM acknowledges the Traditional Owners of Country throughout Australia and their continuing connection
          to land, waters and community. We pay our respects to Indigenous Elders past, present and emerging.
        </span>
      </div>
    </footer>);

}

/* ------------------------------------------------------------
   Project data
   ------------------------------------------------------------ */
const PROJECTS = [
{
  id: 'une',
  idx: '01',
  name: 'UNE',
  image: 'assets/une-hero.jpg',
  homeImage: 'assets/une-home-hero.jpeg',
  thumbImage: 'assets/une-thumb.jpg',
  primaryImage: 'assets/une-primary.png',
  secondaryImage: 'assets/une-secondary.jpeg',
  type: 'residential townhomes',
  place: 'orchard rd, richlands qld',
  size: '80 townhomes',
  status: 'construction 2026',
  year: '2026',
  desc: '80 three-bedroom townhomes across five types — designed around natural light, private courtyards, and the rhythm of daily life.',
  long: '80 three-bedroom townhomes across five types. Designed around natural light, private courtyards, and the rhythm of daily life.',
  longer: "A careful palette of earthy tones, stone, and timber — chosen to feel as considered in ten years as on day one. Positioned within Brisbane's south-west growth corridor. Direct rail to the CBD. Motorway access. Established retail, schools, and services close at hand.",
  tone: 'cream',
  cat: 'original'
},
{
  id: 'cremin-street',
  idx: '02',
  name: 'Cremin Street',
  image: 'assets/cremin-hero.png',
  homeImage: 'assets/cremin-pool.jpg',
  primaryImage: 'assets/cremin-primary.jpg',
  secondaryImage: 'assets/cremin-secondary.jpg',
  type: 'residential townhomes',
  place: 'mount gravatt qld',
  size: '9 townhomes',
  status: 'construction 2025',
  year: '2025',
  desc: 'Architectural townhomes bringing modern living to Mount Gravatt — a considered inner-Brisbane infill of nine residences.',
  long: "Nine architectural townhomes on a tightly held inner-Brisbane parcel. Cremin Street is a study in considered density: a project shaped by a clear thesis of place, materials selected for their texture and longevity, and a plan that gives every residence its own quiet relationship with the street.",
  longer: "From feasibility through to handover, AKAM is the developer of record on Cremin Street — defining the design brief alongside the architect, managing the approvals pathway, and controlling the delivery on the ground. The result is the kind of project we believe Brisbane needs more of: an infill of architectural quality that reads as inevitable in its setting.",
  tone: 'cream',
  cat: 'original'
},
{
  id: 'sunset',
  idx: '03',
  name: 'Sunset',
  image: 'assets/sunset-hero.jpg',
  heroVideo: 'assets/sunset-hero.mp4',
  primaryImage: 'assets/sunset-primary.jpg',
  secondaryImage: 'assets/sunset-secondary.jpg',
  type: 'boutique apartments',
  place: 'sunshine coast qld',
  size: '24 apartments',
  status: 'construction 2026',
  year: '2026',
  desc: 'A boutique apartment building in collaboration with Dusk Group — curved forms, layered balconies, and a curated relationship with its hillside setting.',
  long: 'A boutique apartment building delivered in collaboration with Dusk Group. Curved forms, layered balconies, and a measured relationship with the slope of the site.',
  longer: 'Sunset is a study in how curved geometry and considered material restraint can sit comfortably in a residential street. AKAM led the development with Dusk Group, taking the project from feasibility through to a programme designed for occupancy in 2026.',
  tone: 'cream',
  cat: 'original'
},
{
  id: 'the-grove',
  idx: '04',
  name: 'The Grove',
  image: 'assets/grove-hero.png',
  heroVideo: 'assets/grove-motion.mp4',
  primaryImage: 'assets/grove-primary.png',
  secondaryImage: 'assets/grove-secondary.png',
  pingpong: true,
  type: 'gated townhomes',
  place: 'inner west brisbane',
  size: '12 townhomes',
  status: 'construction 2025',
  year: '2025',
  desc: 'A gated terrace of twelve architectural townhomes arranged either side of a private internal lane.',
  long: 'A gated terrace of twelve architectural townhomes arranged either side of a private internal lane. Restrained materials, generous setbacks, and a measured relationship with its inner-west street.',
  longer: 'The Grove is a project shaped by privacy as much as presence. AKAM led the development from feasibility through delivery, working alongside the architect on a plan that prioritises landscape, sequencing, and a quiet civic edge.',
  tone: 'cream',
  cat: 'original'
},
{
  id: 'taunton',
  idx: '05',
  name: 'Taunton',
  image: 'assets/taunton-hero.png',
  primaryImage: 'assets/taunton-primary.jpeg',
  secondaryImage: 'assets/taunton-secondary.jpeg',
  type: 'residential townhomes',
  place: 'inner south brisbane',
  size: '7 townhomes',
  status: 'construction 2025',
  year: '2025',
  desc: 'A row of seven townhomes set behind a layered garden edge, with rooftop pergolas drawing the landscape onto the building.',
  long: 'A row of seven townhomes set behind a layered garden edge, with rooftop pergolas drawing the landscape onto the building.',
  longer: 'Taunton resolves a difficult inner-south parcel with a quiet street presence and a generous rooftop landscape — a project that demonstrates how density and softness can sit together when the brief is held to a clear standard.',
  tone: 'green',
  cat: 'original'
},
{
  id: 'marlee',
  idx: '06',
  name: 'Marlee',
  image: 'assets/marlee-hero.png',
  video: 'assets/marlee-motion.mp4',
  secondaryImage: 'assets/marlee-secondary.png',
  type: 'residential townhomes',
  place: 'inner east brisbane',
  size: '8 townhomes',
  status: 'design 2026',
  year: '2026',
  desc: 'A terracotta-rendered terrace of eight townhomes with arched portals, deep balconies and a layered garden edge to the street.',
  long: 'A terracotta-rendered terrace of eight townhomes with arched portals, deep balconies and a layered garden edge to the street.',
  longer: 'Marlee leans into colour and form — warm stucco, soft arches, and a planted edge that softens the boundary between residence and street. A measured response to its inner-east setting, with the discipline AKAM brings to every project.',
  tone: 'cream',
  cat: 'original'
},
{
  id: 'rome-avenue',
  idx: '07',
  name: 'Rome',
  image: 'assets/rome-hero.png',
  heroVideo: 'assets/rome-hero.mp4',
  primaryImage: 'assets/rome-primary.png',
  secondaryImage: 'assets/rome-secondary.jpg',
  type: 'residential',
  place: 'brisbane',
  size: 'four bedrooms',
  status: 'under construction',
  year: 'in progress',
  desc: 'A high-end, Mediterranean-inspired residence in a blue-chip Brisbane suburb.',
  long: 'This high-end residential build is located in a blue chip suburb in Brisbane. We have utilised our in-house architect to work with our client to bring this mediterranean vision to life.',
  longer: 'This large format home will feature four bedrooms that will each have an ensuite, as well as a cinema room, open plan kitchen and living space, pool and health retreat.',
  tone: 'green',
  cat: 'original'
},
{
  id: 'aurora-on-depper',
  idx: '08',
  name: 'Aurora on Depper',
  image: 'assets/aurora-hero.png',
  primaryImage: 'assets/aurora-primary.png',
  secondaryImage: 'assets/aurora-secondary.png',
  type: 'residential townhomes',
  place: 'st lucia brisbane',
  size: '8 townhomes',
  status: 'completed',
  year: '2024',
  desc: 'A collection of just eight luxury townhomes in riverside St Lucia, built above the flood level with premium finishes throughout.',
  long: 'A stunning collection of just eight luxury townhomes. Each 3 and 4 bedroom residence features spacious, light-filled living with premium finishes — hybrid timber flooring, zero-silica benchtops and Miele appliances.',
  longer: 'Located in the sought-after riverside suburb of St Lucia, the residences are built above the 1-in-100-year flood level for year-round peace of mind. Walk to Guyatt Park, bus and ferry stops, cafes and dining. Premium education is close at hand — Ironside State School, Indooroopilly State High School, St Peters College and the University of Queensland — with the prestigious St Lucia golf course nearby.',
  tone: 'cream',
  cat: 'original'
},
{
  id: 'marquis-greenslopes',
  idx: '09',
  name: 'The Marquis',
  image: 'assets/marquis-hero.png',
  primaryImage: 'assets/marquis-primary.png',
  secondaryImage: 'assets/marquis-secondary.png',
  type: 'townhouses + refurbishment',
  place: 'greenslopes brisbane',
  size: '5 townhouses + 2 houses',
  status: 'under construction',
  year: '2026',
  desc: 'An exclusive boutique collection of five townhouses and two house refurbishments in leafy Greenslopes.',
  long: '12–16 Marquis Street, Greenslopes is an exclusive development featuring a boutique collection of five townhouses and two house refurbishments — thoughtfully designed and crafted by an award-winning team.',
  longer: 'The Marquis pairs new architectural townhouses with the careful renewal of two existing houses, holding the character of the Greenslopes street while introducing a considered density. A small, exacting project delivered to the standard AKAM brings to every development.',
  tone: 'green',
  cat: 'original'
}];


/* ------------------------------------------------------------
   HOME
   ------------------------------------------------------------ */
function Home({ setPage, setActiveProject }) {
  return (
    <div className="page-shell">
      {/* Hero */}
      <section className="home-hero">
        <div className="image">
          <SequenceVideo
            sources={[
            'assets/sunset-hero.mp4',
            'assets/grove-motion.mp4',
            'assets/rome-hero.mp4',
            'assets/hero-home.mp4']}

            poster="assets/sunset-hero.jpg"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div className="overlay">
          <div className="center-block">
            <h1 className="h-display">
              Grounded by design.
            </h1>
          </div>
          <div className="bottom" />
        </div>
        <span className="scroll">↓ scroll</span>
      </section>

      {/* Intro */}
      <section className="section">
        <div className="section-head-2col">
          <div className="eyebrow">overview</div>
          <div>
            <p className="h-2" style={{ marginBottom: 28, maxWidth: '22ch', fontWeight: 400 }}>
              Origination through delivery.
            </p>
            <p className="lede" style={{ color: 'rgba(19,22,24,0.78)' }}>
              One process, one standard.
            </p>
            <div style={{ display: 'flex', gap: 40, marginTop: 48, flexWrap: 'wrap' }}>
              <a className="discover-cta" style={{ fontSize: 'clamp(20px,2vw,28px)' }}
              href="#projects" onClick={(e) => {e.preventDefault();setPage('projects');}}>
                View our work <span className="arrow-big">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Three pillars */}
      <section className="section">
        <div className="eyebrow" style={{ marginBottom: 40 }}>approach</div>
        <div className="pillars">
          {[
          {
            num: '01', title: 'From the ground up',
            body: 'Origination, design, and delivery — in-house. The thinking and the building, inseparable.'
          },
          {
            num: '02', title: 'Depth over volume',
            body: 'A focused portfolio from $5 million to $90 million. Residential, commercial, mixed-use.'
          },
          {
            num: '03', title: 'A stable foundation',
            body: 'Transparent. Rigorous. Reliable. From the first conversation to the final key.'
          }].
          map((p) =>
          <div className="pillar" key={p.num}>
              <span className="num">{p.num}</span>
              <h3 className="title">{p.title}</h3>
              <p>{p.body}</p>
            </div>
          )}
        </div>
      </section>

      {/* Featured project — Cremin Street, layout matches PD template */}
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="eyebrow">featured project</div>
      </section>

      <ProjectDetail
        project={PROJECTS[0]}
        onNav={(id) => {setPage(id);}}
        onOpenProject={(id) => {setActiveProject && setActiveProject(id);setPage('project');}}
        compact />
      

      {/* Recent work — 4-up */}
      <section className="other-wrap">
        <div className="head">
          <div>
            <p className="h-2" style={{ maxWidth: '14ch', fontWeight: 400 }}>Recent work.</p>
          </div>
          <div className="right">
            <a className="mono" style={{ paddingBottom: 2 }}
            href="#projects" onClick={(e) => {e.preventDefault();setPage('projects');}}>
              view all projects →
            </a>
          </div>
        </div>
        <div className="other-grid">
          {PROJECTS.slice(1, 5).map((p) =>
          <a key={p.id} className="other-card" href="#" onClick={(e) => {e.preventDefault();setActiveProject ? setActiveProject(p.id) : null;setPage('project');}}>
              {p.thumbImage || p.image ?
            <div className="placeholder thumb" style={{ backgroundImage: `url('${p.thumbImage || p.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} /> :

            <Placeholder tone={p.tone} label={p.name.toLowerCase()} meta={p.place} className="thumb" />
            }
              <div className="meta">
                <span>{p.name}</span>
                <span className="year">{p.year}</span>
              </div>
            </a>
          )}
        </div>
      </section>
    </div>);

}

/* ------------------------------------------------------------
   PROJECT DETAIL — matches the PDF layout exactly
   ------------------------------------------------------------ */
function ProjectDetail({ project, onNav, onOpenProject, compact = false }) {
  const others = PROJECTS.filter((p) => p.id !== project.id).slice(0, 4);
  const curIdx = PROJECTS.findIndex((p) => p.id === project.id);
  const nextProject = PROJECTS[(curIdx + 1) % PROJECTS.length];
  const openProject = (id) => {
    if (onOpenProject) onOpenProject(id);
    else if (onNav) onNav('project');
  };
  return (
    <div className={compact ? '' : 'page-shell'}>
      <div className="pd-title">
        <h1>{project.name}</h1>
      </div>

      <div className="pd-hero">
        {project.heroVideo ?
        <div className={`placeholder image`} style={{ aspectRatio: '16 / 9', width: '100%', padding: 0, overflow: 'hidden' }}>
          <PingPongVideo src={project.heroVideo} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div> :
        compact && project.homeImage ?
        <div className="placeholder image" style={{ aspectRatio: '16 / 9', width: '100%', backgroundImage: `url('${project.homeImage}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} /> :
        project.image ?
        <div className="placeholder image" style={{ aspectRatio: '16 / 9', width: '100%', backgroundImage: `url('${project.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} /> :

        <Placeholder tone={project.tone} label={project.name.toLowerCase()} meta="hero render" className="image" />
        }
      </div>

      <div className="pd-meta">
        <div className="cell">
          <span className="label">type</span>
          <span className="val">{project.type}</span>
        </div>
        <div className="cell">
          <span className="label">location</span>
          <span className="val">{project.place}</span>
        </div>
        <div className="cell">
          <span className="label">size</span>
          <span className="val">{project.size}</span>
        </div>
        <div className="cell">
          <span className="label">status</span>
          <span className="val">{project.status}</span>
        </div>
      </div>

      <div className="pd-intro">
        <div className="left">{project.long}</div>
        <div className="right">{project.longer}</div>
      </div>

      <div className="pd-media">
        {project.primaryImage ?
        <div className="placeholder item" style={{ padding: 0, overflow: 'hidden', backgroundImage: `url('${project.primaryImage}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} /> :
        project.video ?
        project.pingpong ?
        <div className={`placeholder ${project.tone} item motion`} style={{ padding: 0, overflow: 'hidden' }}>
              <PingPongVideo src={project.video} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div> :

        <div className={`placeholder ${project.tone} item motion`} style={{ padding: 0, overflow: 'hidden' }}>
              <video src={project.video} autoPlay muted loop playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div> :


        <Placeholder tone={project.tone} label={project.name.toLowerCase()} motion className="item" />
        }
        {project.secondaryImage ?
        <div className={`placeholder item`} style={{ padding: 0, overflow: 'hidden', backgroundImage: `url('${project.secondaryImage}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} /> :

        <Placeholder tone={project.tone === 'green' ? 'cream' : 'green'} label={project.name.toLowerCase()} motion className="item" />
        }
      </div>

      <div className="pd-closing">
        <p className="copy">
          Every AKAM project begins with a clear thesis — about place, market, and what the opportunity requires
          to be realised well. {project.name} is one expression of that thesis. Browse the full portfolio for more.
        </p>
        <div className="cta">
          <a
            className="discover-cta"
            href="#project"
            onClick={(e) => {e.preventDefault();openProject(compact ? project.id : nextProject.id);}}>
            
            Discover More <span className="arrow-big">→</span>
          </a>
        </div>
      </div>

      {!compact &&
      <section className="other-wrap" style={{ paddingBottom: 40 }}>
          <div className="head">
            <div>
              <p className="h-2" style={{ maxWidth: '14ch', fontWeight: 400 }}>More work.</p>
            </div>
            <div className="right">
              <a className="mono" style={{ paddingBottom: 2 }}
            href="#projects" onClick={(e) => {e.preventDefault();onNav && onNav('projects');}}>
                view all projects →
              </a>
            </div>
          </div>
          <div className="other-grid">
            {others.map((p) =>
          <a key={p.id} className="other-card" href="#" onClick={(e) => {e.preventDefault();openProject(p.id);}}>
                {p.thumbImage || p.image ?
            <div className="placeholder thumb" style={{ backgroundImage: `url('${p.thumbImage || p.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} /> :

            <Placeholder tone={p.tone} label={p.name.toLowerCase()} meta={p.place} className="thumb" />
            }
                <div className="meta">
                  <span>{p.name}</span>
                  <span className="year">{p.year}</span>
                </div>
              </a>
          )}
          </div>
        </section>
      }
    </div>);

}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
function About({ setPage }) {
  return (
    <div className="page-shell">
      <div className="page-intro">
        <h1>Grounded.</h1>
        <p className="lede">
          We are a Brisbane-based property developer creating considered residential and commercial places
          across South East Queensland.
        </p>
      </div>

      <div className="about-image">
        <div className="placeholder" style={{ aspectRatio: '21 / 9', width: '100%', backgroundImage: "url('assets/team-portrait.png')", backgroundSize: 'cover', backgroundPosition: 'center' }} />
      </div>

      <div className="about-body">
        <div className="statement">
          <p>
            Origination, design, and delivery kept in-house.
          </p>
          <p>
            A market known with depth. Project after project. Year after year.
          </p>
        </div>
      </div>

      <div className="process-wrap">
        <div className="process">
          {[
          { n: '01', t: 'Concept & design', p: 'We identify the opportunity, define the thesis, and partner with architects to shape a development that fits its place and the market.' },
          { n: '02', t: 'Approvals & documentation', p: 'Rigorous pre-contract work — quantity surveying, town planning, structural — so the project is scoped, costed and de-risked before commencement.' },
          { n: '03', t: 'Construction', p: 'Programme management, design integrity and commercial discipline applied at every stage of delivery. One point of accountability throughout.' },
          { n: '04', t: 'Completion & handover', p: 'Final defects, settlement, and realisation. We stay accountable for the quality of what was built, long after handover.' }].
          map((s) =>
          <div className="step" key={s.n}>
              <div className="num">{s.n}</div>
              <h3 className="title">{s.t}</h3>
              <p>{s.p}</p>
            </div>
          )}
        </div>
      </div>

    </div>);

}

Object.assign(window, { Logo, Wordmark, Placeholder, TopBar, MenuOverlay, Footer, Home, About, ProjectDetail, PROJECTS, NAV });