// Read tweak defaults
const __defaultsEl = document.getElementById('tweak-defaults');
const __raw = __defaultsEl.textContent.replace(/\/\*EDITMODE-(BEGIN|END)\*\//g, '').trim();
const TWEAK_DEFAULTS = JSON.parse(__raw);

const { useState, useEffect, useRef } = React;

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function UtilityBar({ t, accent }) {
  return (
    <div className="util">
      <div className="container">
        <div className="row">
          <div className="left">
            <span style={{display:'inline-flex',alignItems:'center',gap:8}}>
              <span className="dot"></span>
              <span>{t.util.hours.split('·')[0].trim()} · <b>åpent</b></span>
            </span>
            <span style={{opacity:0.6}}>·</span>
            <span>{t.util.area}</span>
          </div>
          <div className="right">
            <span>{t.util.cert}</span>
            <span style={{opacity:0.6}}>·</span>
            <a href={`tel:+47${t.util.phone.replace(/\s/g,'')}`}>☎ {t.util.phone}</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function Header({ t }) {
  return (
    <header className="site">
      <div className="container">
        <div className="row">
          <a href="#" className="brand" aria-label="Ringerike Kjøle og Fryseservice">
            <div className="mark">R</div>
            <div className="name">
              RING KJØL & FRYS
              <small>RINGERIKE KJØLE OG FRYSESERVICE AS</small>
            </div>
          </a>
          <nav className="primary">
            {t.nav.map(([label, href]) => (
              <a key={href} href={href}>{label}</a>
            ))}
          </nav>
          <a className="cta" href="#kontakt">
            {t.hero.ctaPrimary} <span aria-hidden>→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function HeroWordmark() {
  return (
    <div className="wordmark">
      <div className="row1">
        <span>RING</span>
        <span className="stamp">EST · 1985</span>
        <span>KJØL</span>
      </div>
      <div className="row2">
        <span className="ampr">&amp;</span>
        <span className="outline">FRYS</span>
      </div>
      <div className="row3">
        <span>SERVICE</span>
      </div>
    </div>
  );
}

function HeroHeadline({ headline }) {
  const words = headline.split(' ');
  const last = words.pop();
  return (
    <h1 className="headline">
      {words.join(' ')} <span className="accent">{last}</span>
    </h1>
  );
}

function Hero({ t, variant, headline }) {
  return (
    <section className="hero gridded">
      <div className="container stack">
        <div className="meta-row">
          {t.hero.tags.map((tag, i) => (
            <span key={i} className="chip">{tag}</span>
          ))}
        </div>

        {variant === 'wordmark' ? <HeroWordmark /> : <HeroHeadline headline={headline} />}

        <div className="hero-bottom">
          <div>
            <p className="hero-lede">{t.hero.lede}</p>
            <div className="hero-actions">
              <a className="cta" href="#kontakt">{t.hero.ctaPrimary} <span aria-hidden>→</span></a>
              <a className="cta ghost" href={`tel:+47${t.util.phone.replace(/\s/g,'')}`}>{t.hero.ctaGhost}</a>
            </div>
          </div>
          <div className="stamp-card ticks">
            <span className="tl"></span><span className="tr"></span><span className="bl"></span><span className="br"></span>
            <div className="badge">
              <div>
                <div className="yr">{t.hero.stamp.yr}</div>
                <div className="lbl">{t.hero.stamp.lbl}</div>
              </div>
            </div>
            <div>
              <h3>{t.hero.stamp.title}</h3>
              <p>{t.hero.stamp.body}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee({ words }) {
  const items = [...words, ...words];
  return (
    <div className="marquee" aria-hidden>
      <div className="track">
        {items.map((w, i) => (
          <span key={i}>
            <span>{w}</span>
            <span className="sep">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function SectionHead({ num, title, meta, id }) {
  return (
    <header className="sec-head reveal" id={id}>
      <div className="ttl">{title}</div>
      <div className="meta">{meta}</div>
    </header>
  );
}

function Services({ t }) {
  return (
    <section id="tjenester">
      <div className="container">
        <SectionHead num={t.services.num} title={t.services.title} meta={t.services.meta} />
        <div className="services reveal">
          {t.services.items.map((it) => (
            <div className="card" key={it.n}>
              <div className="card-num">
                <span>{it.t.toUpperCase()}</span>
                <span className="arrow">→</span>
              </div>
              <h3>{it.t}</h3>
              <div className="card-body">
                <span className="card-soft">{it.d}</span>
                <ul>
                  {it.li.map((l, i) => <li key={i}><span>{l}</span></li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats({ items }) {
  return (
    <section style={{padding:0}}>
      <div className="stats reveal">
        {items.map((s, i) => (
          <div className="stat" key={i}>
            <span className="num">{s.n}<span className="plus">{s.suffix}</span></span>
            <span className="lbl">{s.lbl}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function About({ t }) {
  return (
    <section id="om">
      <div className="container">
        <SectionHead num={t.about.num} title={t.about.title} meta={t.about.meta} />
        <div className="about-grid">
          <div className="about-img reveal">
            <img src="img/om-oss.jpg" alt="Ringerike Kjøle & Fryseservice" />
            <span className="tag">På jobb · Ringerike</span>
          </div>
          <div className="about-text reveal">
            <h2>{t.about.h}</h2>
            <p className="lead">{t.about.p1}</p>
            <p>{t.about.p2}</p>
            <dl className="by">
              {t.about.by.map((b, i) => (
                <div key={i}>
                  <dt>{b.dt}</dt>
                  <dd>{b.dd}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
}

function Brands({ t }) {
  return (
    <section className="brands" style={{padding:0}}>
      <div style={{padding:'clamp(48px,6vw,80px) 0'}}>
        <div className="container">
          <h3>{t.brands.h}</h3>
          <p>{t.brands.p}</p>
          <div className="brand-row">
            {t.brands.list.map((b, i) => (
              <div className="b" key={i}>
                {b.b}
                <small>{b.s}</small>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section id="prosess">
      <div className="container">
        <SectionHead num={t.process.num} title={t.process.title} meta={t.process.meta} />
        <div className="process reveal">
          {t.process.steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Showcase({ t }) {
  return (
    <section>
      <div className="container">
        <SectionHead num={t.showcase.num} title={t.showcase.title} meta={t.showcase.meta} />
        <div className="showcase reveal">
          <div className="frame a">
            <img src="img/stue.jpg" alt="Stue med veggmontert Daikin varmepumpe" />
            <span className="cap">Varmepumpe · Bolig</span>
          </div>
          <div className="frame b">
            <img src="img/montor.jpg" alt="Tekniker utfører service på varmepumpe" />
            <span className="cap">Service på anlegg</span>
          </div>
          <div className="c">
            <div className="quote">{t.showcase.quote}</div>
            <cite>— {t.showcase.cite}</cite>
          </div>
          <div className="frame d">
            <img src="img/skilt.jpg" alt="Hov Industripark, Hønefoss — Ring Kjøl og Frys-skilt om kvelden" />
            <span className="cap">Hov Industripark · Hønefoss</span>
          </div>
          <div className="frame" style={{gridColumn:'span 12', aspectRatio:'21/9'}}>
            <img src="img/varebil.jpg" alt="Tekniker på taket av servicebil med kobberrør" />
            <span className="cap">På oppdrag · Ringerike</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  const [submitted, setSubmitted] = useState(false);
  return (
    <section id="kontakt">
      <div className="container">
        <SectionHead num={t.contact.num} title={t.contact.title} meta={t.contact.meta} />
        <div className="contact-grid reveal">
          <div className="contact-info">
            <span className="free">{t.contact.free}</span>
            <h2 style={{marginTop:16, fontSize:"40px"}}>{t.contact.h}</h2>
            <p>{t.contact.p}</p>
            <dl className="contact-list">
              {t.contact.list.map((it, i) => (
                <div className="item" key={i}>
                  <dt>{it.dt}</dt>
                  <dd>{it.dd}</dd>
                </div>
              ))}
            </dl>
          </div>
          <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
            {submitted ? (
              <div style={{padding:'40px 0', textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-display)', fontSize:32, marginBottom:12}}>TAKK!</div>
                <p style={{color:'var(--fg-soft)'}}>{t.contact.form.privacy}</p>
              </div>
            ) : (
              <>
                <div className="row2">
                  <div className="field">
                    <label>{t.contact.form.name}</label>
                    <input type="text" required />
                  </div>
                  <div className="field">
                    <label>{t.contact.form.phone}</label>
                    <input type="tel" required />
                  </div>
                </div>
                <div className="field">
                  <label>{t.contact.form.email}</label>
                  <input type="email" required />
                </div>
                <div className="field">
                  <label>{t.contact.form.subject}</label>
                  <select required defaultValue="">
                    <option value="" disabled>—</option>
                    {t.contact.form.sopts.map((o, i) => <option key={i}>{o}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{t.contact.form.msg}</label>
                  <textarea rows={4}></textarea>
                </div>
                <button type="submit">{t.contact.form.send} →</button>
                <p style={{
                  fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.14em',
                  textTransform:'uppercase', color:'var(--fg-soft)',
                  marginTop:12, textAlign:'center'
                }}>
                  {t.contact.form.privacy}
                </p>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="site">
      <div className="container">
        <div className="top">
          <div>
            <h4 className="big">{t.footer.big}</h4>
            <p style={{
              fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.14em',
              textTransform:'uppercase',
              color:'color-mix(in oklab, var(--panel-fg) 60%, transparent)'
            }}>{t.footer.tagline}</p>
          </div>
          {t.footer.cols.map((c, i) => (
            <div key={i}>
              <h5>{c.h}</h5>
              <ul>
                {c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-wordmark-wrap">
          <svg
            className="footer-wordmark"
            viewBox="0 0 1000 90"
            preserveAspectRatio="xMidYMid meet"
            width="100%"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden
          >
            <text x="500" y="78" textAnchor="middle">RING · KJØL · OG · FRYS · 1985 — 2026 ·</text>
          </svg>
        </div>
        <div className="bottom">
          {t.footer.legal.map((l, i) => <span key={i}>{l}</span>)}
        </div>
      </div>
    </footer>
  );
}

/* ========================= TWEAKS ========================= */
function Tweaks({ tweaks, setTweak }) {
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Tema">
        <window.TweakRadio
          label="Theme"
          value={tweaks.theme}
          onChange={(v) => setTweak('theme', v)}
          options={[
            { value: 'navy', label: 'Bone' },
            { value: 'bone', label: 'Paper' },
            { value: 'dark', label: 'Dark' },
          ]}
        />
        <window.TweakColor
          label="Aksentfarge"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Hero">
        <window.TweakRadio
          label="Variant"
          value={tweaks.heroVariant}
          onChange={(v) => setTweak('heroVariant', v)}
          options={[
            { value: 'wordmark', label: 'Wordmark' },
            { value: 'headline', label: 'Headline' },
          ]}
        />
        {tweaks.heroVariant === 'headline' && (
          <window.TweakText
            label="Overskrift"
            value={tweaks.headline}
            onChange={(v) => setTweak('headline', v)}
          />
        )}
      </window.TweakSection>

      <window.TweakSection title="Layout">
        <window.TweakToggle
          label="Blueprint-rutenett"
          value={tweaks.showGrid}
          onChange={(v) => setTweak('showGrid', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* ========================= APP ========================= */
function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.body.dataset.grid = String(tweaks.showGrid);
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.lang = 'no';
  }, [tweaks.theme, tweaks.accent, tweaks.showGrid]);

  useReveal();

  const t = window.COPY['no'];

  return (
    <>
      <UtilityBar t={t} accent={tweaks.accent} />
      <Header t={t} />
      <Hero t={t} variant={tweaks.heroVariant} headline={tweaks.headline} />
      <Marquee words={t.marquee} />
      <Services t={t} />
      <Stats items={t.stats} />
      <About t={t} />
      <Brands t={t} />
      <Process t={t} />
      <Showcase t={t} />
      <Contact t={t} />
      <Footer t={t} />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);