<script lang="ts">
  import { onMount } from 'svelte';
  import { enhance } from '$app/forms';
  import '../site.css';
  import type { PageData, ActionData } from './$types';

  let { data, form }: { data: PageData; form: ActionData } = $props();
  const c = $derived(data.content.copy);
  const img = $derived(data.content.images);
  const seo = $derived(data.content.seo);
  const testimonials = $derived(data.content.testimonials);

  let scrolled = $state(false);
  let submitted = $state(false);

  $effect(() => {
    if (form?.success) submitted = true;
  });

  const phoneDigits = $derived((c['contact.phone_value'] ?? '').replace(/\D/g, ''));
  const telHref = $derived(phoneDigits ? `tel:+${phoneDigits}` : '#');
  const waHref = $derived(phoneDigits ? `https://wa.me/${phoneDigits}` : '#');
  const mailHref = $derived(`mailto:${c['contact.email_value'] ?? ''}`);

  onMount(() => {
    const onScroll = () => {
      scrolled = window.scrollY > 20;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    let cleanup = () => window.removeEventListener('scroll', onScroll);

    // Leaflet — load on demand, client-only
    (async () => {
      const container = document.getElementById('map-container');
      if (!container) return;
      const leafletCss = document.createElement('link');
      leafletCss.rel = 'stylesheet';
      leafletCss.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
      document.head.appendChild(leafletCss);
      const L = (await import('leaflet')).default;
      const sassari: [number, number] = [40.7259, 8.5557];
      const map = L.map('map-container', {
        center: sassari,
        zoom: 13,
        zoomControl: false,
        scrollWheelZoom: false,
        attributionControl: false
      });
      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
        subdomains: 'abcd',
        maxZoom: 19
      }).addTo(map);
      const icon = L.divIcon({
        className: '',
        html: '<div style="background:#001d36;width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.35);"></div>',
        iconSize: [14, 14],
        iconAnchor: [7, 7]
      });
      L.marker(sassari, { icon })
        .addTo(map)
        .bindTooltip('Giampy Dog Service — Sassari', {
          permanent: true,
          direction: 'top',
          offset: [0, -10],
          className: 'map-marker-label'
        })
        .openTooltip();
    })();

    return cleanup;
  });
</script>

<svelte:head>
  <title>{seo.title}</title>
  <meta name="description" content={seo.description} />
  <meta name="keywords" content={seo.keywords} />
  <meta name="geo.region" content={seo.geoRegion} />
  <meta name="geo.placename" content={seo.geoPlacename} />
  <meta property="og:title" content={seo.title} />
  <meta property="og:description" content={seo.description} />
  <meta property="og:image" content={seo.ogImage} />
  <meta property="og:type" content="website" />
</svelte:head>

<!-- Navbar -->
<nav class="gds-nav" class:scrolled>
  <div class="nav-inner">
    <div class="nav-brand">
      <img alt={img.logo.alt} src={img.logo.src} />
      <span>{c['nav.brand']}</span>
    </div>
    <div class="nav-links">
      <a href="#servizi">{c['nav.link.servizi']}</a>
      <a href="#chi-sono">{c['nav.link.chi_sono']}</a>
      <a href="#dogwash">{c['nav.link.dogwash']}</a>
      <a href="#testimonianze">{c['nav.link.testimonianze']}</a>
      <a href="#contatti" class="nav-cta">{c['nav.cta']}</a>
    </div>
  </div>
</nav>

