---
const githubUrl = 'https://github.com/Lum1104/Understand-Anything';
const discordUrl = 'https://discord.gg/pydat66RY';
---

<section class="hero">
  <div class="hero-bg">
    <img src="/images/hero.jpg" alt="" class="hero-bg-img" loading="eager" />
    <div class="hero-overlay"></div>
  </div>

  <div class="hero-content">
    <span class="hero-badge anim anim-1">AI-Powered Code Understanding</span>

    <h1 class="hero-title anim anim-2">
      <span style="display:inline-block;background:linear-gradient(135deg,#c9867a,#b8865c,#d4a574);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">Understand</span>&nbsp;Anything
    </h1>

    <p class="hero-tagline anim anim-3">
      Other tools show you a <span class="hero-problem">hairball</span>.
      We <span class="hero-value">teach</span> you the codebase.
    </p>

    <div class="hero-pillars anim anim-4">
      <span class="pillar">Structure & Dependencies</span>
      <span class="pillar-dot">&middot;</span>
      <span class="pillar">Business Logic</span>
      <span class="pillar-dot">&middot;</span>
      <span class="pillar">Guided Tours</span>
    </div>

    <div class="hero-actions anim anim-5">
      <a href="#install" class="hero-cta">Get Started</a>
      <a href="/demo/" class="hero-demo">Live Demo &rarr;</a>
      <a href={discordUrl} target="_blank" rel="noopener noreferrer" class="hero-discord">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
          <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z"/>
        </svg>
        Join Discord
      </a>
      <a href={githubUrl} target="_blank" rel="noopener noreferrer" class="hero-secondary">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="vertical-align:-2px;margin-right:4px;"><path d="M12 .587l3.668 7.568L24 9.306l-6 5.986 1.416 8.421L12 19.897l-7.416 3.816L6 15.292 0 9.306l8.332-1.151z"/></svg>
        Star on GitHub
      </a>
    </div>

    <a href="https://trendshift.io/repositories/23482" target="_blank" rel="noopener noreferrer" class="hero-trendshift anim anim-5">
      <img src="https://trendshift.io/api/badge/repositories/23482" alt="Lum1104/Understand-Anything | Trendshift" width="250" height="55" loading="lazy" />
    </a>

    <a href="mailto:lum@understand-anything.com" class="hero-enterprise anim anim-5">
      <span class="hero-enterprise-label">Enterprise</span>
      <span class="hero-enterprise-divider">&middot;</span>
      <span class="hero-enterprise-email">lum@understand-anything.com</span>
      <span class="hero-enterprise-arrow">&rarr;</span>
    </a>

    <a href="https://lum.is-a.dev/" target="_blank" rel="noopener noreferrer" class="hero-author anim anim-5">
      <span class="hero-author-label">Author</span>
      <span class="hero-author-divider">&middot;</span>
      <span class="hero-author-handle">Lum1104</span>
      <span class="hero-author-arrow">&rarr;</span>
    </a>

    <details class="hero-subscribe anim anim-6">
      <summary class="hero-subscribe-toggle">
        <span>Subscribe to release updates</span>
        <svg class="hero-subscribe-chevron" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </summary>
      <div class="hero-subscribe-frame">
        <p class="hero-subscribe-hint">No spam, unsubscribe anytime</p>
        <iframe
          src="https://yuxianglin.substack.com/embed"
          title="Subscribe to release updates"
          width="480"
          height="150"
          loading="lazy"
          scrolling="no"
          frameborder="0"
        ></iframe>
      </div>
    </details>
  </div>
</section>

