/* Landmark Studio — Hero, About, Team, Contact components */

const Brand = ({ link = '#top' }) => (
  <a className="brand" href={link} aria-label="Landmark Studio">
    <img className="brand-logo" src="images/landmark-logo.png" alt="Landmark Studio"/>
  </a>
);

// Default menu used when LANDMARK_MENU isn't available (e.g. data fetch failed).
const DEFAULT_MENU = [
  { label: 'About',    href: '#about'         },
  { label: 'Team',     href: 'Team.html'      },
  { label: 'Projects', href: 'Projects.html'  },
  { label: 'Network',  href: 'Network.html'   },
  { label: 'Contact',  href: '#contact'       },
];

// Map a hash-only href to an absolute one when we're not on the home page.
const navHref = (href, active) => {
  if (active === 'home') return href;
  if (href && href.startsWith('#')) return `index.html${href}`;
  return href;
};

// Slugify a label to compare against the page's `active` flag.
const labelSlug = (label) => (label || '').toLowerCase().replace(/[^a-z0-9]+/g, '');

const Nav = ({ active = 'home' }) => {
  const [open, setOpen] = React.useState(false);
  const items = (window.LANDMARK_MENU && window.LANDMARK_MENU.length) ? window.LANDMARK_MENU : DEFAULT_MENU;

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const close = () => setOpen(false);

  return (
    <nav className={`nav ${open ? 'is-open' : ''}`}>
      <Brand link={active === 'home' ? '#top' : 'index.html'}/>
      <ul className="nav-links">
        {items.map((it) => {
          const slug = labelSlug(it.label);
          const isActive = slug === active;
          return (
            <li key={it.label}>
              <a className={isActive ? 'is-active' : ''}
                 href={navHref(it.href, active)}
                 target={it.is_external ? '_blank' : undefined}
                 rel={it.is_external ? 'noopener noreferrer' : undefined}>
                {it.label}
              </a>
            </li>
          );
        })}
      </ul>

      <button
        className="nav-toggle"
        aria-label={open ? 'Close menu' : 'Open menu'}
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <span className="nav-toggle-bar"/>
        <span className="nav-toggle-bar"/>
      </button>

      <div className={`nav-drawer ${open ? 'on' : ''}`} aria-hidden={!open}>
        <ul>
          {items.map((it) => (
            <li key={it.label}>
              <a href={navHref(it.href, active)}
                 target={it.is_external ? '_blank' : undefined}
                 rel={it.is_external ? 'noopener noreferrer' : undefined}
                 onClick={close}>
                {it.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
};

const HeroTriple = ({ images = [], tagline }) => (
  <section className="hero-triple" id="top">
    <div className="ht-grid">
      {[0, 1, 2].map(idx => (
        <div
          key={idx}
          className="ht-panel"
          style={images[idx] ? { backgroundImage: `url(${images[idx]})` } : {}}
        >
          {!images[idx] && <div className="ht-placeholder">{idx + 1}</div>}
          <div className="ht-panel-overlay"/>
        </div>
      ))}
    </div>

    <div className="ht-content">
      <div className="ht-eyebrow">Landmark · Landscape Studio</div>
      <h1 className="ht-title">
        <span style={{display:'block'}}>Shaping identity</span>
        <span style={{display:'block'}} className="accent italic">through place.</span>
      </h1>
      <p className="ht-tag">
        {tagline || "Working across scales — from small interventions to masterplans — to create places with a strong sense of identity."}
      </p>
    </div>

    <div className="ht-meta">
      <div>Tbilisi · Georgia</div>
      <div>Est. 2018</div>
      <div>41.71° N / 44.79° E</div>
    </div>
  </section>
);

const HeroCarousel = ({ slides, tagline }) => {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setI(x => (x + 1) % n), 6000);
    return () => clearTimeout(t);
  }, [i, paused, n]);

  // Preload neighbours so the dissolve has no flash
  React.useEffect(() => {
    slides.forEach(s => { const im = new Image(); im.src = s.src; });
  }, [slides]);

  const go = (next) => setI((i + next + n) % n);

  return (
    <section className="hero-carousel" id="top"
             onMouseEnter={() => setPaused(true)}
             onMouseLeave={() => setPaused(false)}>
      <div className="hc-stage">
        {slides.map((s, idx) => (
          s.srcs ? (
            <div key={idx} className={`hc-slide ${idx === i ? 'on' : ''}`} aria-hidden={idx !== i}>
              <div className="hc-triple">
                {s.srcs.map((src, si) => (
                  <div key={si} className="hc-triple-panel" style={{ backgroundImage: `url(${src})` }}>
                    <div className="hc-triple-overlay"/>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div
              key={idx}
              className={`hc-slide ${idx === i ? 'on' : ''}`}
              style={{ backgroundImage: `url(${s.src})` }}
              aria-hidden={idx !== i}
            />
          )
        ))}
      </div>

      <div className="hc-meta">
        <div>Tbilisi · Georgia</div>
        <div>Est. 2018</div>
        <div>41.71° N / 44.79° E</div>
      </div>

      <div className="hc-content">
        <div className="hc-row">
          <div>
            <div className="hc-eyebrow">Landmark · Landscape Studio</div>
            <h1 className="hc-title">
              <span style={{display:'block'}}>Shaping identity</span>
              <span style={{display:'block'}} className="accent italic">through place.</span>
            </h1>
          </div>
        </div>
      </div>

      <div className="hc-controls">
        <div className="hc-counter">
          <span>{String(i + 1).padStart(2, '0')}</span>
          <span className="sep">/</span>
          <span>{String(n).padStart(2, '0')}</span>
        </div>
        <div className="hc-dots">
          {slides.map((_, idx) => (
            <button
              key={idx}
              className={`hc-dot ${idx === i ? 'on' : ''}`}
              onClick={() => setI(idx)}
              aria-label={`Slide ${idx + 1}`}
            />
          ))}
        </div>
        <div className="hc-arrows">
          <button className="hc-arrow" onClick={() => go(-1)} aria-label="Previous">←</button>
          <button className="hc-arrow" onClick={() => go(1)}  aria-label="Next">→</button>
        </div>
      </div>
    </section>
  );
};

const Hero = ({ tagline }) => (
  <section className="hero" id="top">
    <div className="hero-bg" />
    <svg className="hero-mark" viewBox="0 0 800 800" fill="none" aria-hidden>
      <defs>
        <radialGradient id="moss-grad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--moss-2)" stopOpacity="0.32"/>
          <stop offset="70%" stopColor="var(--moss)" stopOpacity="0.22"/>
          <stop offset="100%" stopColor="var(--moss)" stopOpacity="0"/>
        </radialGradient>
        <radialGradient id="clay-grad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--clay-2)" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="var(--clay)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <ellipse cx="400" cy="430" rx="360" ry="320" fill="url(#moss-grad)"/>
      <circle cx="560" cy="280" r="120" fill="url(#clay-grad)"/>
      {/* viewfinder corners — echo logo */}
      <g stroke="var(--moss)" strokeWidth="1.2" fill="none" opacity="0.55">
        <path d="M150 150 L150 220 M150 150 L220 150"/>
        <path d="M650 150 L650 220 M650 150 L580 150"/>
        <path d="M150 650 L150 580 M150 650 L220 650"/>
        <path d="M650 650 L650 580 M650 650 L580 650"/>
      </g>
    </svg>

    <div className="hero-meta">
      <div>Tbilisi · Georgia</div>
      <div>Est. 2018</div>
      <div>41.71° N / 44.79° E</div>
    </div>

    <div className="container" style={{position:'relative', width:'100%'}}>
      <div className="hero-row">
        <div>
          <div className="eyebrow" style={{marginBottom: 28}}>Landmark · Landscape Studio</div>
          <h1 className="hero-title">
            <span style={{display:'block'}}>Shaping identity</span>
            <span style={{display:'block'}} className="accent italic">through place.</span>
          </h1>
        </div>
        <p className="hero-tag">
          {tagline || "Working across scales — from small interventions to masterplans — to create places with a strong sense of identity."}
        </p>
      </div>
    </div>
  </section>
);

const About = ({ copy }) => {
  const site = window.LANDMARK_SITE || {};
  const pick = (key, fallback) => (copy && copy[key]) || site[key] || fallback;

  const lead   = pick('about.lead',
    "Landmark is a landscape design studio focused on creating places with a strong and lasting identity. Our work spans a wide range of scales, from small, precise interventions to large-scale masterplans, approaching each project with the same clarity, care, and attention to context.");
  const p1     = pick('about.p1',
    "The studio's approach is rooted in understanding how landscapes are shaped by culture, environment, and everyday use.");
  const p2     = pick('about.p2',
    "A significant part of our work engages with sensitive environments and cultural landscapes.");
  const italic = pick('about.italic',
    "We believe that impactful landscapes are not defined by scale, but by how they are experienced. Whether designing a single element or an entire site, our goal is to create environments that feel natural, coherent, and built to endure — places that people recognise, use, and remember.");

  const stats = [1, 2, 3].map(i => ({
    num:   pick(`about.stat${i}.num`,   ['40+', '10+', '12'][i - 1]),
    label: pick(`about.stat${i}.label`, ['Projects · 2018–2026', 'People in the studio', 'Protected areas planned'][i - 1]),
  }));

  return (
    <section className="section" id="about" style={{background:'var(--bg)'}}>
      <div className="container">
        <div className="about-grid">
          <h2 className="reveal">Landscape Studio<br/><span style={{fontStyle:'italic', color:'var(--moss)'}}>in Tbilisi.</span></h2>
          <div className="body">
            <p className="lead reveal" style={{marginBottom: 36}}>{lead}</p>
            <p className="reveal">{p1}</p>
            <p className="reveal">{p2}</p>
            <p className="reveal" style={{fontStyle:'italic', color:'var(--ink)'}}>{italic}</p>
            <div className="stat-row reveal">
              {stats.map((s,i) => (
                <div className="stat" key={i}>
                  <div className="num">{s.num}</div>
                  <div className="label">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Team = ({ team, limit, allLink }) => {
  const shown = limit ? team.slice(0, limit) : team;
  return (
  <section className="section" id="team" style={{background:'var(--bg-deep)'}}>
    <div className="container">
      <div className="s-head reveal">
        <h2>Landmark<br/><span style={{fontStyle:'italic', color:'var(--moss)'}}>team.</span></h2>
        <div className="meta">
          <div style={{marginTop: 8}}>Architects, planners, ecologists and a GIS specialist — each project led by one of us and supported by the rest.</div>
        </div>
      </div>

      <div className="team-list">
        {shown.map((m,i) => (
          <div className="team-row reveal" key={m.name}>
            <div className="tag">{m.tag}</div>
            <div className="name">{m.name}</div>
            <div>
              <div className="role">{m.role}</div>
              <div className="bio" style={{marginTop: 10}}>{m.bio}</div>
            </div>
            <div></div>
          </div>
        ))}
      </div>

      {allLink && (
        <div className="latest-all reveal" style={{marginTop: 56}}>
          <a href={allLink}>All team →</a>
        </div>
      )}
    </div>
  </section>
  );
};

const Contact = ({ contact }) => (
  <section className="section" id="contact" style={{background:'var(--bg)'}}>
    <div className="container">
      <div className="contact-grid">
        <div className="contact-big reveal">
          A site, a plan,<br/>
          a question? <a href={`mailto:${contact.email}`}>Write to us.</a>
        </div>
        <div className="contact-meta">
          <div className="row reveal">
            <div className="label">Email</div>
            <div className="val">{contact.email}</div>
          </div>
          <div className="row reveal">
            <div className="label">Phone</div>
            <div className="val">{contact.phone}</div>
          </div>
          <div className="row reveal">
            <div className="label">Studio</div>
            <div className="val">{contact.address}</div>
          </div>
          <div className="row reveal">
            <div className="label">LinkedIn</div>
            <div className="val"><a href={contact.linkedin} target="_blank" rel="noopener noreferrer" style={{color:'inherit', textDecoration:'none', borderBottom:'1px solid currentColor'}}>Landmark Studio</a></div>
          </div>
          
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div>© 2026 Landmark Landscape Studio · Tbilisi</div>
    <div>Selected works · 2014–2026</div>
  </footer>
);

Object.assign(window, { Brand, Nav, Hero, HeroCarousel, About, Team, Contact, Footer });