/* global React, Icon, WatchReelButton, WORK, SERVICES, PROCESS, PRINCIPLES, TEAM, JOURNAL, Hero, ClientStrip, WorkIndex, WorkGrid */
const { useState, useEffect, useRef } = React;

// ===================================================================
// Section head
// ===================================================================
function SectionHead({ idx, label, title, right }) {
  return (
    <div className="section-head">
      <div className="left">
        <div className="eyebrow"><span className="idx">{idx}</span> {label}</div>
        <h2 dangerouslySetInnerHTML={{ __html: title }} />
      </div>
      {right ? <div className="right">{right}</div> : null}
    </div>);

}

// ===================================================================
// Services accordion
// ===================================================================
function ServicesAccordion() {
  const [open, setOpen] = useState(0);
  // Hover-driven on devices with a fine pointer; click is kept as a fallback
  // for keyboards and touch screens (where :hover is unreliable).
  return (
    <div className="services-section">
      {SERVICES.map((s, i) =>
      <div key={s.idx} className={`service-row ${open === i ? 'is-open' : ''}`}
      onMouseEnter={() => setOpen(i)}
      onFocus={() => setOpen(i)}
      onClick={() => setOpen(open === i ? -1 : i)}
      tabIndex={0}
      data-hover={open === i ? 'Open' : 'View'}>
          <div className="service-head">
            <div className="idx">{s.idx}</div>
            <div className="name">{s.name}</div>
            <div className="toggle" />
          </div>
          <div className="service-body">
            <div className="service-body-inner">
              <div />
              <div>{s.blurb}</div>
              <ul>{s.deliverables.map((d) => <li key={d}>{d}</li>)}</ul>
              <div />
            </div>
          </div>
        </div>
      )}
    </div>);

}