<style>
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 2rem;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.4) 0%,
      rgba(10, 10, 10, 0.75) 55%,
      var(--bg) 100%
    );
  }

  .hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Badge */
  .hero-badge {
    display: inline-block;
    font-family: var(--font-code);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: #d4a574;
    border: 1px solid rgba(212, 165, 116, 0.3);
    padding: 0.4rem 1.2rem;
    border-radius: 100px;
    margin-bottom: 2.5rem;
  }

  /* Headline */
  .hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 9vw, 7rem);
    color: #e8e2d8;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
    white-space: nowrap;
    max-width: 100%;
  }

  .hero-grad {
    display: inline-block;
    background: linear-gradient(135deg, #c9867a, #b8865c, #d4a574);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
  }

  /* Tagline */
  .hero-tagline {
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: #8a8578;
    line-height: 1.7;
    max-width: 900px;
    white-space: nowrap;
    margin-bottom: 1.5rem;
  }

  .hero-problem {
    color: #c9867a;
    font-style: italic;
  }

  .hero-value {
    color: #d4a574;
    font-weight: 600;
  }

  /* Pillars */
  .hero-pillars {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pillar {
    font-size: 0.9rem;
    color: #e8e2d8;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .pillar-dot {
    color: #d4a574;
    font-size: 1.2rem;
    line-height: 1;
  }

  /* CTAs */
  .hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .hero-cta {
    background: #d4a574;
    color: #0a0a0a;
    padding: 0.85rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
  }

  .hero-cta:hover {
    text-decoration: none;
    box-shadow: 0 0 30px rgba(212, 165, 116, 0.15), 0 0 60px rgba(212, 165, 116, 0.08);
    transform: translateY(-2px);
  }

  .hero-demo {
    border: 1.5px solid #d4a574;
    color: #d4a574;
    padding: 0.85rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  }

  .hero-demo:hover {
    background: rgba(212, 165, 116, 0.1);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .hero-discord {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #5865F2;
    color: #ffffff;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: box-shadow 0.3s ease, transform 0.2s ease, background 0.3s ease;
  }

  .hero-discord:hover {
    background: #4752C4;
    box-shadow: 0 0 30px rgba(88, 101, 242, 0.25), 0 0 60px rgba(88, 101, 242, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: #ffffff;
  }

  .hero-discord svg {
    flex-shrink: 0;
  }

  .hero-secondary {
    color: #8a8578;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
  }

  .hero-secondary:hover {
    color: #d4a574;
    text-decoration: none;
  }

  /* Trendshift badge — sits between the action row and the enterprise pill */
  .hero-trendshift {
    margin-top: 1.75rem;
    display: inline-block;
    line-height: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .hero-trendshift img {
    display: block;
    width: 250px;
    height: 55px;
  }

  .hero-trendshift:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 14px rgba(212, 165, 116, 0.25));
  }

  /* Enterprise contact — pill that mirrors the hero badge at the top */
  .hero-enterprise {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 100px;
    background: rgba(212, 165, 116, 0.04);
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease,
      background-color 0.25s ease;
  }

  .hero-enterprise:hover {
    border-color: rgba(212, 165, 116, 0.55);
    background: rgba(212, 165, 116, 0.08);
    box-shadow: 0 0 24px rgba(212, 165, 116, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .hero-enterprise-label {
    font-family: var(--font-code);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4a574;
  }

  .hero-enterprise-divider {
    color: rgba(212, 165, 116, 0.45);
    font-size: 0.85rem;
    line-height: 1;
  }

  .hero-enterprise-email {
    font-family: var(--font-code);
    font-size: 0.82rem;
    color: #e8e2d8;
  }

  .hero-enterprise-arrow {
    color: #d4a574;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .hero-enterprise:hover .hero-enterprise-arrow {
    transform: translateX(3px);
  }

  /* Author homepage — pill mirroring Enterprise, sits directly under it */
  .hero-author {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 100px;
    background: rgba(212, 165, 116, 0.04);
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease,
      background-color 0.25s ease;
  }

  .hero-author:hover {
    border-color: rgba(212, 165, 116, 0.55);
    background: rgba(212, 165, 116, 0.08);
    box-shadow: 0 0 24px rgba(212, 165, 116, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .hero-author-label {
    font-family: var(--font-code);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4a574;
  }

  .hero-author-divider {
    color: rgba(212, 165, 116, 0.45);
    font-size: 0.85rem;
    line-height: 1;
  }

  .hero-author-handle {
    font-family: var(--font-code);
    font-size: 0.82rem;
    color: #e8e2d8;
  }

  .hero-author-arrow {
    color: #d4a574;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .hero-author:hover .hero-author-arrow {
    transform: translateX(3px);
  }

  /* Subscribe */
  .hero-subscribe {
    margin-top: 2rem;
    width: 100%;
    max-width: 480px;
    text-align: center;
  }

  .hero-subscribe-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: #8a8578;
    font-size: 0.95rem;
    list-style: none;
    transition: color 0.2s ease;
    user-select: none;
  }

  .hero-subscribe-toggle::-webkit-details-marker {
    display: none;
  }

  .hero-subscribe-toggle:hover {
    color: #d4a574;
  }

  .hero-subscribe-chevron {
    transition: transform 0.25s ease;
  }

  .hero-subscribe[open] .hero-subscribe-chevron {
    transform: rotate(180deg);
  }

  .hero-subscribe-frame {
    margin-top: 1rem;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 10px;
    padding: 6px 6px 0;
    overflow: hidden;
    animation: subscribeFadeIn 0.3s ease-out;
  }

  .hero-subscribe-hint {
    font-size: 0.78rem;
    color: #8a8578;
    margin: 0.25rem 0 0.5rem;
    text-align: center;
  }

  .hero-subscribe-frame iframe {
    display: block;
    width: 100%;
    height: 150px;
    border: 0;
    background: transparent;
  }

  @keyframes subscribeFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Staggered entrance */
  @keyframes heroIn {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .anim {
    opacity: 0;
    animation: heroIn 0.8s ease-out forwards;
  }

  .anim-1 { animation-delay: 0.1s; }
  .anim-2 { animation-delay: 0.3s; }
  .anim-3 { animation-delay: 0.55s; }
  .anim-4 { animation-delay: 0.75s; }
  .anim-5 { animation-delay: 0.95s; }
  .anim-6 { animation-delay: 1.15s; }

  /* Responsive */
  @media (max-width: 900px) {
    .hero-tagline {
      white-space: normal;
      max-width: 36ch;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (max-width: 768px) {
    .hero { padding: 5rem 1.5rem 3rem; min-height: auto; }
    .hero-content { gap: 0; }
    .hero-pillars { gap: 0.5rem; margin-bottom: 2.25rem; }
    .pillar { font-size: 0.8rem; }
    .hero-badge {
      font-size: 0.72rem;
      padding: 0.35rem 1rem;
      margin-bottom: 1.75rem;
    }
    .hero-title { margin-bottom: 1.5rem; }
  }

  @media (max-width: 640px) {
    .hero-title {
      white-space: normal;
      line-height: 1.02;
      letter-spacing: -0.03em;
    }
    /* Stack the two words on dedicated lines for editorial drama */
    .hero-title > span { display: block; }
  }

  @media (max-width: 540px) {
    .hero-enterprise {
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.6rem 1.25rem;
      max-width: 100%;
    }
    .hero-enterprise-divider { display: none; }
    .hero-enterprise-email { font-size: 0.78rem; }
    .hero-author {
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.6rem 1.25rem;
      max-width: 100%;
    }
    .hero-author-divider { display: none; }
    .hero-author-handle { font-size: 0.78rem; }
  }

  @media (max-width: 480px) {
    .hero { padding: 4rem 1.25rem 2.25rem; }
    .hero-actions {
      flex-direction: column;
      gap: 0.75rem;
      width: 100%;
      max-width: 320px;
    }
    .hero-cta,
    .hero-demo,
    .hero-discord {
      width: 100%;
      text-align: center;
      padding: 0.85rem 1.5rem;
      justify-content: center;
    }
    .hero-pillars { flex-direction: column; gap: 0.4rem; }
    .pillar-dot { display: none; }
    .hero-subscribe { margin-top: 1.5rem; }
    .hero-subscribe-toggle { font-size: 0.85rem; }
    .hero-subscribe-frame iframe { height: 130px; }
  }
</style>
