// Vestvask — delte komponenter (header, footer, knapper, skjema, m.m.)
// Eksporteres til window nederst.

const VV_ICONS = {
  phone: <path d="M6 3.5h2.6l1.8 4.4-2.1 1.5a12.5 12.5 0 0 0 4.3 4.3l1.5-2.1 4.4 1.8V16a2 2 0 0 1-2.1 2A15 15 0 0 1 4 5.6a2 2 0 0 1 2-2.1z"></path>,
  arrow: <path d="M3.5 11h15M13 5.5l5.5 5.5-5.5 5.5"></path>,
  arrows: <path d="M7.5 7.5 4 11l3.5 3.5M14.5 7.5 18 11l-3.5 3.5M4 11h14"></path>,
  pin: <React.Fragment><path d="M11 20s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z"></path><circle cx="11" cy="9" r="2.5"></circle></React.Fragment>,
  check: <path d="M4 11.5l5 5L18.5 6"></path>,
  mail: <React.Fragment><rect x="3" y="5" width="16" height="13" rx="2"></rect><path d="M3.5 6.5 11 12.5l7.5-6"></path></React.Fragment>,
  menu: <path d="M3.5 6.5h15M3.5 11h15M3.5 15.5h15"></path>,
  camera: <React.Fragment><rect x="3" y="6.5" width="16" height="11.5" rx="2"></rect><path d="M8 6.5 9.5 4h3L14 6.5"></path><circle cx="11" cy="12.2" r="3"></circle></React.Fragment>,
  droplet: <path d="M11 3.5s5.8 6.3 5.8 10a5.8 5.8 0 1 1-11.6 0c0-3.7 5.8-10 5.8-10z"></path>,
  split: <React.Fragment><rect x="3.5" y="5" width="15" height="13" rx="1.5"></rect><path d="M11 3.5v16"></path></React.Fragment>
};

function VvIcon({ name, size = 20, stroke = 1.8, style, className }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none"
         stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         style={style} aria-hidden="true">{VV_ICONS[name]}</svg>
  );
}

function Wordmark({ light, tag }) {
  return (
    <a href="/" className={'vv-logo' + (light ? ' vv-logo-light' : '')}>
      <span className="vv-logo-word">VESTVASK</span>
      {tag ? <span className="vv-logo-tag">Takvask · Fasadevask · Liftutleie</span> : null}
    </a>
  );
}

function Btn({ kind = 'primary', icon, children, small, href = '#', block }) {
  const cls = ['vv-btn', 'vv-btn-' + kind, small ? 'vv-btn-sm' : '', block ? 'vv-btn-block' : ''].filter(Boolean).join(' ');
  return (
    <a href={href} className={cls} onClick={(e) => { if (href === '#') e.preventDefault(); }}>
      {icon ? <VvIcon name={icon} size={small ? 15 : 17} stroke={2} /> : null}
      <span>{children}</span>
    </a>
  );
}

function Ph({ file, alt, ratio = '4 / 3', dark, style, src }) {
  // Med opplastet bilde (src) vises ekte foto; ellers en plassholder.
  if (src) {
    return (
      <img className="vv-img" src={src} alt={alt || ''} loading="lazy"
        style={Object.assign({ aspectRatio: ratio }, style)} />
    );
  }
  return (
    <figure className={'vv-ph' + (dark ? ' vv-ph-dark' : '')} style={Object.assign({ aspectRatio: ratio }, style)}>
      <VvIcon name="camera" size={24} stroke={1.6} />
      <figcaption>
        <code>{file}</code>
        <span>{alt}</span>
      </figcaption>
    </figure>
  );
}

function SiteHeader({ mobile, active }) {
  const { settings } = useContent();
  const nav = [['Tjenester', 'tjenester', '/#tjenester'], ['Utstyrspark', 'utstyrspark', '/utstyrspark'], ['Om oss', 'om-oss', '/om-oss'], ['Kontakt', 'kontakt', '/kontakt']];
  if (mobile) {
    return (
      <header className="vv-header-m">
        <Wordmark />
        <div className="vv-header-m-actions">
          <a href={settings.telHref} className="vv-iconbtn" aria-label="Ring oss"><VvIcon name="phone" size={19} /></a>
          <button type="button" className="vv-iconbtn" aria-label="Meny"><VvIcon name="menu" size={19} /></button>
        </div>
      </header>
    );
  }
  return (
    <header className="vv-header">
      <div className="vv-container vv-header-in">
        <Wordmark tag={true} />
        <nav className="vv-nav" aria-label="Hovedmeny">
          {nav.map(([label, key, href]) => (
            <a key={key} href={href} className={active === key ? 'vv-on' : ''}>{label}</a>
          ))}
        </nav>
        <div className="vv-header-cta">
          <a href={settings.telHref} className="vv-tel vv-mono"><VvIcon name="phone" size={15} stroke={2} />{settings.tel}</a>
          <Btn small={true} href="/kontakt">Få gratis befaring</Btn>
        </div>
      </div>
    </header>
  );
}

