<script>
  import { onMount } from 'svelte';
  import { absoluteUrl } from '$lib/site';

  export let page;

  const externalImage = absoluteUrl('/assets/lean101-logotipo.png');

  const structuredData =
    page.slug === 'home'
      ? JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'ProfessionalService',
          name: 'Lean 101',
          url: absoluteUrl('/'),
          image: externalImage,
          logo: absoluteUrl('/assets/lean101-isotipo.png'),
          description: page.meta.metaDescription,
          email: page.meta.contactEmail,
          areaServed: 'Worldwide',
          serviceType: [
            'Process excellence consulting',
            'Coaching and training',
            'Digital solutions'
          ]
        })
      : null;

  /** @param {string} tone */
  const serviceTagClass = (tone) => {
    if (tone === 'orange') return 'service-tag orange';
    if (tone === 'charcoal') return 'service-tag charcoal';
    return 'service-tag';
  };

  /** @param {string} href */
  const isExternalLink = (href) => href.startsWith('http');

  /** @param {string} body */
  const toParagraphs = (body) =>
    String(body || '')
      .split(/\n\s*\n/)
      .map((paragraph) => paragraph.trim())
      .filter(Boolean);

  onMount(() => {
    if (!window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      return;
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('in');
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.1 }
    );

    document.querySelectorAll('.section, .hero-visual, .cta-wrap').forEach((element) => {
      element.classList.add('reveal');
      observer.observe(element);
    });

    return () => observer.disconnect();
  });
</script>

