// Vestvask — sider, del 1: Forside + tjenesteside-mal (Takvask)

function Forside({ mobile }) {
  const c = useContent();
  return (
    <React.Fragment>
      {/* 1 · Hero med før/etter-wipe */}
      <section className="vv-hero">
        <div className="vv-container vv-hero-in">
          <div>
            <span className="vv-eyebrow vv-eyebrow-dark">{c.hero.eyebrow}</span>
            <h1 className="vv-h1">{c.hero.title}</h1>
            <p className="vv-sub">{c.hero.subtitle}</p>
            <div className="vv-btnrow">
              <Btn href="/kontakt">Få gratis befaring</Btn>
              <Btn kind="light" icon="phone" href={c.settings.telHref}>Ring nå</Btn>
            </div>
          </div>
          <div>
            {c.hero.imageUrl
              ? <img className="vv-hero-img" src={c.hero.imageUrl} alt={c.hero.imageAlt} />
              : <Ph file="hero-bilde.jpg" alt={c.hero.imageAlt} ratio="4 / 3" />}
          </div>
        </div>
      </section>

      {/* 2 · Tjenester */}
      <section className="vv-section" id="tjenester">
        <div className="vv-container">
          <SectionHead eyebrow={c.servicesHead.eyebrow} title={c.servicesHead.title}
            lead={c.servicesHead.lead} />
          <div className="vv-cards">
            {c.services.map((s) => <ServiceCard key={s.title} {...s} />)}
          </div>
        </div>
      </section>

      {/* 3 · Utstyrspark-teaser */}
      <section className="vv-section vv-section-dark">
        <div className="vv-container">
          <div className="vv-split-head">
            <SectionHead dark={true} eyebrow={c.equipmentHead.eyebrow} title={c.equipmentHead.title}
              lead={c.equipmentHead.lead} />
            <Btn kind="light" icon="arrow" href="/utstyrspark">Se utstyrsparken</Btn>
          </div>
          <div className="vv-gal3">
            {c.equipmentHead.gallery.map((img, i) => (
              <Ph key={img.url || img.file || i} dark={true} src={img.url || undefined} file={img.file} alt={img.alt} />
            ))}
          </div>
        </div>
      </section>

      {/* 4 · Om oss-teaser */}
      <section className="vv-section">
        <div className="vv-container vv-about">
          <div className="vv-about-copy">
            <SectionHead eyebrow={c.about.eyebrow} title={c.about.title} />
            <p>{c.about.body}</p>
            <a href="/om-oss" className="vv-arrowlink">
              {c.about.linkLabel} <VvIcon name="arrow" size={16} stroke={2.1} />
            </a>
          </div>
          <div className="vv-about-imgs">
            {c.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>

      {/* 5 · Tillitsbånd */}
      <section className="vv-section vv-section-mist">
        <div className="vv-container">
          <div className="vv-trust">
            {c.trust.map((item, i) => (
              <div className="vv-trust-item" key={item.title || i}>
                <span className="vv-trust-icon"><VvIcon name={item.icon || 'pin'} size={26} stroke={1.7} /></span>
                <h3 className="vv-h3">{item.title}</h3>
                <p>{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 6 · Kontakt-CTA med skjema */}
      <section className="vv-section">
        <div className="vv-container vv-contact">
          <div>
            <SectionHead eyebrow={c.contactHead.eyebrow} title={c.contactHead.title}
              lead={c.contactHead.lead} />
            <a href={c.settings.telHref} className="vv-bigtel vv-mono">
              <VvIcon name="phone" size={24} stroke={1.9} />{c.settings.tel}
            </a>
            <div className="vv-contact-lines">
              <a href={'mailto:' + c.settings.email} className="vv-contact-line">
                <span className="vv-cl-ico"><VvIcon name="mail" size={17} /></span>{c.settings.email}
              </a>
              <span className="vv-contact-line">
                <span className="vv-cl-ico"><VvIcon name="pin" size={17} /></span>{c.settings.area}
              </span>
            </div>
          </div>
          <div className="vv-form-card">
            <BefaringForm />
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { Forside });