/* Tefi Nail Art — main page sections + app shell (i18n + categorised services) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "lilac",
  "displayFont": "Fraunces",
  "bodyFont": "DM Sans",
  "heroLayout": "asymmetric",
  "galleryLayout": "classic",
  "photoFilter": "warm",
  "logoSize": 38,
  "animation": "soft",
  "servicesBg": "bone",
  "showLogoInHero": true,
  "tagline": "The quiet art of nails.",
  "lang": "nl"
}/*EDITMODE-END*/;

/* Detect the visitor's preferred language for first render.
   Order: explicit choice in localStorage → browser Accept-Language → fallback NL. */
function detectInitialLang() {
  try {
    const stored = localStorage.getItem('tefi.lang');
    if (stored === 'nl' || stored === 'en' || stored === 'es') return stored;
    const langs = (navigator.languages && navigator.languages.length
      ? navigator.languages
      : [navigator.language || '']).map(s => (s || '').toLowerCase());
    for (const l of langs) {
      if (l.startsWith('nl')) return 'nl';
      if (l.startsWith('es')) return 'es';
      if (l.startsWith('en')) return 'en';
    }
  } catch (e) { /* private mode etc. — fall through */ }
  return 'nl';
}

const FONT_OPTIONS = {
  display: ['Fraunces', 'Cormorant Garamond', 'Playfair Display', 'Tenor Sans', 'Italiana', 'Caveat'],
  body:    ['DM Sans', 'Inter', 'Nunito', 'Work Sans', 'Manrope'],
};

const PHOTO_FILTERS = {
  warm:    'sepia(0.12) saturate(0.9) brightness(0.97)',
  natural: 'none',
  bw:      'grayscale(1) contrast(1.05)',
  cool:    'saturate(0.85) hue-rotate(-12deg) brightness(0.97)',
  film:    'sepia(0.22) saturate(0.85) contrast(1.05) brightness(0.95)',
};

function TefiApp() {
  // Override the static lang default with the visitor's actual preference.
  // Memoised so detection only runs once per mount, not every re-render.
  const initialDefaults = React.useMemo(() => ({
    ...TWEAK_DEFAULTS,
    lang: detectInitialLang(),
  }), []);
  const [tweaks, setTweak] = useTweaks(initialDefaults);
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingService, setBookingService] = React.useState(null);

  useReveal();
  const heroShapeRef = React.useRef(null);
  const heroShape2Ref = React.useRef(null);
  useParallax(heroShapeRef, 0.18);
  useParallax(heroShape2Ref, -0.1);

  const lang = tweaks.lang || 'en';
  const t = React.useMemo(() => window.makeT(lang), [lang]);
  const dict = window.TEFI_I18N[lang] || window.TEFI_I18N.en;

  const dirClass = `dir-${tweaks.direction}`;

  React.useEffect(() => {
    document.documentElement.style.setProperty('--photo-filter', PHOTO_FILTERS[tweaks.photoFilter] || PHOTO_FILTERS.warm);
    document.documentElement.style.setProperty('--font-display', `'${tweaks.displayFont}', Georgia, serif`);
    document.documentElement.style.setProperty('--font-body', `'${tweaks.bodyFont}', sans-serif`);
    document.documentElement.style.setProperty('--logo-size', `${tweaks.logoSize}px`);
    document.documentElement.lang = lang;
    // Persist the visitor's language choice so they keep it on next visit
    // and so the legal pages (separate HTML files) can pick it up.
    try { localStorage.setItem('tefi.lang', lang); } catch (e) { /* ignore */ }
  }, [tweaks.photoFilter, tweaks.displayFont, tweaks.bodyFont, tweaks.logoSize, lang]);

  const openBooking = (svc = null) => { setBookingService(svc); setBookingOpen(true); };

  const services = window.TEFI_SERVICES;
  const gallery = window.TEFI_GALLERY;
  const reviews = window.TEFI_REVIEWS[lang] || window.TEFI_REVIEWS.en;
  const galleryLabels = window.TEFI_GALLERY_LABELS[lang] || window.TEFI_GALLERY_LABELS.en;

  return (
    <div className={`${dirClass} layout-${tweaks.heroLayout} anim-${tweaks.animation} min-h-screen overflow-x-hidden`} style={{ background: 'var(--cream)', color: 'var(--ink)' }}>
      <Nav onBook={() => openBooking()} t={t} lang={lang} setLang={(v) => setTweak('lang', v)} />
      <main id="main" tabIndex="-1">
        <Hero
          tweaks={tweaks}
          heroShapeRef={heroShapeRef}
          heroShape2Ref={heroShape2Ref}
          onBook={() => openBooking()}
          t={t}
        />
        <About t={t} dict={dict} />
        <Services services={services} onBook={openBooking} bg={tweaks.servicesBg} t={t} dict={dict} />
        <Gallery gallery={gallery} layout={tweaks.galleryLayout} t={t} galleryLabels={galleryLabels} />
        <Reviews reviews={reviews} t={t} dict={dict} />
        <BookingCta onBook={() => openBooking()} t={t} dict={dict} />
        <Visit t={t} dict={dict} />
      </main>
      <Footer t={t} lang={lang} />

      <BookingModal
        open={bookingOpen}
        onClose={() => setBookingOpen(false)}
        initialService={bookingService}
        lang={lang}
      />

      <TefiTweaks tweaks={tweaks} setTweak={setTweak} />
      <HeroTintTuner />
    </div>
  );
}

