---
import '../styles/global.css';
import Footer from './Footer.astro';
import { formEndpoint, problems, services } from '../data/site.js';

const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();

const {
  title = 'MoreminiMore',
  description = 'MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ',
  image = '/images/logos/logo-long-black.png',
  robotsMeta = 'index, follow',
} = Astro.props;

const siteUrl    = new URL('/', Astro.site).toString();
const logoUrl    = new URL('/images/logos/logo-long-black.png', Astro.site).toString();
const ogImageUrl = new URL(image, Astro.site).toString();

const organizationJsonLd = JSON.stringify({
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'MoreminiMore',
  url: siteUrl,
  logo: logoUrl,
  description: description,
  sameAs: [
    'https://www.facebook.com/moreminimore',
    'https://www.linkedin.com/company/moreminimore',
  ],
});
---

<!doctype html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="description" content={description} />
    <meta name="robots" content={robotsMeta} />
    <meta name="theme-color" content="#f8f5ea" />
    <title>{title}</title>

    <!-- Canonical -->
    <link rel="canonical" href={canonicalURL} />

    <!-- Open Graph -->
    <meta property="og:site_name" content="MoreminiMore" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:type" content="website" />
    <meta property="og:image" content={ogImageUrl} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:locale" content="th_TH" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImageUrl} />

    <!-- Organization JSON-LD -->
    <script type="application/ld+json" set:html={organizationJsonLd}>
    </script>

    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Preconnect for fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- ConsentOS (cookie consent — load first) -->
    <script src="https://consent.moreminimore.com/consent-loader.js" data-site-id="2f6d0ab5-f7d6-4d06-b299-5069c21f6238" data-api-base="https://consent.moreminimore.com"></script>

    <!-- Google Analytics 4 -->
    <script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-74BHREDLC3"></script>
    <script is:inline>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-74BHREDLC3');
    </script>

    <!-- Meta Pixel -->
    <script is:inline>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '418349260078648');
      fbq('track', 'PageView');
    </script>

    <!-- Umami Analytics -->
    <script is:inline defer src="https://umami.moreminimore.com/script.js" data-website-id="b2e87a6c-0b64-43c8-bb09-e406ffca0af1"></script>
    <script is:inline defer src="https://umami.moreminimore.com/recorder.js" data-website-id="b2e87a6c-0b64-43c8-bb09-e406ffca0af1" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
  </head>
  <body>
    <!-- Meta Pixel (noscript) -->
    <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=418349260078648&ev=PageView&noscript=1" /></noscript>

    <div class="background-stage" aria-hidden="true">
      <svg class="coded-background" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
            <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="rgba(255, 0, 255, 1)" />
            <stop offset="100%" stop-color="rgba(255, 0, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="rgba(255, 255, 0, 1)" />
            <stop offset="100%" stop-color="rgba(255, 255, 0, 0)" />
          </radialGradient>
          <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
            <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="rgba(0, 255, 255, 1)" />
            <stop offset="100%" stop-color="rgba(0, 255, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="rgba(0, 255, 0, 1)" />
            <stop offset="100%" stop-color="rgba(0, 255, 0, 0)" />
          </radialGradient>
          <radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
            <animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="rgba(0, 0, 255, 1)" />
            <stop offset="100%" stop-color="rgba(0, 0, 255, 0)" />
          </radialGradient>
          <radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
            <animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="rgba(255, 0, 0, 1)" />
            <stop offset="100%" stop-color="rgba(255, 0, 0, 0)" />
          </radialGradient>
        </defs>

        <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)">
          <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
          <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
          <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite" />
        </rect>
        <rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)">
          <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
          <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
          <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite" />
        </rect>
        <rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)">
          <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
          <animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite" />
          <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite" />
        </rect>
      </svg>
    </div>
    <a class="skip-link" href="#main">ข้ามไปยังเนื้อหา</a>

    <header class="site-nav liquid-glass liquidGlass-wrapper" data-nav>
      <div class="liquidGlass-effect" aria-hidden="true"></div>
      <div class="liquidGlass-tint" aria-hidden="true"></div>
      <div class="liquidGlass-shine" aria-hidden="true"></div>

      <a class="brand" href="/" aria-label="MoreminiMore">
        <img src="/images/logos/logo-long-black.png" width="205" height="36" alt="MoreminiMore" />
      </a>

      <button class="nav-toggle" type="button" aria-controls="nav-menu" aria-expanded="false" data-nav-toggle>
        เมนู
      </button>

      <nav id="nav-menu" class="nav-menu" aria-label="เมนูหลัก" data-nav-menu>
        <a href="/">หน้าหลัก</a>
        <div class="nav-service">
          <button type="button" aria-expanded="false" data-service-toggle>บริการ</button>
          <div class="service-mega" data-service-menu>
            {services.map((service) => (
              <a href={`/services/${service.slug}/`}>
                <strong>{service.name}</strong>
                <span>{service.headline}</span>
              </a>
            ))}
          </div>
        </div>
        <a href="/portfolio/">ผลงาน</a>
        <a href="/about/">เกี่ยวกับเรา</a>
        <a href="/blog/">บทความ</a>
      </nav>

      <button class="nav-cta" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
    </header>

    <main id="main">
      <slot />
    </main>

    <Footer />

    <button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
    <div class="panel-backdrop" data-panel-backdrop data-close-lead></div>
    <aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
      <div class="liquidGlass-effect" aria-hidden="true"></div>
      <div class="liquidGlass-tint" aria-hidden="true"></div>
      <div class="liquidGlass-shine" aria-hidden="true"></div>
      <div class="panel-head">
        <div>
          <p class="eyebrow">ส่งโจทย์ให้เราดู</p>
          <h2 id="lead-title">เลือกปัญหาที่ใกล้ที่สุด แล้วเล่าเพิ่มสั้น ๆ</h2>
        </div>
        <button type="button" class="panel-close" aria-label="ปิดฟอร์ม" data-close-lead>ปิด</button>
      </div>

      <form class="lead-form" data-lead-form>
        <input class="honeypot" type="text" name="website" tabindex="-1" autocomplete="off" />
        <fieldset>
          <legend>ตอนนี้ติดเรื่องไหนอยู่?</legend>
          <div class="chip-grid">
            {problems.map(([value, label]) => (
              <label class="chip">
                <input type="checkbox" name="problems" value={value} />
                <span>{label}</span>
              </label>
            ))}
          </div>
        </fieldset>

        <label>
          เล่าเพิ่มสั้น ๆ
          <textarea name="message" rows="4" placeholder="เช่น ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม อยากรู้ว่าควรแก้อะไรก่อน"></textarea>
        </label>

        <div class="field-row">
          <label>
            ชื่อ
            <input name="name" type="text" autocomplete="name" required />
          </label>
          <label>
            เบอร์โทร
            <input name="phone" type="tel" autocomplete="tel" />
          </label>
        </div>

        <label>
          อีเมล
          <input name="email" type="email" autocomplete="email" />
        </label>
        <p class="field-note">ใส่เบอร์โทรหรืออีเมลอย่างใดอย่างหนึ่งก็ได้</p>

        <p class="form-status" data-form-status role="status"></p>
        <button class="button button-primary" type="submit">ส่งโจทย์</button>
      </form>
    </aside>

    <svg class="glass-filter" aria-hidden="true" focusable="false">
      <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
        <feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" />
        <feComponentTransfer in="turbulence" result="mapped">
          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
        </feComponentTransfer>
        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
        <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">
          <fePointLight x="-200" y="-200" z="300" />
        </feSpecularLighting>
        <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
        <feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </svg>

    <script>
      import '../scripts/home.js';
    </script>
  </body>
</html>
