// Vestvask — sider, del 2: Utstyrspark, Om oss, Kontakt
// Delt kontaktinfo (telefon/e-post) hentes fra Sanity via useContent().

function Utstyrspark({ mobile }) {
  const { settings, equipment } = useContent();
  const e = equipment;
  return (
    <React.Fragment>
      <section className="vv-pagehead">
        <div className="vv-container">
          <nav className="vv-crumb" aria-label="Brødsmulesti">
            <a href="/">Forside</a>
            <span>›</span>
            <span>Utstyrspark</span>
          </nav>
          <h1 className="vv-h1 vv-h1-dark">Utstyrspark</h1>
          <p className="vv-lead">{e.lead}</p>
          <div className="vv-btnrow">
            <Btn href="/kontakt">Få gratis befaring</Btn>
            <Btn kind="outline" icon="phone" href={settings.telHref}>Ring nå</Btn>
          </div>
        </div>
      </section>

      <section className="vv-section">
        <div className="vv-container">
          <div className="vv-specs">
            {e.specs.map((spec, i) => (
              <div className="vv-spec" key={spec.title || i}>
                <h3 className="vv-h3">{spec.title}</h3>
                <p>{spec.text}</p>
                {spec.line ? <span className="vv-spec-line">{spec.line}</span> : null}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="vv-section vv-section-mist">
        <div className="vv-container">
          <SectionHead eyebrow={e.galleryHead.eyebrow} title={e.galleryHead.title} />
          <div className="vv-gal6">
            {e.gallery.map((img, i) => (
              <Ph key={img.url || img.file || i} src={img.url || undefined} file={img.file} alt={img.alt} />
            ))}
          </div>
        </div>
      </section>

      <section className="vv-section">
        <div className="vv-container vv-about">
          <div className="vv-about-copy">
            <SectionHead eyebrow={e.rental.eyebrow} title={e.rental.title} />
            <p>{e.rental.body}</p>
            <div className="vv-btnrow">
              <Btn kind="outline" icon="phone" href={settings.telHref}>Ring nå</Btn>
            </div>
          </div>
          <div>
            <Ph src={e.rental.url || undefined} file={e.rental.file} ratio="16 / 9" alt={e.rental.alt} />
          </div>
        </div>
      </section>

      <CtaBand title="Trenger du lift – eller en ren fasade?" />
    </React.Fragment>
  );
}

function OmOss({ mobile }) {
  const { settings, about } = useContent();
  return (
    <React.Fragment>
      <section className="vv-pagehead">
        <div className="vv-container">
          <nav className="vv-crumb" aria-label="Brødsmulesti">
            <a href="/">Forside</a>
            <span>›</span>
            <span>Om oss</span>
          </nav>
          <h1 className="vv-h1 vv-h1-dark">Om oss</h1>
          <p className="vv-lead">Lokal aktør fra Austevoll. Vi leverer profesjonelle tjenester til privatpersoner, borettslag og næringsliv i Bergen og omegn.</p>
        </div>
      </section>

      <section className="vv-section">
        <div className="vv-container vv-about">
          <div className="vv-about-copy">
            <SectionHead eyebrow="Kort om Vestvask" title="Skikkelig utstyrt, skikkelig utført" />
            <p>Vi møter opp med eget utstyr – mobil vaskerigg med varmtvann og høytrykk, og egen liftpark – og gjør jobben ferdig uten omveier.</p>
            <dl className="vv-facts">
              <div className="vv-factrow"><dt>Base</dt><dd className="vv-mono">Austevoll</dd></div>
              <div className="vv-factrow"><dt>Område</dt><dd className="vv-mono">Bergen og omegn</dd></div>
              <div className="vv-factrow"><dt>Kunder</dt><dd>Privat · Borettslag · Næring</dd></div>
              <div className="vv-factrow"><dt>Telefon</dt><dd className="vv-mono">{settings.tel}</dd></div>
            </dl>
          </div>
          <div className="vv-about-imgs">
            {about.gallery.map((img, i) => (
              <Ph key={img.url || img.file || i} src={img.url || undefined} file={img.file}
                ratio={i === 0 ? '16 / 8' : undefined} alt={img.alt} />
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </React.Fragment>
  );
}

function Kontakt({ mobile }) {
  const { settings } = useContent();
  return (
    <React.Fragment>
      <section className="vv-pagehead">
        <div className="vv-container">
          <nav className="vv-crumb" aria-label="Brødsmulesti">
            <a href="/">Forside</a>
            <span>›</span>
            <span>Kontakt</span>
          </nav>
          <h1 className="vv-h1 vv-h1-dark">Kontakt</h1>
          <p className="vv-lead">Ta kontakt for gratis befaring – eller ring oss direkte.</p>
        </div>
      </section>

      <section className="vv-section">
        <div className="vv-container vv-contact">
          <div>
            <SectionHead eyebrow="Direkte" title="Snakk med oss" />
            <a href={settings.telHref} className="vv-bigtel vv-mono">
              <VvIcon name="phone" size={24} stroke={1.9} />{settings.tel}
            </a>
            <div className="vv-contact-lines">
              <a href={'mailto:' + settings.email} className="vv-contact-line">
                <span className="vv-cl-ico"><VvIcon name="mail" size={17} /></span>{settings.email}
              </a>
              <span className="vv-contact-line">
                <span className="vv-cl-ico"><VvIcon name="pin" size={17} /></span>{settings.area}
              </span>
            </div>
          </div>
          <div className="vv-form-card">
            <BefaringForm />
          </div>
        </div>
      </section>

      <section className="vv-section vv-section-mist" style={{ paddingTop: '0' }}>
        <div className="vv-container" style={{ paddingTop: '54px' }}>
          <MapPh />
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { Utstyrspark, OmOss, Kontakt });