// ===================================================================
// Process band
// ===================================================================
function ProcessBand() {
  return (
    <section className="process-band">
      <div className="blob-3" />
      <div className="container">
        <SectionHead idx="P—01" label="How we work" title="Brief to <em>master</em>, in four<br/>tidy moves." />
        <div className="process-grid">
          {PROCESS.map((p) =>
          <div key={p.num} className="process-step">
              <div className="num">— {p.num}</div>
              <h3>{p.title}</h3>
              <p>{p.blurb}</p>
              <div className="duration">{p.dur}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===================================================================
// Studio split
// ===================================================================
function StudioSplit({ onGoto }) {
  return (
    <section style={{ position: 'relative' }}>
      <div className="container">
        <div className="studio-split">
          <div className="imgs">
            <div className="img img-tall" style={{ backgroundImage: 'url(assets/bts-camera-portrait.jpg)' }} />
            <div className="img-stack">
              <div className="img" style={{ backgroundImage: 'url(assets/bts-golf-slider.jpg)' }} />
              <div className="img" style={{ backgroundImage: 'url(assets/bts-theatre-crew.jpg)' }} />
            </div>
          </div>
          <div>
            <div className="eyebrow"><span className="idx">A—01</span> The studio</div>
            <h2>From founder stories to <em>year-long</em> brand documentaries.</h2>
            <p>We've worked with established corporations and emerging startups across industries. The same small dedicated team carries every project — director, DOP, editor — so the people who shape the brief are the people behind the camera and at the colour grade.</p>
            <div className="stats">
              <div className="stat"><div className="num">120+</div><div className="lbl">Projects delivered</div></div>
              <div className="stat"><div className="num">8 yrs</div><div className="lbl">In business</div></div>
              <div className="stat"><div className="num">W3</div><div className="lbl">Acton, London</div></div>
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 10 }}>
              <button className="btn-sec" onClick={() => onGoto('about')} data-hover="View">More about us <Icon name="arrow-up-right" /></button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ===================================================================
// Testimonial
// ===================================================================
function Testimonial() {
  return (
    <section className="testimonial">
      <div className="container">
        <div className="eyebrow" style={{ justifyContent: 'center' }}><span className="idx">T—01</span> What clients say</div>
        <p className="quote">"Thank you so much! These videos are super amazing and I'm really happy with them. I'm super happy with this, and will definitely consider your services next time we do a shoot — and will <em>continue</em> to recommend you when the occasion arises."</p>
        <div className="attribution">
          <div className="name">James</div>
          <div className="role">Director, True Vision Brand</div>
        </div>
      </div>
    </section>);

}

// ===================================================================
// Principles grid
// ===================================================================
function Principles() {
  return (
    <section className="principles">
      <div className="container">
        <SectionHead idx="P—02" label="Studio principles" title="Six things we <em>actually</em> do." />
        <div className="principles-grid">
          {PRINCIPLES.map((p) =>
          <div key={p.num} className="principle">
              <div>
                <div className="num">— {p.num}</div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===================================================================
// CTA banner
// ===================================================================
function CtaBanner({ onGoto, variant }) {
  const cls = variant === 'light' ? 'cta-banner cta-banner--light' : 'cta-banner';
  return (
    <section className={cls}>
      <div className="blob-cta" />
      <div className="container">
        <div className="eyebrow cta-eyebrow"><span className="idx">VF—00</span> Let's make something</div>
        <h2>Ready to make<br />an&nbsp;<em style={{ letterSpacing: "-3.64px" }}>impact?</em></h2>
        <p>Send us the brief, a deck, or a couple of references.
We'll come back within two working days with thoughts and an honest sense of fit.</p>
        <div className="actions">
          <button className="btn-white" onClick={() => onGoto('contact')} data-hover="Send">
            Say hello <Icon name="arrow-right" />
          </button>
          <WatchReelButton className="btn-ghost"><Icon name="play" /> Watch reel</WatchReelButton>
        </div>
      </div>
    </section>);
}

// ===================================================================
// Mega footer
// ===================================================================
function MegaFooter({ isRentals }) {
  const logo = isRentals ? 'assets/rentals-logo-white.png' : 'assets/logo-white.png';
  const blurb = isRentals ?
  'The rental arm of Valley Films. Hand-checked camera, lens, lighting and grip out of our Acton studio.' :
  'Boutique West London film production company. Detail driven works for brands and agencies.';
  const email = isRentals ? 'rentals@valley.film' : 'info@valley.film';
  const brandName = isRentals ? 'Valley Rentals' : 'Valley Films';
  const homeHref = isRentals ? '/rentals' : '/';
  const crossLinkHref = isRentals ? '/' : '/rentals';
  const crossLabel = isRentals ? 'Valley Films' : 'Valley Rentals';
  return (
    <footer className="mega-footer">
      <div className="container">
        <div className="footer-cols">
          <div className="brand-col">
            <a href={homeHref} aria-label={`${brandName} home`}>
              <img src={logo} alt={brandName} style={{ cursor: 'pointer' }} />
            </a>
            <p>{blurb}</p>
          </div>
          <div className="col">
            <h5>Pages</h5>
            <ul className="footer-links">
              {isRentals ? (
                <React.Fragment>
                  <li><a href={crossLinkHref}>{crossLabel} ↗</a></li>
                  <li><a href="/rentals">Home</a></li>
                  <li><a href="/rentals/equipment">Equipment</a></li>
                  <li><a href="/rentals/contact">Contact</a></li>
                  <li><a href="/rentals/open-account">Open Account</a></li>
                  <li><a href="/privacy">Privacy</a></li>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <li><a href={crossLinkHref}>{crossLabel} ↗</a></li>
                  <li><a href="/about">About</a></li>
                  <li><a href="/contact">Contact</a></li>
                  <li><a href="/privacy">Privacy</a></li>
                </React.Fragment>
              )}
            </ul>
          </div>
          <div className="col">
            <h5>Visit</h5>
            <p><a href="https://www.google.com/maps/search/?api=1&query=Access+House+207-211+The+Vale+Acton+London+W3+7QS" target="_blank" rel="noopener noreferrer" className="footer-link-inline">Access House,<br />207–211 The Vale,<br />Acton, London W3 7QS</a></p>
          </div>
          <div className="col">
            <h5>Get in touch</h5>
            <p><a href={`mailto:${email}`} className="footer-link-inline">{email}</a><br /><a href="https://wa.me/message/UI5I3PDWH5Q3N1" target="_blank" rel="noopener noreferrer" className="footer-link-inline">+44 7771 039043</a><br /><a href="https://instagram.com/rentals.valley" target="_blank" rel="noopener noreferrer" className="footer-link-inline">@rentals.valley</a></p>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} {brandName} · All rights reserved</span>
          <a className="footer-link-inline" href="https://games.valley.film">Games ↗</a>
          <span>Made in London UK</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { SectionHead, ServicesAccordion, ProcessBand, StudioSplit, Testimonial, Principles, CtaBanner, MegaFooter });