<!-- Hero -->
<header class="hero">
  <svg class="hero-paw hero-paw-1" aria-hidden="true" viewBox="0 0 11.667 11.083" xmlns="http://www.w3.org/2000/svg">
    <path d="M 1.458 5.25 C 1.05 5.25 0.705 5.109 0.423 4.827 C 0.141 4.545 0 4.2 0 3.792 C 0 3.383 0.141 3.038 0.423 2.756 C 0.705 2.474 1.05 2.333 1.458 2.333 C 1.867 2.333 2.212 2.474 2.494 2.756 C 2.776 3.038 2.917 3.383 2.917 3.792 C 2.917 4.2 2.776 4.545 2.494 4.827 C 2.212 5.109 1.867 5.25 1.458 5.25 Z M 4.083 2.917 C 3.675 2.917 3.33 2.776 3.048 2.494 C 2.766 2.212 2.625 1.867 2.625 1.458 C 2.625 1.05 2.766 0.705 3.048 0.423 C 3.33 0.141 3.675 0 4.083 0 C 4.492 0 4.837 0.141 5.119 0.423 C 5.401 0.705 5.542 1.05 5.542 1.458 C 5.542 1.867 5.401 2.212 5.119 2.494 C 4.837 2.776 4.492 2.917 4.083 2.917 Z M 7.583 2.917 C 7.175 2.917 6.83 2.776 6.548 2.494 C 6.266 2.212 6.125 1.867 6.125 1.458 C 6.125 1.05 6.266 0.705 6.548 0.423 C 6.83 0.141 7.175 0 7.583 0 C 7.992 0 8.337 0.141 8.619 0.423 C 8.901 0.705 9.042 1.05 9.042 1.458 C 9.042 1.867 8.901 2.212 8.619 2.494 C 8.337 2.776 7.992 2.917 7.583 2.917 Z M 10.208 5.25 C 9.8 5.25 9.455 5.109 9.173 4.827 C 8.891 4.545 8.75 4.2 8.75 3.792 C 8.75 3.383 8.891 3.038 9.173 2.756 C 9.455 2.474 9.8 2.333 10.208 2.333 C 10.617 2.333 10.962 2.474 11.244 2.756 C 11.526 3.038 11.667 3.383 11.667 3.792 C 11.667 4.2 11.526 4.545 11.244 4.827 C 10.962 5.109 10.617 5.25 10.208 5.25 Z M 2.713 11.083 C 2.275 11.083 1.908 10.916 1.611 10.58 C 1.315 10.245 1.167 9.849 1.167 9.392 C 1.167 8.886 1.339 8.444 1.684 8.065 C 2.03 7.685 2.372 7.311 2.713 6.942 C 2.994 6.64 3.237 6.312 3.442 5.957 C 3.646 5.602 3.889 5.269 4.171 4.958 C 4.385 4.706 4.633 4.497 4.915 4.331 C 5.197 4.166 5.503 4.083 5.833 4.083 C 6.164 4.083 6.47 4.161 6.752 4.317 C 7.034 4.472 7.282 4.676 7.496 4.929 C 7.768 5.24 8.009 5.576 8.218 5.935 C 8.427 6.295 8.672 6.631 8.954 6.942 C 9.294 7.311 9.637 7.685 9.982 8.065 C 10.327 8.444 10.5 8.886 10.5 9.392 C 10.5 9.849 10.352 10.245 10.055 10.58 C 9.759 10.916 9.392 11.083 8.954 11.083 C 8.429 11.083 7.909 11.04 7.394 10.952 C 6.878 10.865 6.358 10.821 5.833 10.821 C 5.308 10.821 4.788 10.865 4.273 10.952 C 3.758 11.04 3.238 11.083 2.713 11.083 Z" fill="currentColor" fill-rule="nonzero"/>
  </svg>
  <svg class="hero-paw hero-paw-2" aria-hidden="true" viewBox="0 0 11.667 11.083" xmlns="http://www.w3.org/2000/svg">
    <path d="M 1.458 5.25 C 1.05 5.25 0.705 5.109 0.423 4.827 C 0.141 4.545 0 4.2 0 3.792 C 0 3.383 0.141 3.038 0.423 2.756 C 0.705 2.474 1.05 2.333 1.458 2.333 C 1.867 2.333 2.212 2.474 2.494 2.756 C 2.776 3.038 2.917 3.383 2.917 3.792 C 2.917 4.2 2.776 4.545 2.494 4.827 C 2.212 5.109 1.867 5.25 1.458 5.25 Z M 4.083 2.917 C 3.675 2.917 3.33 2.776 3.048 2.494 C 2.766 2.212 2.625 1.867 2.625 1.458 C 2.625 1.05 2.766 0.705 3.048 0.423 C 3.33 0.141 3.675 0 4.083 0 C 4.492 0 4.837 0.141 5.119 0.423 C 5.401 0.705 5.542 1.05 5.542 1.458 C 5.542 1.867 5.401 2.212 5.119 2.494 C 4.837 2.776 4.492 2.917 4.083 2.917 Z M 7.583 2.917 C 7.175 2.917 6.83 2.776 6.548 2.494 C 6.266 2.212 6.125 1.867 6.125 1.458 C 6.125 1.05 6.266 0.705 6.548 0.423 C 6.83 0.141 7.175 0 7.583 0 C 7.992 0 8.337 0.141 8.619 0.423 C 8.901 0.705 9.042 1.05 9.042 1.458 C 9.042 1.867 8.901 2.212 8.619 2.494 C 8.337 2.776 7.992 2.917 7.583 2.917 Z M 10.208 5.25 C 9.8 5.25 9.455 5.109 9.173 4.827 C 8.891 4.545 8.75 4.2 8.75 3.792 C 8.75 3.383 8.891 3.038 9.173 2.756 C 9.455 2.474 9.8 2.333 10.208 2.333 C 10.617 2.333 10.962 2.474 11.244 2.756 C 11.526 3.038 11.667 3.383 11.667 3.792 C 11.667 4.2 11.526 4.545 11.244 4.827 C 10.962 5.109 10.617 5.25 10.208 5.25 Z M 2.713 11.083 C 2.275 11.083 1.908 10.916 1.611 10.58 C 1.315 10.245 1.167 9.849 1.167 9.392 C 1.167 8.886 1.339 8.444 1.684 8.065 C 2.03 7.685 2.372 7.311 2.713 6.942 C 2.994 6.64 3.237 6.312 3.442 5.957 C 3.646 5.602 3.889 5.269 4.171 4.958 C 4.385 4.706 4.633 4.497 4.915 4.331 C 5.197 4.166 5.503 4.083 5.833 4.083 C 6.164 4.083 6.47 4.161 6.752 4.317 C 7.034 4.472 7.282 4.676 7.496 4.929 C 7.768 5.24 8.009 5.576 8.218 5.935 C 8.427 6.295 8.672 6.631 8.954 6.942 C 9.294 7.311 9.637 7.685 9.982 8.065 C 10.327 8.444 10.5 8.886 10.5 9.392 C 10.5 9.849 10.352 10.245 10.055 10.58 C 9.759 10.916 9.392 11.083 8.954 11.083 C 8.429 11.083 7.909 11.04 7.394 10.952 C 6.878 10.865 6.358 10.821 5.833 10.821 C 5.308 10.821 4.788 10.865 4.273 10.952 C 3.758 11.04 3.238 11.083 2.713 11.083 Z" fill="currentColor" fill-rule="nonzero"/>
  </svg>
  <div class="container">
    <div class="hero-inner">
      <div>
        <p class="hero-kicker">{c['hero.kicker']}</p>
        <h1>{c['hero.title_prefix']}<br />{c['hero.title_suffix']} <em>{c['hero.title_em']}</em></h1>
        <p class="hero-desc">{c['hero.desc']}</p>
        <div class="hero-ctas">
          <a href="#servizi" class="btn-primary">
            {c['hero.cta_primary']}
            <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
          </a>
          <a href="#contatti" class="btn-outline">{c['hero.cta_outline']}</a>
        </div>
        <div class="hero-stat-strip">
          <div class="hero-stat"><strong>{c['hero.stat1_num']}</strong><span>{c['hero.stat1_label']}</span></div>
          <div class="hero-stat"><strong>{c['hero.stat2_num']}</strong><span>{c['hero.stat2_label']}</span></div>
          <div class="hero-stat"><strong>{c['hero.stat3_num']}</strong><span>{c['hero.stat3_label']}</span></div>
        </div>
      </div>
      <div class="hero-photo">
        <div class="hero-photo-frame">
          <img alt={img.hero.alt} src={img.hero.src} />
        </div>
        <div class="hero-badge">
          <div class="hero-badge-stars">
            <span class="material-symbols-outlined" aria-hidden="true">star</span>
            <strong>{c['hero.badge_label']}</strong>
          </div>
          <p>{c['hero.badge_text']}</p>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Why Section -->
