---
import SectionHeader from "./SectionHeader.astro";
import { config } from "../config";

interface Props {
  introduction: string;
  summary: string;
  license: string;
}

const { introduction, summary, license } = Astro.props;
---

<section id="about" class="py-20 sm:py-28">
  <div class="section-container">
    <div class="max-w-3xl mx-auto">
      <SectionHeader
        title="About Common-Flow"
        subtitle="A practical git workflow that combines the best of GitHub Flow with versioned releases"
      />

      <!-- Introduction -->
      <div class="prose-spec mb-12" set:html={introduction} />

      <!-- Summary as feature cards -->
      <div class="mb-16">
        <h3
          class="text-xl font-display font-semibold mb-6
                 text-gray-950 dark:text-neutral-50"
        >
          Key Principles
        </h3>
        <div class="prose-spec" set:html={summary} />
      </div>

      <!-- Feedback & License -->
      <div class="pt-8 border-t border-gray-200 dark:border-neutral-800">
        <div class="grid sm:grid-cols-2 gap-8">
          <div>
            <h4
              class="text-sm font-semibold uppercase tracking-wider mb-3
                     text-gray-500 dark:text-neutral-500"
            >
              Feedback
            </h4>
            <p class="text-gray-600 dark:text-neutral-400">
              Please{" "}
              <a
                href={`${config.repoUrl}/issues`}
                class="text-sky-600 hover:text-sky-400"
                target="_blank"
                rel="noopener noreferrer">open an issue on GitHub</a
              >.
            </p>
          </div>
          <div>
            <h4
              class="text-sm font-semibold uppercase tracking-wider mb-3
                     text-gray-500 dark:text-neutral-500"
            >
              License
            </h4>
            <div
              class="text-gray-600 dark:text-neutral-400"
              set:html={license}
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>