/* global React */
const { useState, useEffect, useRef } = React;

// ---------- Reveal-on-scroll ----------
const Reveal = React.forwardRef(function Reveal(
  { children, delay = 0, as = 'div', className = '', ...rest },
  forwardedRef,
) {
  const innerRef = useRef(null);
  const setRefs = (node) => {
    innerRef.current = node;
    if (typeof forwardedRef === 'function') forwardedRef(node);
    else if (forwardedRef) forwardedRef.current = node;
  };
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = innerRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 },
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag
      ref={setRefs}
      className={`reveal ${shown ? 'in' : ''} ${delay ? `delay-${delay}` : ''} ${className}`}
      {...rest}
    >
      {children}
    </Tag>
  );
});

// ---------- Logo ----------
function Logo({ color = 'currentColor' }) {
  // Uses the uploaded brand logo
  return (
    <img
      src="assets/logo.svg"
      alt="Soprano Borås"
      style={{ height: 34, width: 'auto', display: 'block' }}
    />
  );
}

// ---------- Header ----------
function Header({ route, onNav, onOpenBooking }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = window.SopranoData.nav;

  const handleClick = (e, href) => {
    e.preventDefault();
    setMobileOpen(false);
    onNav(href);
  };

  return (
    <>
      <header className={`site-header ${scrolled ? 'scrolled' : ''}`}>
        <div className="container row">
          <a href="#/" className="logo" onClick={(e) => handleClick(e, '#/')}>
            <Logo />
          </a>
          <nav className="nav">
            {links.map((l) => (
              <a
                key={l.href}
                href={l.href}
                className={route === l.href ? 'active' : ''}
                onClick={(e) => handleClick(e, l.href)}
              >
                {l.label}
              </a>
            ))}
          </nav>
          <a
            href="https://www.bokadirekt.se/places/soprano-boras-32484"
            target="_blank"
            rel="noopener noreferrer"
            className="cta-solid cta-solid--compact"
          >
            Boka tid
          </a>
          <button className="mobile-toggle" onClick={() => setMobileOpen(true)}>
            Meny ☰
          </button>
        </div>
      </header>

      <div className={`mobile-nav ${mobileOpen ? 'open' : ''}`}>
        <button className="close" onClick={() => setMobileOpen(false)}>
          Stäng ✕
        </button>
        {links.map((l) => (
          <a key={l.href} href={l.href} onClick={(e) => handleClick(e, l.href)}>
            {l.label}
          </a>
        ))}
        <a
          href="https://www.bokadirekt.se/places/soprano-boras-32484"
          target="_blank"
          rel="noopener noreferrer"
          className="cta-solid"
          style={{ marginTop: 20, alignSelf: 'flex-start' }}
          onClick={() => setMobileOpen(false)}
        >
          Boka tid <span className="arrow">→</span>
        </a>
      </div>
    </>
  );
}