function StickyBar() {
  const { settings } = useContent();
  return (
    <div className="vv-sticky" aria-label="Hurtighandlinger">
      <a href={settings.telHref} className="vv-btn vv-btn-outline vv-btn-block">
        <VvIcon name="phone" size={16} stroke={2} /><span>Ring nå</span>
      </a>
      <a href="/kontakt" className="vv-btn vv-btn-primary vv-btn-block">
        <span>Få gratis befaring</span>
      </a>
    </div>
  );
}

function SectionHead({ eyebrow, title, lead, dark }) {
  return (
    <div className="vv-shead">
      {eyebrow ? <span className={'vv-eyebrow' + (dark ? ' vv-eyebrow-dark' : '')}>{eyebrow}</span> : null}
      <h2 className={'vv-h2' + (dark ? ' vv-h2-light' : '')}>{title}</h2>
      {lead ? <p>{lead}</p> : null}
    </div>
  );
}

function ServiceCard({ title, text, file, alt, imageUrl, slug }) {
  const href = slug ? '/' + slug : '#';
  return (
    <article className="vv-card">
      {imageUrl
        ? <img className="vv-card-img" src={imageUrl} alt={alt || title} loading="lazy" />
        : <Ph file={file || 'bilde-lastes-opp.jpg'} alt={alt} ratio="16 / 10" />}
      <div className="vv-card-body">
        <h3 className="vv-h3">{title}</h3>
        <p>{text}</p>
        <a href={href} className="vv-card-link" onClick={(e) => { if (href === '#') e.preventDefault(); }}>
          Les mer <VvIcon name="arrow" size={15} stroke={2.1} />
        </a>
      </div>
    </article>
  );
}

function BefaringForm() {
  const { settings, services } = useContent();
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');

  if (status === 'sent') {
    return (
      <div className="vv-form-done">
        <span className="vv-done-ico"><VvIcon name="check" size={26} stroke={2.2} /></span>
        <strong>Takk! Vi tar kontakt.</strong>
      </div>
    );
  }

  const onSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    setErrorMsg('');
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    try {
      const res = await fetch('/api/kontakt', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.error) {
        throw new Error(json.error || 'Kunne ikke sende forespørselen.');
      }
      setStatus('sent');
    } catch (err) {
      setStatus('error');
      setErrorMsg(err.message || 'Kunne ikke sende forespørselen. Prøv igjen, eller ring oss direkte.');
    }
  };

  return (
    <form className="vv-form" onSubmit={onSubmit}>
      <div className="vv-field">
        <label htmlFor="vv-navn">Navn</label>
        <input id="vv-navn" type="text" name="navn" autoComplete="name" required />
      </div>
      <div className="vv-field">
        <label htmlFor="vv-tlf">Telefon</label>
        <input id="vv-tlf" type="tel" name="telefon" autoComplete="tel" />
      </div>
      <div className="vv-field">
        <label htmlFor="vv-epost">E-post</label>
        <input id="vv-epost" type="email" name="epost" autoComplete="email" />
      </div>
      <div className="vv-field">
        <label htmlFor="vv-adresse">Adresse</label>
        <input id="vv-adresse" type="text" name="adresse" autoComplete="street-address" />
      </div>
      <div className="vv-field vv-span2">
        <label htmlFor="vv-tjeneste">Tjeneste</label>
        <select id="vv-tjeneste" name="tjeneste" defaultValue="">
          <option value="" disabled>Velg tjeneste</option>
          {services.map((s) => <option key={s.title} value={s.title}>{s.title}</option>)}
        </select>
      </div>
      <div className="vv-field vv-span2">
        <label htmlFor="vv-melding">Melding</label>
        <textarea id="vv-melding" name="melding" rows="4"></textarea>
      </div>
      {/* Honeypot — usynlig for besøkende, men bots fyller det ofte ut. */}
      <div className="vv-field vv-hp" aria-hidden="true">
        <label htmlFor="vv-website">Nettside</label>
        <input id="vv-website" type="text" name="website" tabIndex="-1" autoComplete="off" />
      </div>
      <div className="vv-span2" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <button type="submit" className="vv-btn vv-btn-primary" style={{ border: 'none', width: '100%' }} disabled={status === 'sending'}>
          <span>{status === 'sending' ? 'Sender…' : 'Send forespørsel'}</span>
        </button>
        {status === 'error' ? <span className="vv-form-note vv-form-error">{errorMsg}</span> : null}
        <span className="vv-form-note">SENDES TIL {settings.email.toUpperCase()}</span>
      </div>
    </form>
  );
}

