/* 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={28} />
      </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.png',
  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: 'the-grove',
  idx: '02',
  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: '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: 'taunton',
  idx: '04',
  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: 'cremin-street',
  idx: '05',
  name: 'Cremin',
  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: 'marlee',
  idx: '06',
  name: 'Mallee',
  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: 'construction 2025',
  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: 'Mallee 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: 'aurora-on-depper',
  idx: '07',
  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: '08',
  name: '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: 'completed',
  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'
},
{
  id: 'rome-avenue',
  idx: '09',
  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: 'completed',
  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'
}];


/* ------------------------------------------------------------
   HOME
   ------------------------------------------------------------ */
function Home({ setPage, setActiveProject }) {
  const [heroIn, setHeroIn] = useState(false);
  // Reveal "Grounded by design." when the hero video reaches its second clip (~5s).
  const SECOND_CLIP_AT = 5.0;
  const onHeroTime = (e) => {if (e.currentTarget.currentTime >= SECOND_CLIP_AT) setHeroIn(true);};
  useEffect(() => {
    const fb = setTimeout(() => setHeroIn(true), 12000); // safety fallback if video stalls
    return () => clearTimeout(fb);
  }, []);
  return (
    <div className="page-shell">
      {/* Hero */}
      <section className="home-hero">
        <div className="image">
          <video
            src="assets/hero-sequence.mp4"
            poster="assets/sunset-hero.jpg"
            autoPlay muted loop playsInline
            onTimeUpdate={onHeroTime}
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div className="overlay">
          <div className="center-block">
            <h1 className={`h-display${heroIn ? ' in' : ''}`}>
              <span className="hd-word">Grounded</span>{' '}
              <span className="hd-word">by</span>{' '}
              <span className="hd-word">design.</span>
            </h1>
          </div>
          <div className="bottom" />
        </div>
        <span className="scroll">↓ scroll</span>
      </section>

      {/* 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].sort((a, b) => (parseInt(b.year) || 0) - (parseInt(a.year) || 0)).slice(0, 4).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">
          AKAM is a property developer specialising in large-format residential and commercial
          developments across South East Queensland. We build at scale - yet treat every project as
          singular: a bespoke response to its place, its market, and the people it is made for. The
          result is developments that feel inevitable in their setting, and hold their value long
          after handover.
        </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-pillars" style={{ padding: '0 var(--pad-x)', marginTop: '8px' }}>
        <div className="pillars">
          <div className="pillar">
            <span className="num">delivered annually</span>
            <h3 className="title">$100m+</h3>
            <p>
              Developments taken from feasibility to handover every year - a track record built on
              certainty of cost and reliability of delivery.
            </p>
          </div>
          <div className="pillar">
            <span className="num">in the pipeline</span>
            <h3 className="title">$250m+</h3>
            <p>
              A forward pipeline of residential and commercial projects across South East
              Queensland's strongest growth corridors.
            </p>
          </div>
          <div className="pillar">
            <span className="num">our focus</span>
            <h3 className="title">Large-format residential &amp; commercial</h3>
            <p>
              Architecturally-led, end-to-end development - each project unique to its site and
              delivered with the discipline of a studio half our size.
            </p>
          </div>
        </div>
      </div>

      <div className="about-body">
        <figure className="about-sketch">
          <img src="assets/sunset-sketch.png" alt="Sunset - concept sketch" />
        </figure>
        <div className="statement">
          <p>
            Every stage of the development process is managed in-house - from initial design and cost planning
            through to delivery and handover. Working closely with landowners, designers, and a trusted network
            of specialists, we bring together the expertise required to develop projects of scale with precision
            and care.
          </p>
          <p>
            No two AKAM developments are the same. Each is a bespoke response to its setting - a considered
            reading of place, market, and architecture that produces buildings with a distinct identity and
            enduring value.
          </p>
          <p>
            Deep industry knowledge and long-standing relationships give our partners certainty on cost and
            confidence on delivery. The result is developments that stand apart - brought to life with
            transparency, speed, and reliability at every stage.
          </p>
          <a className="btn-line" style={{ marginTop: 12 }} href="#contact"
          onClick={(e) => {e.preventDefault();setPage('contact');}}>
            Enquire <span className="arrow-big">→</span>
          </a>
        </div>
      </div>

    </div>);

}

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