/* global React, useContent, useScrollY, useReveal, useSeo,
   Nav, Footer, Still, VideoPlaceholder, Page, Link, useRoute */

const { useEffect, useRef } = React;

function ServicePage({ slug }) {
  const { content } = useContent();
  const services = content.services;
  const idx = services.findIndex((s) => s.slug === slug);
  const svc = idx >= 0 ? services[idx] : null;
  const prev = idx > 0 ? services[idx - 1] : null;
  const next = idx >= 0 && idx < services.length - 1 ? services[idx + 1] : null;

  const titleRef = useRef(null);
  const y = useScrollY();
  useEffect(() => {
    const el = titleRef.current;
    if (el) el.style.transform = `translate3d(0, ${y * -0.25}px, 0)`;
  }, [y]);

  useSeo({
    title: svc ? (svc.metaTitle || `${svc.name} | Lime Lens Studio`) : 'Service not found | Lime Lens Studio',
    description: svc ? svc.metaDescription : 'This service could not be found.',
    path: `/services/${slug}`,
    jsonLd: svc ? {
      '@context': 'https://schema.org',
      '@type': 'Service',
      name: svc.name,
      serviceType: svc.name,
      description: svc.metaDescription,
      provider: { '@type': 'Organization', name: 'Lime Lens Studio', url: 'https://limelens.studio/' },
      areaServed: 'Worldwide',
    } : null,
  });

  if (!svc) {
    return (
      <Page kind="service-not-found">
        <Nav activeKey="studio" />
        <div className="container" style={{ paddingTop: 200, paddingBottom: 200, textAlign: 'center' }}>
          <h1 className="display-2 serif italic">Service not found.</h1>
          <div style={{ marginTop: 36 }}>
            <Link to="/" className="btn">Back home →</Link>
          </div>
        </div>
        <Footer />
      </Page>
    );
  }

  const related = content.projects.filter((p) =>
    (svc.relatedFormats || []).includes(p.format)
  ).slice(0, 3);

  return (
    <Page kind="service">
      <Nav activeKey="studio" />

      {/* HEADER */}
      <section style={{ paddingTop: 140 }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
            <Link to="/studio" className="eyebrow">← All services</Link>
            <span className="eyebrow">
              {String(idx + 1).padStart(2, '0')} / {String(services.length).padStart(2, '0')} · Service
            </span>
          </div>

          <span className="eyebrow" style={{ display: 'block', marginTop: 56 }}>What we make</span>
          <h1 ref={titleRef} className="display-1 serif italic" style={{ margin: '18px 0 0', willChange: 'transform' }}>
            {svc.name}<span style={{ color: 'var(--lime)' }}>.</span>
          </h1>
          <div className="mono" style={{ fontSize: 12, color: 'var(--fg-1)', marginTop: 14, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            {svc.detail}
          </div>
          <p className="lead" style={{ marginTop: 40, maxWidth: '46ch' }}>{svc.lead}</p>
        </div>
      </section>

      {/* HERO IMAGE — visualises the content type (.jpg drop) */}
      <section style={{ paddingTop: 64 }}>
        <div className="container">
          <div className="service-hero">
            <img src={svc.heroImage || 'assets/hero-poster.jpg'} alt={`${svc.name} — Lime Lens Studio`} />
          </div>
        </div>
      </section>

      {/* BODY — how we work with this content type */}
      <section style={{ padding: '110px 0 40px' }}>
        <div className="container">
          <div className="service-body-grid">
            <div className="service-body-aside">
              <span className="eyebrow">How we work</span>
            </div>
            <div className="service-body-copy">
              {(svc.body || []).map((p, i) => (
                <p key={i} className={i === 0 ? 'lead' : 'body'} style={{ marginBottom: 22 }}>{p}</p>
              ))}
              <div style={{ marginTop: 44, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <Link to="/contact" className="btn">Start a project →</Link>
                <Link to="/work" className="btn btn-ghost">See the work →</Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RELATED WORK */}
      {related.length > 0 ? (
        <section style={{ padding: '90px 0 40px', borderTop: '1px solid var(--line)' }}>
          <div className="container">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
              <span className="eyebrow">Related work</span>
              <Link to="/work" className="eyebrow">All work →</Link>
            </div>
            <div className="service-related-grid">
              {related.map((p) => (
                <Link key={p.id} to={`/work/${p.slug}`}>
                  <VideoPlaceholder
                    label={p.title}
                    duration={p.length}
                    meta={p.format}
                    className="video-16x9"
                    youtubeId={p.youtubeId}
                    videoSrc={p.videoSrc}
                    poster={p.poster}
                    showPlay={false}
                    embeddable={p.embeddable}
                  />
                  <h3 className="serif italic" style={{ fontSize: 24, margin: '16px 0 4px' }}>{p.title}</h3>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', letterSpacing: '0.12em' }}>{p.client} · {p.year}</div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      ) : null}

      {/* PREV / NEXT SERVICE */}
      <section style={{ padding: '60px 0 100px', borderTop: '1px solid var(--line)' }}>
        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <span className="eyebrow">{prev ? '← Previous' : ''}</span>
            {prev ? (
              <Link to={`/services/${prev.slug}`}>
                <div className="display-3 serif italic" style={{ marginTop: 8 }}>{prev.name}</div>
              </Link>
            ) : <Link to="/studio" className="display-3 serif italic" style={{ marginTop: 8, display: 'block' }}>Studio</Link>}
          </div>
          <div style={{ textAlign: 'right' }}>
            <span className="eyebrow">{next ? 'Next →' : ''}</span>
            {next ? (
              <Link to={`/services/${next.slug}`}>
                <div className="display-3 serif italic" style={{ marginTop: 8 }}>{next.name}</div>
              </Link>
            ) : <Link to="/contact" className="display-3 serif italic" style={{ marginTop: 8, display: 'block' }}>Contact</Link>}
          </div>
        </div>
      </section>

      <Footer />
    </Page>
  );
}

Object.assign(window, { ServicePage });