<svelte:head>
  <title>{page.meta.pageTitle}</title>
  <meta name="description" content={page.meta.metaDescription} />
  <meta name="robots" content="index,follow" />
  <meta name="theme-color" content="#0070c7" />
  <link rel="canonical" href={absoluteUrl(page.path)} />
  <link rel="icon" href="/assets/lean101-isotipo.png" />
  <link rel="preconnect" href="https://api.fontshare.com" />
  <link
    href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap"
    rel="stylesheet"
  />

  <meta property="og:type" content="website" />
  <meta property="og:title" content={page.meta.pageTitle} />
  <meta property="og:description" content={page.meta.socialDescription} />
  <meta property="og:url" content={absoluteUrl(page.path)} />
  <meta property="og:image" content={externalImage} />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={page.meta.pageTitle} />
  <meta name="twitter:description" content={page.meta.socialDescription} />
  <meta name="twitter:image" content={externalImage} />

  {#if structuredData}
    <script type="application/ld+json">{structuredData}</script>
  {/if}
</svelte:head>

<nav class="nav">
  <div class="nav-inner">
    <a href="/" class="nav-logo" aria-label="Lean 101 home">
      <img src="/assets/lean101-isotipo.png" alt="Lean 101" />
    </a>
    <ul class="nav-links">
      {#each page.nav.links as link}
        <li><a href={link.href}>{link.label}</a></li>
      {/each}
    </ul>
    <a href={page.nav.ctaHref} class="nav-cta">{page.nav.ctaLabel}</a>
  </div>
</nav>

{#each page.sections as section}
  {#if section.type === 'hero'}
    {@const hero = section.data}
    <header class="hero" id={section.anchor || undefined}>
      <span class="hero-eyebrow">{hero.eyebrow}</span>
      <h1>
        {hero.titleLead}
        {#if hero.titleEmphasis}
          <br />
          <em>{hero.titleEmphasis}</em>
        {/if}
      </h1>
      <p class="hero-sub">{hero.subtext}</p>
      <div class="hero-ctas">
        <a href={hero.primaryCta.href} class="btn btn-primary">
          {hero.primaryCta.label} <span class="btn-arrow">→</span>
        </a>
        <a href={hero.secondaryCta.href} class="btn btn-secondary">
          {hero.secondaryCta.label}
        </a>
      </div>

      <div class="hero-visual">
        <img src={hero.image.src} alt={hero.image.alt} />
        {#if hero.stats?.length}
          <div class="hero-stats">
            {#each hero.stats as stat}
              <div class="hero-stat">
                <div class="hero-stat-label">{stat.label}</div>
                <div class={`hero-stat-num ${stat.tone}`}>{stat.value}</div>
              </div>
            {/each}
          </div>
        {/if}
      </div>
    </header>
  {:else if section.type === 'services'}
    {@const block = section.data}
    <section class="section" id={section.anchor || undefined}>
      <div class="section-inner">
        <div class="services-head">
          <div class="section-eyebrow">{block.eyebrow}</div>
          <h2 class="section-title">{block.title}</h2>
          <p class="section-lede">{block.lede}</p>
        </div>

        <div class="services-grid">
          {#each block.cards as card}
            <article class="service-card">
              <div class="service-img">
                <span class={serviceTagClass(card.tagTone)}>{card.tag}</span>
                <img src={card.image.src} alt={card.image.alt} />
              </div>
              <div class="service-body">
                <h3 class="service-title">{card.title}</h3>
                <p class="service-desc">{card.description}</p>
              </div>
            </article>
          {/each}
        </div>
      </div>
    </section>
  {:else if section.type === 'process'}
    {@const block = section.data}
    <section class="section process" id={section.anchor || undefined}>
      <div class="section-inner">
        <div class="services-head">
          <div class="section-eyebrow">{block.eyebrow}</div>
          <h2 class="section-title">{block.title}</h2>
          <p class="section-lede">{block.lede}</p>
        </div>

        <div class="flow">
          {#each block.steps as step, index}
            <div class="flow-step">
              <div class="flow-step-label">{step.label}</div>
              <h3 class="flow-step-title">{step.title}</h3>
              <p class="flow-step-desc">{step.description}</p>
              <div class="flow-step-outcome">{step.outcome}</div>
            </div>

            {#if index < block.steps.length - 1}
              <div class="flow-arrow" aria-hidden="true">
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path d="M5 12h14" />
                  <path d="m13 6 6 6-6 6" />
                </svg>
              </div>
            {/if}
          {/each}
        </div>
      </div>
    </section>
  {:else if section.type === 'outcomes'}
    {@const block = section.data}
    <section class="section outcomes" id={section.anchor || undefined}>
      <div class="section-inner">
        <div class="outcomes-head">
          <div class="section-eyebrow">{block.eyebrow}</div>
          <h2 class="section-title">{block.title}</h2>
          <p class="section-lede">{block.lede}</p>
        </div>

        <div class="levers-grid">
          {#each block.items as item, index}
            <div class="lever">
              <div class="lever-icon">
                {#if index === 0}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>
                {:else if index === 1}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></svg>
                {:else if index === 2}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg>
                {:else if index === 3}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></svg>
                {:else}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /></svg>
                {/if}
              </div>
              <span class="lever-num">{item.number}</span>
              <h3>{item.title}</h3>
              <p>{item.description}</p>
            </div>
          {/each}
        </div>
      </div>
    </section>
  {:else if section.type === 'why'}
    {@const block = section.data}
    <section class="section whyus" id={section.anchor || undefined}>
      <div class="section-inner">
        <div class="whyus-layout">
          <div>
            <div class="section-eyebrow">{block.eyebrow}</div>
            <h2 class="section-title">{block.title}</h2>
            <p class="section-lede">{block.lede}</p>
          </div>

          <ul class="whyus-list">
            {#each block.items as item, index}
              <li class="whyus-item">
                <div class="whyus-icon">
                  {#if index === 0}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg>
                  {:else if index === 1}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0Z" /><path d="m14.5 12.5 2-2" /><path d="m11.5 9.5 2-2" /><path d="m8.5 6.5 2-2" /><path d="m17.5 15.5 2-2" /></svg>
                  {:else if index === 2}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z" /><path d="M6 12v5c3 3 9 3 12 0v-5" /></svg>
                  {:else}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="20" y2="10" /><line x1="18" x2="18" y1="20" y2="4" /><line x1="6" x2="6" y1="20" y2="16" /></svg>
                  {/if}
                </div>
                <div class="whyus-text">
                  <h4>{item.title}</h4>
                  <p>{item.description}</p>
                </div>
              </li>
            {/each}
          </ul>
        </div>
      </div>
    </section>
  {:else if section.type === 'richText'}
    {@const block = section.data}
    <section class="section generic-copy" id={section.anchor || undefined}>
      <div class="section-inner generic-copy-inner">
        {#if block.eyebrow}
          <div class="section-eyebrow">{block.eyebrow}</div>
        {/if}
        {#if block.title}
          <h2 class="section-title">{block.title}</h2>
        {/if}
        <div class="generic-copy-body">
          {#each toParagraphs(block.body) as paragraph}
            <p>{paragraph}</p>
          {/each}
        </div>
      </div>
    </section>
  {:else if section.type === 'cta'}
    {@const block = section.data}
    <section class="cta-wrap" id={section.anchor || undefined}>
      <div class="cta-card">
        <div class="cta-inner">
          <h2>
            {block.titleLead} <em>{block.titleEmphasis}</em> {block.titleTail}
          </h2>
          <p>{block.body}</p>

          <div class="cta-flow">
            {#each block.flowSteps as step, index}
              <div class="cta-flow-step"><span class="num">{index + 1}</span> {step}</div>
              {#if index < block.flowSteps.length - 1}
                <span class="cta-flow-arrow">→</span>
              {/if}
            {/each}
          </div>

          <div class="hero-ctas">
            <a href={block.primaryCta.href} class="btn btn-on-dark">
              {block.primaryCta.label} <span class="btn-arrow">→</span>
            </a>
            <a href={block.secondaryCta.href} class="btn btn-ghost-dark">
              {block.secondaryCta.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  {/if}
{/each}

<footer class="footer">
  <div class="footer-inner">
    <div class="footer-grid">
      <div class="footer-brand">
        <img src="/assets/lean101-logotipo.png" alt="Lean 101" />
        <p>{page.footer.brandTagline}</p>
      </div>
      <div class="footer-col">
        <h5>Services</h5>
        <ul>
          {#each page.footer.servicesLinks as link}
            <li><a href={link.href}>{link.label}</a></li>
          {/each}
        </ul>
      </div>
      <div class="footer-col">
        <h5>Company</h5>
        <ul>
          {#each page.footer.companyLinks as link}
            <li><a href={link.href}>{link.label}</a></li>
          {/each}
        </ul>
      </div>
      <div class="footer-col">
        <h5>Connect</h5>
        <ul>
          {#each page.footer.connectLinks as link}
            <li>
              <a
                href={link.href}
                target={isExternalLink(link.href) ? '_blank' : undefined}
                rel={isExternalLink(link.href) ? 'noreferrer' : undefined}
              >
                {link.label}
              </a>
            </li>
          {/each}
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© {page.meta.copyrightYear} Lean 101. All rights reserved.</span>
      <span>{page.meta.location}</span>
    </div>
  </div>
</footer>