function Nav({ onBook, t, lang, setLang }) {
  return (
    <nav
      className="nav-grid fixed top-0 left-0 right-0 z-50 px-6 md:px-12 py-4"
      style={{ background: 'color-mix(in srgb, var(--cream) 78%, transparent)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)' }}
    >
      <div className="nav-left">
        <a href="#about" className="hover-line">{t('nav.about')}</a>
        <a href="#services" className="hover-line">{t('nav.services')}</a>
        <a href="#gallery" className="hover-line">{t('nav.gallery')}</a>
        <a href="#visit" className="hover-line">{t('nav.visit')}</a>
      </div>
      <a href="#" className="nav-center" aria-label="Tefi Nail Art — home">
        <img src="assets/tefi-logo.png" alt="Tefi Nail Art" className="logo-img" style={{ height: 'var(--logo-size, 38px)' }} />
      </a>
      <div className="nav-right">
        <LangSwitcher lang={lang} setLang={setLang} />
        <a
          href="tel:+31612560738"
          className="nav-icon-btn"
          aria-label={t('nav.callAria')}
          title={t('nav.callAria')}
        >
          <Icon.Phone size={16} />
        </a>
        <a
          href="https://wa.me/31612560738"
          target="_blank"
          rel="noopener noreferrer"
          className="nav-icon-btn nav-icon-btn-wa"
          aria-label={t('nav.whatsappAria')}
          title={t('nav.whatsappAria')}
        >
          <Icon.WhatsApp size={16} />
        </a>
        <button
          onClick={onBook}
          className="px-5 py-2.5 text-sm rounded-full transition-all duration-500 hover:scale-105 inline-flex items-center gap-2"
          style={{ background: 'var(--ink)', color: 'var(--cream)' }}
        >
          {t('nav.book')} <Icon.ArrowUpRight size={14} />
        </button>
      </div>
    </nav>
  );
}

