/* global React */
const { useState: useStateS, useEffect: useEffectS } = React;

// ---------- Services grid (homepage) ----------
function ServicesGrid({ onNav }) {
  const svcs = window.SopranoData.services;
  return (
    <section className="block" id="tjanster">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Tjänster</div>
            <h2>Fem områden,<br/><em>kompromisslös kvalitet.</em></h2>
          </div>
          <p className="intro">
            Varje behandling utförs med världens mest avancerade teknologier och ett
            kompromisslöst fokus på säkerhet, kvalitet och naturliga resultat.
          </p>
        </Reveal>

        <div className="services">
          {svcs.map((s, i) => (
            <Reveal
              key={s.slug}
              className="svc"
              delay={(i % 3) + 1}
              onClick={() => onNav(`#/tjanster/${s.slug}`)}
            >
              <div className={`thumb ${s.thumb}`} style={{ marginBottom: 22 }}>
                <div className="grain" style={{ position: 'absolute', inset: 0, opacity: 0.08, mixBlendMode: 'multiply', backgroundImage: 'repeating-linear-gradient(23deg, rgba(46,46,43,0.6) 0, rgba(46,46,43,0.6) 1px, transparent 1px, transparent 3px)' }}></div>
                <div className="tag">{s.short}</div>
              </div>
              <div className="num">{s.num} / 05</div>
              <h3>{s.name}</h3>
              <p>{s.teaser}</p>
              <div className="foot">
                <span>Läs mer</span>
                <span className="arrow">→</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Prices (tabs + accordion) ----------
function Prices() {
  const cats = window.SopranoData.priceCategories;
  const [active, setActive] = useStateS(cats[0].id);
  const [openGroups, setOpenGroups] = useStateS({ [cats[0].groups[0].label]: true });

  const cat = cats.find(c => c.id === active);

  const toggleGroup = label =>
    setOpenGroups(o => ({ ...o, [label]: !o[label] }));

  useEffectS(() => {
    // auto-open first group of newly active tab
    setOpenGroups({ [cat.groups[0].label]: true });
  }, [active]);

  return (
    <section className="block bg-surface" id="priser">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Prislista</div>
            <h2>Transparenta priser,<br/><em>konsultation alltid ingår.</em></h2>
          </div>
          <p className="intro">
            Alla priser är inklusive moms. Varje behandling inleds med en individuell konsultation
            där vi analyserar hudtyp, behov och mål. Bokning av Brazilian och Bikini görs via telefon.
          </p>
        </Reveal>

        <div className="pricelist">
          <div className="price-tabs">
            {cats.map(c => (
              <button
                key={c.id}
                className={`price-tab ${active === c.id ? 'active' : ''}`}
                style={{ position: 'relative' }}
                onClick={() => setActive(c.id)}
              >
                {c.label}
              </button>
            ))}
          </div>

          <Reveal className="price-panel" key={active}>
            <h3>{cat.h}</h3>
            <p className="p-lede">{cat.lede}</p>

            {cat.groups.map(g => (
              <div key={g.label} className={`price-group ${openGroups[g.label] ? 'open' : ''}`}>
                <button className="price-group-head" onClick={() => toggleGroup(g.label)}>
                  <span>{g.label}</span>
                  <span className="plus"></span>
                </button>
                <div className="price-rows">
                  {g.rows.map((row, i) => (
                    <div className="price-row" key={i}>
                      <div>
                        <div className="n">{row[0]}</div>
                        {row[2] && <span className="s">{row[2]}</span>}
                      </div>
                      <div className="p">{row[1]}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}

            {cat.note && (
              <div className="price-note">
                <strong>Obs.</strong> {cat.note}
              </div>
            )}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- Staff ----------
function Staff() {
  const staff = window.SopranoData.staff;
  return (
    <section className="block" id="team">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Teamet</div>
            <h2>Expertis bakom<br/><em>varje behandling.</em></h2>
          </div>
          <p className="intro">
            Ett dedikerat team av legitimerade läkare och certifierade specialister. Diskret, personlig service från konsultation till uppföljning.
          </p>
        </Reveal>

        <div className="staff-grid">
          {staff.map((s, i) => (
            <Reveal className="staff-card" key={s.name} delay={(i % 3) + 1}>
              <div className="portrait" style={{ background: '#0a0a0a' }}>
                <img src={s.photo} alt={s.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
                <div className="tag">Soprano Borås · {s.name.split(' ')[0]}</div>
              </div>
              <h4>{s.name}</h4>
              <div className="role">{s.role}</div>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 10 }}>{s.bio}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useStateS(0);
  const items = window.SopranoData.faq;

  return (
    <section className="block bg-cream" id="faq">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Vanliga frågor</div>
            <h2>Svar på det<br/><em>du undrar över.</em></h2>
          </div>
          <p className="intro">
            Har du frågor som inte besvaras här? Tveka inte att kontakta oss för en personlig konsultation — alltid kostnadsfri.
          </p>
        </Reveal>

        <Reveal className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus"></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Gallery / Instagram ----------
function Gallery() {
  const [pos, setPos] = useStateS(50);
  const dragging = useRef(false);
  const ref = useRef(null);

  const move = e => {
    if (!dragging.current || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
    const p = Math.max(2, Math.min(98, (x / r.width) * 100));
    setPos(p);
  };

  useEffectS(() => {
    const up = () => { dragging.current = false; };
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move);
    return () => {
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
    };
  }, []);

  const instagrams = [
    'linear-gradient(135deg, #D2A795, #a9806d)',
    'linear-gradient(135deg, #626557, #4a4d42)',
    'linear-gradient(135deg, #C9B3A2, #8c7566)',
    'linear-gradient(135deg, #E2DBD5, #C9B3A2)',
    'linear-gradient(135deg, #D2A795, #C9B3A2)',
    'linear-gradient(135deg, #4a4d42, #626557)',
  ];

  return (
    <section className="block" id="galleri">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Resultat</div>
            <h2>Subtila förändringar,<br/><em>naturliga resultat.</em></h2>
          </div>
          <p className="intro">
            Ett urval av diskreta, verkliga behandlingar. Dra reglaget för att se före och efter.
          </p>
        </Reveal>

        <div className="ba-labels-mobile">
          <span>Före · Konsultation</span>
          <span>Efter · 3 sessioner</span>
        </div>
        <Reveal
          ref={ref}
          className="ba"
          onMouseDown={() => { dragging.current = true; }}
          onTouchStart={() => { dragging.current = true; }}
        >
          <div className="half before">
            <div style={{ position: 'absolute', inset: 0, opacity: 0.1, mixBlendMode: 'multiply', backgroundImage: 'repeating-linear-gradient(23deg, rgba(46,46,43,0.6) 0, rgba(46,46,43,0.6) 1px, transparent 1px, transparent 3px)' }} />
          </div>
          <div className="half after" style={{ clipPath: `inset(0 0 0 ${pos}%)` }}>
            <div style={{ position: 'absolute', inset: 0, opacity: 0.08, mixBlendMode: 'multiply', backgroundImage: 'repeating-linear-gradient(23deg, rgba(46,46,43,0.6) 0, rgba(46,46,43,0.6) 1px, transparent 1px, transparent 3px)' }} />
          </div>
          <span className="label l">Före · Konsultation</span>
          <span className="label r">Efter · 3 sessioner</span>
          <div className="handle" style={{ left: `${pos}%` }}></div>
        </Reveal>

        <Reveal delay={2} style={{ marginTop: 70 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}><span className="dot"></span>@soprano.boras</div>
          <div className="insta-grid">
            {instagrams.map((g, i) => (
              <div key={i} className="insta" style={{ background: g }}></div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Contact & Footer ----------
function Contact() {
  return (
    <section className="block bg-olive" id="kontakt">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Kontakt</div>
            <h2>Välkommen<br/><em>till Soprano Borås.</em></h2>
          </div>
          <p className="intro">
            Ring, mejla eller boka tid online. Konsultationen är alltid kostnadsfri och tar cirka 30 minuter.
          </p>
        </Reveal>

        <div className="contact-grid">
          <Reveal className="contact-form-card">
            <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot"></span>Skriv till oss</div>
            <h3 className="font-display" style={{ fontSize: 36, fontWeight: 300, margin: '0 0 8px', color: 'var(--cream)', letterSpacing: '-0.01em' }}>
              Berätta om dina <em style={{ color: 'var(--terracotta)', fontStyle: 'italic' }}>önskemål.</em>
            </h3>
            <p style={{ margin: '0 0 28px', color: 'rgba(226,219,213,0.75)', fontSize: 15, maxWidth: '48ch' }}>
              Vi svarar inom 24 timmar. Konsultationen är alltid kostnadsfri.
            </p>
            <form
              className="contact-form"
              action="https://formsubmit.co/dtryfonis@gmail.com"
              method="POST"
            >
              <input type="hidden" name="_subject" value="Nytt meddelande från sopranoboras.se" />
              <input type="hidden" name="_template" value="table" />
              <input type="hidden" name="_captcha" value="false" />
              <input type="hidden" name="_next" value="https://sopranoboras.se/#kontakt" />
              <input type="text" name="_honey" style={{ display: 'none' }} tabIndex="-1" autoComplete="off" />
              <div className="field"><label>Namn</label><input type="text" name="namn" required placeholder="Skriv ditt för- och efternamn" /></div>
              <div className="field"><label>Telefon</label><input type="tel" name="telefon" placeholder="Ex. 070 123 45 67" /></div>
              <div className="field full"><label>E-post</label><input type="email" name="email" required placeholder="Ex. namn@exempel.se" /></div>
              <div className="field full"><label>Meddelande</label><textarea name="meddelande" required placeholder="Berätta gärna vilken behandling du är intresserad av, önskad tid och eventuella frågor..."></textarea></div>
              <div className="full"><button type="submit" className="cta-solid" style={{ background: 'var(--terracotta)', color: '#3b2318', fontSize: 12, padding: '18px 32px' }}>Skicka meddelande <span className="arrow">→</span></button></div>
            </form>
          </Reveal>

          <Reveal delay={2}>
            <dl className="contact-info">
              <dt>Besöksadress</dt>
              <dd><a href="https://maps.google.com/?q=Västerlånggatan+33,+Borås" target="_blank" rel="noopener noreferrer">Västerlånggatan 33 · Borås</a></dd>
              <dt>Telefon</dt>
              <dd><a href="tel:+4633106989">033-10 69 89</a></dd>
              <dt>E-post</dt>
              <dd><a href="mailto:dtryfonis@gmail.com">dtryfonis@gmail.com</a></dd>
              <dt>Öppettider</dt>
              <dd style={{ fontSize: 16, lineHeight: 1.8 }}>
                Mån–Fre · 09–18<br/>
                Lör · 10–16<br/>
                Sön · Stängt
              </dd>
            </dl>

            <div className="map" style={{ marginTop: 32 }}>
              <svg viewBox="0 0 500 400">
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(98,101,87,0.12)" strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="500" height="400" fill="#E2DBD5"/>
              <rect width="500" height="400" fill="url(#grid)"/>
              {/* street lines */}
              <path d="M 0 180 L 500 140" stroke="rgba(98,101,87,0.25)" strokeWidth="28" fill="none"/>
              <path d="M 220 0 L 260 400" stroke="rgba(98,101,87,0.25)" strokeWidth="22" fill="none"/>
              <path d="M 0 280 L 500 320" stroke="rgba(98,101,87,0.18)" strokeWidth="12" fill="none"/>
              <path d="M 80 0 L 120 400" stroke="rgba(98,101,87,0.18)" strokeWidth="8" fill="none"/>
              <path d="M 380 0 L 420 400" stroke="rgba(98,101,87,0.18)" strokeWidth="8" fill="none"/>
              {/* river */}
              <path d="M 0 360 C 150 340, 350 380, 500 350" stroke="#C9B3A2" strokeWidth="18" fill="none" opacity="0.6"/>
              {/* pin */}
              <circle cx="245" cy="155" r="26" fill="#D2A795" opacity="0.28"/>
              <circle cx="245" cy="155" r="10" fill="#626557"/>
              <circle cx="245" cy="155" r="3" fill="#E2DBD5"/>
              <text x="260" y="140" fontFamily="ui-monospace, Menlo, monospace" fontSize="9" fill="#626557" letterSpacing="2">SOPRANO BORÅS</text>
              <text x="260" y="152" fontFamily="ui-monospace, Menlo, monospace" fontSize="8" fill="#969797" letterSpacing="1">Västerlånggatan 33</text>
            </svg>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer({ onNav }) {
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div>
          <div className="footer-wordmark" style={{ margin: '0 0 18px' }}><img src="assets/logo.svg" alt="Soprano Borås" style={{ height: 56, width: 'auto', display: 'block', filter: 'brightness(0) invert(1)', opacity: 0.92 }} /></div>
          <p style={{ margin: 0, color: 'rgba(226,219,213,0.7)', fontSize: 14, maxWidth: '32ch', lineHeight: 1.75 }}>
            Premiumklinik för estetiska behandlingar. Precision, kvalitet och naturliga resultat — i Borås.
          </p>
          <div className="bokadirekt-badge">
            <span className="star">★</span> Bokadirekt · 5.0 / 5.0
          </div>
        </div>
        <div>
          <h5>Sidor</h5>
          <ul>
            <li><a href="#/" onClick={e => { e.preventDefault(); onNav('#/'); }}>Hem</a></li>
            <li><a href="#/#om" onClick={e => { e.preventDefault(); onNav('#/#om'); }}>Om oss</a></li>
            <li><a href="#/#priser" onClick={e => { e.preventDefault(); onNav('#/#priser'); }}>Prislista</a></li>
            <li><a href="#/#kontakt" onClick={e => { e.preventDefault(); onNav('#/#kontakt'); }}>Kontakt</a></li>
          </ul>
        </div>
        <div>
          <h5>Tjänster</h5>
          <ul>
            {window.SopranoData.services.map(s => (
              <li key={s.slug}><a href={`#/tjanster/${s.slug}`} onClick={e => { e.preventDefault(); onNav(`#/tjanster/${s.slug}`); }}>{s.name}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <h5>Följ</h5>
          <ul>
            <li><a href="https://www.instagram.com/soprano_boras/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
            <li><a href="https://www.bokadirekt.se/places/soprano-boras-32484" target="_blank" rel="noopener noreferrer">Bokadirekt</a></li>
            <li><a href="https://share.google/iwZBK579ZBrTqVVas" target="_blank" rel="noopener noreferrer">Google</a></li>
          </ul>
        </div>
      </div>
      <div className="container footer-bottom">
        <div>© 2026 Soprano Borås AB · Org. 559089-7467</div>
        <div>Designed in Borås · Made by <a href="https://m4ntech.se" target="_blank" rel="noopener noreferrer">m4ntech</a></div>
      </div>
    </footer>
  );
}

Object.assign(window, { ServicesGrid, Prices, Staff, FAQ, Gallery, Contact, Footer });