<section class="why-section">
  <div class="container">
    <p class="section-kicker">{c['why.kicker']}</p>
    <h2 class="section-head">{c['why.title_1']}<br />{c['why.title_2']}</h2>
    <p class="section-sub">{c['why.sub']}</p>
    <div class="why-grid">
      {#each [
        { icon: 'history', t: c['why.card1_title'], p: c['why.card1_text'] },
        { icon: 'diversity_1', t: c['why.card2_title'], p: c['why.card2_text'] },
        { icon: 'verified_user', t: c['why.card3_title'], p: c['why.card3_text'] },
        { icon: 'house_siding', t: c['why.card4_title'], p: c['why.card4_text'] }
      ] as card}
        <div class="why-card">
          <div class="why-icon"><span class="material-symbols-outlined" aria-hidden="true">{card.icon}</span></div>
          <div>
            <h3>{card.t}</h3>
            <p>{card.p}</p>
          </div>
        </div>
      {/each}
    </div>
  </div>
</section>

<!-- Services -->
<section class="services-section" id="servizi">
  <div class="container">
    <p class="section-kicker">{c['services.kicker']}</p>
    <h2 class="section-head">{c['services.title']}</h2>
    <p class="section-sub">{c['services.sub']}</p>
    <div class="service-cards">
      {#each [
        { icon: 'pets', tag: c['services.card1_tag'], t: c['services.card1_title'], p: c['services.card1_text'], cta: c['services.card1_cta'] },
        { icon: 'house', tag: c['services.card2_tag'], t: c['services.card2_title'], p: c['services.card2_text'], cta: c['services.card2_cta'] },
        { icon: 'celebration', tag: c['services.card3_tag'], t: c['services.card3_title'], p: c['services.card3_text'], cta: c['services.card3_cta'] }
      ] as s}
        <div class="service-card">
          <span class="service-tag">{s.tag}</span>
          <span class="material-symbols-outlined service-icon" aria-hidden="true">{s.icon}</span>
          <h3>{s.t}</h3>
          <p>{s.p}</p>
          <a href="#contatti" class="service-link">
            {s.cta}
            <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
          </a>
        </div>
      {/each}
    </div>
  </div>