function MapPh() {
  return (
    <div className="vv-map" role="img" aria-label="Kart over Austevoll (plassholder for Google Maps)">
      <div className="vv-map-pin">
        <VvIcon name="pin" size={36} stroke={1.7} />
        <strong>Austevoll</strong>
      </div>
      <span className="vv-map-note">PLASSHOLDER · GOOGLE MAPS-EMBED</span>
    </div>
  );
}

function CtaBand({ title = 'Få gratis befaring', lead = 'Vi ser på jobben og gir deg pris – helt uforpliktende.' }) {
  const { settings } = useContent();
  return (
    <section className="vv-ctaband">
      <div className="vv-container vv-ctaband-in">
        <div>
          <h2 className="vv-h2 vv-h2-light">{title}</h2>
          <p>{lead}</p>
        </div>
        <div className="vv-btnrow">
          <Btn href="/kontakt">Få gratis befaring</Btn>
          <Btn kind="light" icon="phone" href={settings.telHref}>Ring nå</Btn>
        </div>
      </div>
    </section>
  );
}

function Footer({ mobile }) {
  const { settings, services } = useContent();
  return (
    <footer className="vv-footer">
      <div className="vv-container">
        <div className="vv-footer-grid">
          <div>
            <Wordmark light={true} tag={true} />
            <p className="vv-footer-desc">Profesjonell utvendig vask og liftutleie i Bergen og omegn.</p>
          </div>
          <div>
            <h4>Tjenester</h4>
            <div className="vv-footer-list">
              {services.map((s) => <a key={s.title} href={s.slug ? '/' + s.slug : '#'} onClick={(e) => { if (!s.slug) e.preventDefault(); }}>{s.title}</a>)}
            </div>
          </div>
          <div>
            <h4>Kontakt</h4>
            <div className="vv-footer-list">
              <a href={settings.telHref} className="vv-footer-line"><span className="vv-fl-ico"><VvIcon name="phone" size={15} /></span><span className="vv-mono">{settings.tel}</span></a>
              <a href={'mailto:' + settings.email} className="vv-footer-line"><span className="vv-fl-ico"><VvIcon name="mail" size={15} /></span><span>{settings.email}</span></a>
              <span className="vv-footer-line"><span className="vv-fl-ico"><VvIcon name="pin" size={15} /></span><span>Austevoll</span></span>
            </div>
          </div>
          <div>
            <h4>Område</h4>
            <div className="vv-footer-list">
              <span>Bergen og omegn</span>
              <span>Austevoll</span>
            </div>
          </div>
        </div>
        <div className="vv-footer-bottom">
          <span>© 2026 Vestvask</span>
          <span>Takvask · Fasadevask · Liftutleie</span>
        </div>
      </div>
    </footer>
  );
}

// Sidewrapper: setter rotklasser, tweak-variabler, header/footer/sticky-bar
function Page({ mobile, t, active, label, children }) {
  const cls = ['vv', mobile ? 'vv-m' : 'vv-d', t.wipeAuto ? 'vv-auto' : '', t.monoDetails ? '' : 'vv-no-mono']
    .filter(Boolean).join(' ');
  return (
    <div className={cls} data-screen-label={label} style={{ '--wipe': t.wipePos + '%' }}>
      <SiteHeader mobile={mobile} active={active} />
      {children}
      <Footer mobile={mobile} />
      {mobile ? <StickyBar /> : null}
    </div>
  );
}

Object.assign(window, {
  VvIcon, Wordmark, Btn, Ph, SiteHeader, StickyBar,
  SectionHead, ServiceCard, BefaringForm, MapPh, CtaBand, Footer, Page
});