function LangSwitcher({ lang, setLang }) {
  return (
    <div className="lang-switcher" role="group" aria-label="Language">
      {['en','nl','es'].map(code => (
        <button
          key={code}
          onClick={() => setLang(code)}
          className={`lang-btn ${lang === code ? 'active' : ''}`}
          aria-pressed={lang === code}
        >
          {code.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

function HeroVideoBg() {
  return (
    <div className="hero-video-wrap" aria-hidden>
      <video
        className="hero-video"
        src="assets/hero-bg.mp4"
        muted
        playsInline
        autoPlay
        loop
        preload="auto"
      />
      <div className="hero-video-tint" />
    </div>
  );
}

function Hero({ tweaks, heroShapeRef, heroShape2Ref, onBook, t }) {
  return (
    <section className="relative pt-32 md:pt-40 pb-20 px-6 md:px-12 overflow-hidden" style={{ minHeight: '100vh' }}>
      <HeroVideoBg />

      <div className="relative max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-8 items-end pt-8">
          <div className="lg:col-span-8">
            <div className="reveal label-tiny mb-8 flex items-center gap-3" data-delay="0" style={{ color: 'var(--label-color)' }}>
              <span className="inline-block" style={{ width: '32px', height: '1px', background: 'var(--label-color)' }}></span>
              {t('hero.eyebrow')}
            </div>
            <h1 className="font-display hero-h1">
              <span className="reveal block hero-block" data-delay="100">{t('hero.title1')}</span>
              <span
                className="reveal block hero-italic"
                data-delay="300"
                style={{ color: 'var(--accent-deep)', fontStyle: 'italic', fontWeight: 300 }}
              >
                {t('hero.title2')}
              </span>
              <span className="reveal block hero-block" data-delay="500">{t('hero.title3')}</span>
            </h1>
          </div>
          <div className="lg:col-span-4 reveal" data-delay="800">
            <p className="text-base md:text-lg leading-relaxed mb-8" style={{ color: 'var(--ink-soft)', maxWidth: '28rem' }}>
              {(() => {
                const raw = t('hero.paragraph');
                const parts = raw.split('{tefi}');
                return (
                  <>
                    {parts[0]}
                    <em className="font-display" style={{ fontStyle: 'italic' }}>Tefi</em>
                    {parts[1]}
                  </>
                );
              })()}
            </p>
            <div className="flex flex-wrap items-center gap-x-6 gap-y-3">
              <button
                onClick={onBook}
                className="px-7 py-3.5 rounded-full text-sm transition-all duration-500 hover:scale-105 inline-flex items-center gap-2"
                style={{ background: 'var(--accent)', color: 'var(--cream)' }}
              >
                {t('hero.cta')} <Icon.ArrowUpRight size={16} />
              </button>
              <a href="#services" className="text-sm hover-line" style={{ color: 'var(--ink)' }}>
                {t('hero.view')}
              </a>
            </div>
          </div>
        </div>

        <div className="reveal mt-32 md:mt-40 flex items-center gap-12 text-sm flex-wrap" data-delay="1100" style={{ color: 'var(--ink-soft)' }}>
          <div className="flex items-center gap-3">
            <span className="inline-block rounded-full" style={{ width: '6px', height: '6px', background: 'var(--accent)' }}></span>
            {t('hero.booking')}
          </div>
          <div className="hidden md:block">{t('hero.byappt')}</div>
          <div className="hidden lg:block">{t('hero.addr')}</div>
        </div>
      </div>
    </section>
  );
}

function About({ t, dict }) {
  return (
    <section id="about" className="relative px-6 md:px-12 py-32 md:py-40 overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
          <div className="lg:col-span-5 reveal">
            <div className="eyebrow-script mb-6" style={{ color: 'var(--label-color)' }}>{t('about.label')}</div>
            <h2 className="font-display section-h mb-10">
              {t('about.title1')}{' '}
              <em style={{ color: 'var(--accent-deep)', fontWeight: 300 }}>{t('about.title2')}</em>
            </h2>
            <div className="portrait-frame relative" style={{ aspectRatio: '4 / 5', background: 'var(--bone)' }}>
              <img
                src="assets/portfolio/01-chrome-pink.jpg"
                alt="Tefi at work"
                className="w-full h-full object-cover"
                style={{ filter: 'var(--photo-filter)' }}
                loading="lazy"
                decoding="async"
              />
              <span className="portrait-stamp" aria-hidden>est. MMXXIV · Den&nbsp;Haag</span>
            </div>
          </div>
          <div className="lg:col-span-6 lg:col-start-7 reveal" data-delay="200">
            <div className="space-y-6 text-lg leading-relaxed" style={{ color: 'var(--ink-soft)' }}>
              <p>
                <span className="font-display italic" style={{ color: 'var(--ink)', fontSize: '1.5rem' }}>{t('about.p1Lead')}</span>
                {t('about.p1')}
              </p>
              <p>{t('about.p2')}</p>
              <p>{t('about.p3')}</p>
            </div>
            <AtelierCard about={dict.about} />
          </div>
        </div>
      </div>
    </section>
  );
}

function AtelierCard({ about }) {
  return (
    <aside className="atelier-card mt-14" aria-label={about.cardTitle}>
      <header className="atelier-card-head">
        <span className="atelier-card-eyebrow">{about.cardEyebrow}</span>
        <span className="atelier-card-rule" aria-hidden></span>
        <span className="atelier-card-num">n° 24·05</span>
      </header>
      <h3 className="font-display atelier-card-title">{about.cardTitle}</h3>
      <dl className="atelier-card-list">
        {about.cardLines.map(([k, v]) => (
          <React.Fragment key={k}>
            <dt>{k}</dt>
            <dd>{v}</dd>
          </React.Fragment>
        ))}
      </dl>
      <footer className="atelier-card-foot">
        <span className="atelier-sign font-script">{about.cardSign}</span>
        <span className="atelier-sign-kicker">{about.cardSignKicker}</span>
      </footer>
    </aside>
  );
}

function Services({ services, onBook, bg = 'bone', t, dict }) {
  // Group services by category, preserving order
  const cats = window.TEFI_CATEGORIES;
  const grouped = cats.map(cat => ({
    ...cat,
    items: services.filter(s => s.cat === cat.key),
  }));

  return (
    <section id="services" className={`relative px-6 md:px-12 py-32 md:py-40 services-bg-${bg}`}>
      <ServicesBackground kind={bg} />
      <div className="relative max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20">
          <div className="lg:col-span-5 reveal">
            <div className="label-tiny mb-6" style={{ color: 'var(--label-color)' }}>{t('services.label')}</div>
            <h2 className="font-display section-h">
              {t('services.title1')}{' '}
              <em style={{ color: 'var(--accent-deep)', fontWeight: 300 }}>{t('services.title2')}</em>
            </h2>
          </div>
          <div className="lg:col-span-5 lg:col-start-8 reveal flex items-end" data-delay="200">
            <p className="text-base leading-relaxed" style={{ color: 'var(--ink-soft)' }}>
              {t('services.lead')}
            </p>
          </div>
        </div>

        <div className="space-y-20">
          {grouped.map((cat, ci) => {
            const meta = dict.cats[cat.key];
            const isAddons = cat.key === 'extras';
            return (
              <div key={cat.key} className="reveal" data-delay={ci * 80}>
                {/* Category header */}
                <div className="cat-head" style={{ borderColor: 'rgba(42, 36, 27, 0.18)' }}>
                  <h3 className="font-display tracking-tight cat-head-name" style={{ fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)', fontWeight: 400 }}>
                    {meta.name}
                  </h3>
                  <span className="cat-head-tag" style={{ color: 'var(--ink-soft)' }}>{meta.tag}</span>
                </div>

                {/* Items */}
                <div>
                  {cat.items.map((s, i) => {
                    const item = dict.items[s.key];
                    return (
                      <button
                        type="button"
                        key={s.key}
                        onClick={() => !isAddons && onBook(s)}
                        disabled={isAddons}
                        className={`service-row flex items-baseline justify-between gap-4 py-5 md:py-6 border-b w-full text-left ${isAddons ? 'service-row-addon' : ''}`}
                        style={{ borderColor: 'rgba(42, 36, 27, 0.10)' }}
                      >
                        <div className="flex items-baseline gap-5 md:gap-8 flex-1 min-w-0">
                          <span className="font-display text-xs shrink-0" style={{ color: 'var(--label-color)', minWidth: 28 }}>{s.code}</span>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-3 flex-wrap">
                              <h4 className="service-name font-display tracking-tight" style={{ fontSize: 'clamp(1.05rem, 1.75vw, 1.4rem)', fontWeight: 400 }}>
                                {item.name}
                              </h4>
                              {s.popular && (
                                <span className="badge-popular">{t('services.popular')}</span>
                              )}
                              {s.free && (
                                <span className="badge-free">{t('services.free')}</span>
                              )}
                            </div>
                            <p className="text-xs md:text-sm mt-1" style={{ color: 'var(--ink-soft)' }}>{item.desc}</p>
                          </div>
                        </div>
                        <div className="flex items-baseline gap-5 md:gap-8 shrink-0">
                          <span className="font-display tabular-nums" style={{ color: 'var(--ink)', fontSize: 'clamp(1.05rem, 1.6vw, 1.4rem)' }}>
                            {s.price}
                          </span>
                          {!isAddons && (
                            <span className="service-arrow hidden md:block" style={{ color: 'var(--accent-deep)' }}>
                              <Icon.ArrowUpRight size={18} />
                            </span>
                          )}
                        </div>
                      </button>
                    );
                  })}
                </div>

                {isAddons && (
                  <p className="text-xs mt-5 italic" style={{ color: 'var(--ink-soft)' }}>{t('services.addonNote')}</p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Gallery({ gallery, layout, t, galleryLabels }) {
  const gridClass = layout === 'editorial' ? 'gallery-editorial' : 'gallery-grid';
  return (
    <section id="gallery" className="relative px-6 md:px-12 py-32 md:py-40 overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-end justify-between flex-wrap gap-8 mb-16">
          <div className="reveal">
            <div className="label-tiny mb-6" style={{ color: 'var(--label-color)' }}>{t('gallery.label')}</div>
            <h2 className="font-display section-h">
              {t('gallery.title1')} <em style={{ color: 'var(--accent-deep)', fontWeight: 300 }}>{t('gallery.title2')}</em>.
            </h2>
          </div>
          <a
            href="https://www.instagram.com/tefinailsart.nl/"
            target="_blank"
            rel="noopener noreferrer"
            className="reveal text-sm hover-line inline-flex items-center gap-2"
            data-delay="200"
          >
            <Icon.Instagram size={16} /> {t('gallery.follow')}
          </a>
        </div>

        <div className={gridClass}>
          {gallery.map((g, i) => {
            const label = galleryLabels[g.labelKey] || '';
            return (
              <div
                key={i}
                className={`gallery-item reveal ${layout === 'editorial' ? g.e : g.span}`}
                data-delay={i * 100}
                style={layout === 'classic' ? { height: `${g.h}px` } : {}}
              >
                <img src={g.src} alt={label} loading="lazy" decoding="async" />
                <div
                  className="label absolute label-tiny px-3 py-1.5 rounded-full"
                  style={{
                    bottom: '12px',
                    left: '12px',
                    background: 'color-mix(in srgb, var(--cream) 92%, transparent)',
                    color: 'var(--ink)',
                    width: 'fit-content',
                  }}
                >
                  {label}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Reviews({ reviews, t, dict }) {
  const meta = dict.reviews;
  return (
    <section className="reviews-section relative py-28 md:py-36" style={{ background: 'var(--sage)' }}>
      <div className="paper-grain" aria-hidden></div>
      <div className="relative" style={{ color: 'var(--cream)' }}>
        <header className="reviews-head reveal max-w-6xl mx-auto px-6 md:px-12">
          <span className="reviews-eyebrow-script">{meta.label}</span>
          <h2 className="font-display reviews-headline">{meta.headline}</h2>
        </header>

        <div className="reviews-marquee" aria-hidden="true">
          <div className="reviews-track">
            {/* duplicate the set so the loop is seamless */}
            {[...reviews, ...reviews].map((r, i) => (
              <ReviewCard key={i} r={r} />
            ))}
          </div>
        </div>

        {/* Static list for screen readers — the marquee above is presentational. */}
        <ul className="sr-only">
          {reviews.map((r, i) => (
            <li key={i}>“{r.quote}” — {r.name}, {r.city} ({r.service})</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ReviewCard({ r }) {
  return (
    <article className="reviews-card">
      <p className="reviews-card-quote font-display">“{r.quote}”</p>
      <footer className="reviews-card-foot">
        <div className="reviews-card-byline">
          <div className="reviews-card-name">{r.name}</div>
          <div className="reviews-card-city">{r.city}</div>
        </div>
        <span className="reviews-card-tag">{r.service}</span>
      </footer>
    </article>
  );
}

function BookingCta({ onBook, t, dict }) {
  const meta = dict.cta;
  return (
    <section id="booking" className="invitation-section relative px-6 md:px-12 py-32 md:py-44 overflow-hidden">
      {/* subtle paper texture, no blob */}
      <div className="paper-grain" aria-hidden></div>

      <div className="relative max-w-5xl mx-auto">
        <div className="invitation-card reveal">
          <header className="invitation-head">
            <span className="invitation-rule-long" aria-hidden></span>
            <span className="invitation-eyebrow">{t('cta.label')}</span>
            <span className="invitation-rule-long" aria-hidden></span>
          </header>

          <h2 className="font-display invitation-h">
            {t('cta.title1')} <em style={{ color: 'var(--accent-deep)', fontWeight: 300 }}>{t('cta.title2')}</em>
          </h2>

          <p className="invitation-lead reveal" data-delay="200">
            {t('cta.lead')}
          </p>

          <InvitationFlourish />

          <div className="invitation-actions reveal" data-delay="350">
            <button
              onClick={onBook}
              className="btn-primary"
              style={{ paddingLeft: 26, paddingRight: 26 }}
            >
              {t('cta.button')} <Icon.ArrowUpRight size={16} />
            </button>
            <a
              href="https://wa.me/31612560738"
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm hover-line inline-flex items-center gap-2"
              style={{ color: 'var(--ink-soft)' }}
            >
              <Icon.WhatsApp size={14} /> {t('cta.or')}
            </a>
          </div>

          <footer className="invitation-foot">
            <span className="invitation-kicker">{meta.cardKicker}</span>
            <span className="invitation-signed font-script" aria-hidden>— {meta.cardSigned}</span>
          </footer>
        </div>
      </div>
    </section>
  );
}

/* A small calendar page + clock — visual shorthand for the booking flow:
   pick a day, then pick an hour. The "20" is a wink to Prinsengracht 20. */
function InvitationFlourish() {
  const ticks = Array.from({ length: 12 }, (_, i) => {
    const a = (i * 30 - 90) * Math.PI / 180;
    const major = i % 3 === 0;
    const r1 = 22;
    const r2 = major ? 17 : 19;
    return (
      <line
        key={i}
        x1={(Math.cos(a) * r1).toFixed(2)} y1={(Math.sin(a) * r1).toFixed(2)}
        x2={(Math.cos(a) * r2).toFixed(2)} y2={(Math.sin(a) * r2).toFixed(2)}
        opacity={major ? 1 : 0.55}
      />
    );
  });

  return (
    <svg className="invitation-flourish" viewBox="0 0 220 60" fill="none"
         aria-hidden="true" stroke="currentColor" strokeWidth="0.9"
         strokeLinecap="round" strokeLinejoin="round">

      {/* Calendar page with the chosen day circled */}
      <g transform="translate(28, 8)">
        <rect x="0" y="3" width="42" height="44" rx="3" />
        <line x1="0" y1="14" x2="42" y2="14" />
        {/* binding rings on top */}
        <line x1="11" y1="0" x2="11" y2="6" />
        <line x1="31" y1="0" x2="31" y2="6" />
        <circle cx="11" cy="2" r="1.6" />
        <circle cx="31" cy="2" r="1.6" />
        {/* the "20" — circled like the chosen day */}
        <text x="21" y="38" textAnchor="middle"
              fontFamily="Fraunces, Georgia, serif" fontStyle="italic"
              fontWeight="400" fontSize="17"
              fill="currentColor" stroke="none">20</text>
        <ellipse cx="21" cy="32" rx="13" ry="10" opacity="0.5" />
      </g>

      {/* dashed connector — pick a day → pick a time */}
      <line x1="78" y1="30" x2="138" y2="30" strokeDasharray="2 4" opacity="0.55" />

      {/* Clock face, hands at 10:10 (a quiet morning hour) */}
      <g transform="translate(170, 30)">
        <circle cx="0" cy="0" r="22" />
        {ticks}
        <line x1="0" y1="0" x2="-9" y2="-6" strokeWidth="1.3" />
        <line x1="0" y1="0" x2="13" y2="-7" strokeWidth="1.3" />
        <circle cx="0" cy="0" r="1.6" fill="currentColor" />
      </g>
    </svg>
  );
}

function Visit({ t, dict }) {
  const addressLines = (dict.visit.addressLine || '').split('\n');
  const hoursLines   = (dict.visit.hoursLine   || '').split('\n');
  return (
    <section id="visit" className="relative px-6 md:px-12 py-32 md:py-40" style={{ background: 'var(--ink)', color: 'var(--cream)' }}>
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <div className="lg:col-span-5 reveal">
            <div className="label-tiny mb-6" style={{ color: 'color-mix(in srgb, var(--cream) 50%, transparent)' }}>{t('visit.label')}</div>
            <h2 className="font-display section-h mb-8">
              {t('visit.title1')} <em style={{ color: 'var(--accent)', fontWeight: 300 }}>{t('visit.title2')}</em>
            </h2>
            <p className="leading-relaxed mb-12" style={{ color: 'color-mix(in srgb, var(--cream) 70%, transparent)' }}>
              {t('visit.lead')}
            </p>
          </div>

          <div className="lg:col-span-7 lg:col-start-6 reveal" data-delay="200">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-12">
              <div>
                <div className="flex items-center gap-2 label-tiny mb-4" style={{ color: 'var(--accent)' }}>
                  <Icon.MapPin size={14} /> {t('visit.address')}
                </div>
                <div className="font-display leading-snug" style={{ fontSize: '1.25rem' }}>
                  {addressLines.map((l, i) => <React.Fragment key={i}>{l}{i < addressLines.length - 1 && <br />}</React.Fragment>)}
                </div>
              </div>
              <div>
                <div className="flex items-center gap-2 label-tiny mb-4" style={{ color: 'var(--accent)' }}>
                  <Icon.Clock size={14} /> {t('visit.hours')}
                </div>
                <div className="font-display leading-snug" style={{ fontSize: '1.25rem' }}>
                  {hoursLines.map((l, i) => <React.Fragment key={i}>{l}<br /></React.Fragment>)}
                  <span style={{ color: 'color-mix(in srgb, var(--cream) 50%, transparent)' }}>{t('visit.hoursClosed')}</span>
                </div>
              </div>
              <div>
                <div className="flex items-center gap-2 label-tiny mb-4" style={{ color: 'var(--accent)' }}>
                  <Icon.Phone size={14} /> {t('visit.phone')}
                </div>
                <a href="tel:+31612560738" className="font-display visit-link" style={{ fontSize: '1.25rem' }}>+31 6 12 56 07 38</a>
                <a
                  href="https://wa.me/31612560738"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="visit-whatsapp"
                >
                  <Icon.WhatsApp size={14} /> {t('visit.whatsappCta')}
                </a>
              </div>
              <div>
                <div className="flex items-center gap-2 label-tiny mb-4" style={{ color: 'var(--accent)' }}>
                  <Icon.Mail size={14} /> {t('visit.email')}
                </div>
                <a href="mailto:info@tefinails.nl" className="font-display visit-link" style={{ fontSize: '1.25rem' }}>info@tefinails.nl</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang }) {
  return (
    <footer
      className="px-6 md:px-12 py-12"
      style={{ background: 'var(--ink)', color: 'color-mix(in srgb, var(--cream) 60%, transparent)', borderTop: '1px solid color-mix(in srgb, var(--cream) 10%, transparent)' }}
    >
      <div className="max-w-7xl mx-auto flex flex-wrap justify-between items-center gap-6 text-sm">
        <div className="flex items-center gap-3">
          <img src="assets/tefi-logo.png" alt="Tefi Nail Art" style={{ height: 28, filter: 'brightness(2)' }} />
        </div>
        <div className="flex items-center flex-wrap gap-x-6 gap-y-2">
          <a
            href="https://www.instagram.com/tefinailsart.nl/"
            target="_blank"
            rel="noopener noreferrer"
            className="hover-line"
          >
            Instagram
          </a>
          <a href={lang === 'nl' ? '/privacy' : `/privacy-${lang}`} className="hover-line">{t('footer.privacy')}</a>
          <a href={lang === 'nl' ? '/voorwaarden' : `/voorwaarden-${lang}`} className="hover-line">{t('footer.terms')}</a>
        </div>
        <div className="text-xs">{t('footer.rights')}</div>
      </div>
    </footer>
  );
}

/* ---------- Tweaks panel ---------- */
function TefiTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Language">
        <TweakRadio
          label="UI"
          value={tweaks.lang || 'en'}
          onChange={(v) => setTweak('lang', v)}
          options={[
            { value: 'en', label: 'EN' },
            { value: 'nl', label: 'NL' },
            { value: 'es', label: 'ES' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Direction">
        <TweakSelect
          label="Palette"
          value={tweaks.direction}
          onChange={(v) => setTweak('direction', v)}
          options={[
            { value: 'botanical',   label: 'Botanical · sage + clay' },
            { value: 'lilac',       label: 'Lilac · brand match' },
            { value: 'blush',       label: 'Blush · pearly mauve' },
            { value: 'porcelain',   label: 'Porcelain · cool taupe' },
            { value: 'terracotta',  label: 'Terracotta · sunbaked' },
            { value: 'jade',        label: 'Jade · emerald + honey' },
            { value: 'butter',      label: 'Butter · olive + amber' },
            { value: 'ink',         label: 'Ink · dark editorial' },
            { value: 'midnight',    label: 'Midnight · lilac glow' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakSelect
          label="Display"
          value={tweaks.displayFont}
          onChange={(v) => setTweak('displayFont', v)}
          options={FONT_OPTIONS.display.map(f => ({ value: f, label: f }))}
        />
        <TweakSelect
          label="Body"
          value={tweaks.bodyFont}
          onChange={(v) => setTweak('bodyFont', v)}
          options={FONT_OPTIONS.body.map(f => ({ value: f, label: f }))}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Hero"
          value={tweaks.heroLayout}
          onChange={(v) => setTweak('heroLayout', v)}
          options={[
            { value: 'asymmetric', label: 'Asym' },
            { value: 'centered',   label: 'Center' },
            { value: 'stack',      label: 'Stack' },
          ]}
        />
        <TweakRadio
          label="Lookbook"
          value={tweaks.galleryLayout}
          onChange={(v) => setTweak('galleryLayout', v)}
          options={[
            { value: 'classic',   label: 'Classic' },
            { value: 'editorial', label: 'Editorial' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Brand">
        <TweakSlider
          label="Logo size"
          value={tweaks.logoSize}
          min={24} max={96} step={2} unit="px"
          onChange={(v) => setTweak('logoSize', v)}
        />
      </TweakSection>

      <TweakSection label="Motion">
        <TweakSelect
          label="Style"
          value={tweaks.animation}
          onChange={(v) => setTweak('animation', v)}
          options={[
            { value: 'still',    label: 'Still · no motion' },
            { value: 'soft',     label: 'Soft · slow drift (default)' },
            { value: 'lively',   label: 'Lively · faster floats' },
            { value: 'breathe',  label: 'Breathe · pulsing scale' },
            { value: 'orbit',    label: 'Orbit · slow rotation' },
            { value: 'spring',   label: 'Spring · bouncy reveal' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Services background">
        <TweakSelect
          label="Style"
          value={tweaks.servicesBg}
          onChange={(v) => setTweak('servicesBg', v)}
          options={[
            { value: 'bone',        label: 'Bone · solid (default)' },
            { value: 'cream',       label: 'Cream · soft' },
            { value: 'ink',         label: 'Ink · dark' },
            { value: 'sage',        label: 'Sage · accent block' },
            { value: 'gradient',    label: 'Gradient · soft glow' },
            { value: 'botanical',   label: 'Botanical · pressed leaves' },
            { value: 'arches',      label: 'Arches · gallery wall' },
            { value: 'pearl',       label: 'Pearl · sculpted nail' },
            { value: 'brushstroke', label: 'Brushstroke · polish gesture' },
            { value: 'spotlight',   label: 'Spotlight · studio light' },
            { value: 'sparkles',    label: 'Sparkles · twinkling field' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Photo treatment">
        <TweakRadio
          label="Filter"
          value={tweaks.photoFilter}
          onChange={(v) => setTweak('photoFilter', v)}
          options={[
            { value: 'warm',    label: 'Warm' },
            { value: 'natural', label: 'Natural' },
            { value: 'film',    label: 'Film' },
            { value: 'cool',    label: 'Cool' },
            { value: 'bw',      label: 'B&W' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* Mount */
ReactDOM.createRoot(document.getElementById('root')).render(<TefiApp />);