// ---------- Hero ----------
function Hero({ onOpenBooking }) {
  const visualRef = useRef(null);
  useEffect(() => {
    if (window.matchMedia('(max-width: 720px)').matches) return;
    const onScroll = () => {
      if (!visualRef.current) return;
      const y = window.scrollY;
      const img = visualRef.current.querySelector('.img');
      if (img) img.style.transform = `translateY(${y * 0.12}px)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <Reveal className="eyebrow">
            <span className="dot"></span>Soprano Borås · Est. 2019
          </Reveal>
          <Reveal as="h1" delay={1}>
            Premium estetik <em>i Borås</em>
          </Reveal>
          <Reveal as="p" className="lede" delay={2}>
            Behandlingar utförda med världens mest avancerade och exklusiva
            teknologier, där medicinsk expertis möter estetisk perfektion. För
            dig som förväntar dig det absolut bästa.
          </Reveal>
          <Reveal
            delay={3}
            style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}
          >
            <a
              href="https://www.bokadirekt.se/places/soprano-boras-32484"
              target="_blank"
              rel="noopener noreferrer"
              className="cta-solid"
            >
              Boka konsultation <span className="arrow">→</span>
            </a>
            <a
              href="https://www.bokadirekt.se/places/soprano-boras-32484"
              target="_blank"
              rel="noopener noreferrer"
              className="cta-thin"
            >
              Se prislista
            </a>
          </Reveal>
          <Reveal className="hero-meta" delay={4}>
            <div className="item">
              <span className="k">Teknologi</span>
              <span className="v">Soprano Titanium</span>
            </div>
            <div className="item">
              <span className="k">Injektioner</span>
              <span className="v">Leg. läkare</span>
            </div>
            <div className="item">
              <span className="k">Omdöme</span>
              <span className="v">★ 5.0 / 5.0</span>
            </div>
          </Reveal>
        </div>

        <Reveal className="hero-visual" delay={2}>
          <div ref={visualRef} style={{ position: 'absolute', inset: 0 }}>
            <video
              className="img"
              src="assets/hero.mp4"
              poster="assets/hero-poster.jpg"
              autoPlay
              muted
              loop
              playsInline
              preload="metadata"
            />
            <div className="grain"></div>
          </div>
          <div className="frame-meta">
            <span>FRAME · 01 / 05</span>
            <span>BORÅS SE</span>
          </div>
          <div className="tag">Clinic interior — warm light, soft focus</div>
          <div className="hero-badge">
            <svg viewBox="0 0 130 130">
              <defs>
                <path
                  id="circlePath"
                  d="M 65,65 m -52,0 a 52,52 0 1,1 104,0 a 52,52 0 1,1 -104,0"
                />
              </defs>
              <text
                fill="#626557"
                style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 8.5,
                  letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                }}
              >
                <textPath href="#circlePath">
                  PREMIUM · ESTETIK · BORÅS · FDA & CE GODKÄND ·{' '}
                </textPath>
              </text>
              <circle cx="65" cy="65" r="3" fill="#D2A795" />
            </svg>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- About ----------
function About() {
  return (
    <section className="block bg-cream" id="om">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>Om oss
            </div>
            <h2>
              En premiumklinik
              <br />
              <em>för modern estetik.</em>
            </h2>
          </div>
          <p className="intro">
            Soprano Borås är en premiumklinik för estetiska behandlingar i
            Borås, känd för sin precision, kvalitet och naturliga resultat. Vi
            kombinerar världens mest avancerade teknologier med gedigen
            erfarenhet inom medicinsk estetik.
          </p>
        </Reveal>

        <div className="about-grid">
          <Reveal className="about-copy">
            <p>
              Vi är specialister på laserhårborttagning i Borås och arbetar med{' '}
              <strong>Soprano Titanium</strong> — en globalt erkänd och{' '}
              <strong>FDA- och CE-godkänd</strong> laserteknologi, ansedd som en av
              världens mest avancerade lösningar för permanent hårborttagning.
            </p>
            <p>
              Vi är även specialiserade inom Scalp Micropigmentation (SMP) — en
              avancerad och detaljerad behandling för dig som upplever håravfall
              eller önskar ökad densitet.
            </p>
            <p>
              Inom injektionsbehandlingar erbjuder vi Botox och fillers med hög
              medicinsk precision och estetisk balans. Säkerhet, korrekt teknik
              och noggrann analys är grunden i varje behandling.
            </p>
          </Reveal>

          <Reveal delay={2}>
            <p
              style={{
                color: 'var(--ink-soft)',
                fontSize: 16,
                lineHeight: 1.85,
                margin: 0,
              }}
            >
              Varje behandling inleds med en individuell konsultation där vi
              analyserar hudtyp, behov och mål. Vårt fokus är alltid naturliga,
              sofistikerade resultat — aldrig överdrivna förändringar.
            </p>
            <div className="about-marks">
              <div className="m">
                <div className="k">Godkänd teknologi</div>
                <div className="v">FDA & CE</div>
              </div>
              <div className="m">
                <div className="k">Google & Bokadirekt</div>
                <div className="v">★ 5.0</div>
              </div>
              <div className="m">
                <div className="k">Injektioner av</div>
                <div className="v">Leg. läkare</div>
              </div>
              <div className="m">
                <div className="k">Riktlinjer</div>
                <div className="v">Socialstyrelsen</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Export
Object.assign(window, { Reveal, Logo, Header, Hero, About });