</section>

<!-- About -->
<section class="about-section" id="chi-sono">
  <div class="container">
    <div class="about-inner">
      <div class="about-photo-wrap">
        <img alt={img.chi_sono.alt} src={img.chi_sono.src} />
        <div class="about-quote-card">
          <p>{c['about.quote']}</p>
          <cite>{c['about.cite']}</cite>
        </div>
      </div>
      <div>
        <p class="section-kicker">{c['about.kicker']}</p>
        <h2 class="section-head">{c['about.title_1']}<br />{c['about.title_2']}<br />{c['about.title_3']}</h2>
        <p class="about-body">{c['about.body_1']}</p>
        <p class="about-body">{c['about.body_2']}</p>
        <div class="about-milestones">
          <div class="milestone">
            <span class="material-symbols-outlined" aria-hidden="true">explore</span>
            <div>
              <strong>{c['about.mile1_title']}</strong>
              <small>{c['about.mile1_text']}</small>
            </div>
          </div>
          <div class="milestone">
            <span class="material-symbols-outlined" aria-hidden="true">verified</span>
            <div>
              <strong>{c['about.mile2_title']}</strong>
              <small>{c['about.mile2_text']}</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Media Strip -->
<section class="media-strip">
  <div class="container">
    <p class="media-label">{c['media.label']}</p>
    <div class="media-logos">
      <span>{c['media.logo_1']}</span>
      <span>{c['media.logo_2']}</span>
      <span>{c['media.logo_3']}</span>
      <span>{c['media.logo_4']}</span>
      <span>{c['media.logo_5']}</span>
      <span>{c['media.logo_6']}</span>
    </div>
  </div>
</section>

<!-- DogWash -->
<section class="dogwash-section" id="dogwash">
  <div class="container">
    <div class="dogwash-card">
      <div class="dogwash-content">
        <span class="dogwash-tag">{c['dogwash.tag']}</span>
        <h2>{c['dogwash.title']}</h2>
        <p>{c['dogwash.desc']}</p>
        <a href="#contatti" class="btn-white">
          {c['dogwash.cta']}
          <span class="material-symbols-outlined" aria-hidden="true">location_on</span>
        </a>
        <p class="dogwash-community">
          <span class="material-symbols-outlined" aria-hidden="true">group</span>{c['dogwash.community']}
        </p>
      </div>
      <div class="dogwash-visual">
        <img alt={img.dogwash.alt} src={img.dogwash.src} />
      </div>
    </div>
  </div>
</section>

<!-- Testimonials -->
<section class="testimonials-section" id="testimonianze">
  <div class="container">
    <div class="testimonials-header">
      <div class="testimonials-stats">
        <div><p class="stat-num">{c['testi.stats1_num']}</p><p class="stat-label">{c['testi.stats1_label']}</p></div>
        <div><p class="stat-num">{c['testi.stats2_num']}</p><p class="stat-label">{c['testi.stats2_label']}</p></div>
      </div>
      <p class="section-kicker center">{c['testi.kicker']}</p>
      <h2 class="section-head center">{c['testi.title']}</h2>
      <p class="section-sub center">{c['testi.sub']}</p>
    </div>
    <div class="review-grid">
      {#each testimonials as r (r.id)}
        <div class="review-card">
          <div class="review-avatar"><img alt={r.avatarAlt} src={r.avatarSrc} /></div>
          <blockquote>{r.text}</blockquote>
          <div class="review-footer"><strong>{r.name}</strong><small>{r.role}</small></div>
        </div>
      {/each}
    </div>
  </div>
</section>

<!-- Contact -->
<section class="contact-section" id="contatti">
  <div class="container">
    <div class="contact-headline">
      <h2>{c['contact.headline']}</h2>
      <span class="material-symbols-outlined" aria-hidden="true">keyboard_double_arrow_down</span>
    </div>
    <div class="contact-box">
      <div class="contact-form-side">
        <h3>{c['contact.form_title']}</h3>
        <p>{c['contact.form_sub']}</p>
        {#if !submitted}
          <form method="POST" action="?/contact" use:enhance>
            <div class="form-group">
              <label for="cf-name">{c['contact.label_name']}</label>
              <input id="cf-name" name="name" type="text" placeholder={c['contact.placeholder_name']} required />
            </div>
            <div class="form-group">
              <label for="cf-dog">{c['contact.label_dog']}</label>
              <input id="cf-dog" name="dog" type="text" placeholder={c['contact.placeholder_dog']} />
            </div>
            <div class="form-group">
              <label for="cf-phone">{c['contact.label_phone']}</label>
              <input id="cf-phone" name="phone" type="tel" placeholder={c['contact.placeholder_phone']} required />
            </div>
            <div class="form-group">
              <label for="cf-msg">{c['contact.label_msg']}</label>
              <textarea id="cf-msg" name="message" placeholder={c['contact.placeholder_msg']} required></textarea>
            </div>
            {#if form?.error}
              <p style="color:#b03030;font-size:13px;margin-bottom:12px;">{form.error}</p>
            {/if}
            <button type="submit" class="btn-submit">{c['contact.submit']}</button>
          </form>
        {:else}
          <div class="success-box">
            <span class="material-symbols-outlined" aria-hidden="true">check_circle</span>
            <p>{c['contact.success']}</p>
          </div>
        {/if}
      </div>
      <div class="contact-info-side">
        <h3>{c['contact.info_title']}</h3>
        <div class="contact-items">
          <a class="contact-item" href={telHref}>
            <div class="contact-icon"><span class="material-symbols-outlined" aria-hidden="true">call</span></div>
            <div class="contact-item-text">
              <p class="contact-item-label">{c['contact.phone_label']}</p>
              <p class="contact-item-value">{c['contact.phone_value']}</p>
            </div>
            <span class="contact-item-chev material-symbols-outlined" aria-hidden="true">arrow_forward</span>
          </a>
          <a class="contact-item" href={mailHref}>
            <div class="contact-icon"><span class="material-symbols-outlined" aria-hidden="true">mail</span></div>
            <div class="contact-item-text">
              <p class="contact-item-label">{c['contact.email_label']}</p>
              <p class="contact-item-value">{c['contact.email_value']}</p>
            </div>
            <span class="contact-item-chev material-symbols-outlined" aria-hidden="true">arrow_forward</span>
          </a>
          <a class="contact-item" href={waHref} target="_blank" rel="noopener noreferrer">
            <div class="contact-icon"><span class="material-symbols-outlined" aria-hidden="true">forum</span></div>
            <div class="contact-item-text">
              <p class="contact-item-label">{c['contact.wa_label']}</p>
              <p class="contact-item-value">{c['contact.wa_value']}</p>
            </div>
            <span class="contact-item-chev material-symbols-outlined" aria-hidden="true">arrow_forward</span>
          </a>
        </div>
        <div class="contact-map"><div id="map-container"></div></div>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="footer">
  <div class="container">
    <div class="footer-main">
      <div class="footer-brand">
        <div class="footer-brand-row">
          <img alt={img.logo.alt} src={img.logo.src} />
          <span class="footer-brand-name">{c['nav.brand']}</span>
        </div>
        <p>{c['footer.tagline']}</p>
        <div class="footer-socials">
          <a href="https://www.instagram.com/giampy.dogsitter.sassari/" class="footer-social-btn" aria-label="Instagram">
            <i class="fa-brands fa-instagram"></i>
          </a>
          <a href="https://www.facebook.com/giampy.dogsitter.sassari" class="footer-social-btn" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
            <i class="fa-brands fa-facebook"></i>
          </a>
        </div>
      </div>
      <div class="footer-col">
        <h4>{c['footer.col1_title']}</h4>
        <a href="#servizi">{c['footer.col1_l1']}</a>
        <a href="#servizi">{c['footer.col1_l2']}</a>
        <a href="#servizi">{c['footer.col1_l3']}</a>
        <a href="#dogwash">{c['footer.col1_l4']}</a>
      </div>
      <div class="footer-col">
        <h4>{c['footer.col2_title']}</h4>
        <a href="#chi-sono">{c['footer.col2_l1']}</a>
        <a href="#testimonianze">{c['footer.col2_l2']}</a>
        <a href="#">{c['footer.col2_l3']}</a>
        <a href="#">{c['footer.col2_l4']}</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p>{c['footer.copyright']}</p>
      <div class="powered-by">
        <span>{c['footer.powered']}</span>
        <a href="https://cimaprogetti.it" target="_blank" rel="noopener noreferrer">
          <img src={img.cima_logo.src} alt={img.cima_logo.alt} />
        </a>
      </div>
    </div>
  </div>
</footer>
