---
import PresentationLayout from '../../layouts/PresentationLayout.astro';

// TEMPLATE — Feature impact (LIGHT)
// Reusable on-brand feature slide with impact statement and product applicability.
// - Ground: --flux-background (#F9FAF8)
// - LEFT column: bold title, Lexend Light description, bold "Impact:" lead + light
//   continuation, then "Applicable for:" + product pills:
//     applicable      -> --flux-green-100 bg, 1px --flux-green-600 border, inline check SVG
//     not applicable  -> --flux-grey-100 bg, 1px --flux-primary-600 border
// - RIGHT: large white screenshot card off the right edge (layered soft shadow);
//   swap the placeholder for a real product screenshot when available
// - TOP-RIGHT: persona pill in front of the screenshot card (overlaps the top edge);
//   --flux-yellow-300, fully rounded (the single yellow accent on this slide)
const title = 'Unpriced Packages';
const description =
  'Unpriced packages allow tour operators to create and sell packages without predefined pricing. Allowing early bookings while clearly communicating the unpriced status to users.';
const impact =
  'Unlocks new revenue opportunities by enabling earlier bookings, enhances customer experience by supporting high-loyalty clients, and provides a competitive advantage by offering greater flexibility in package sales.';
const persona = 'Revenue Manager persona';
const pills = [
  { label: 'Voyage', applicable: true },
  { label: 'Circle', applicable: true },
  { label: 'Quest — planned', applicable: false },
];
// Layered soft shadow (a shadow stack, not a brand color)
const cardShadow =
  '0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.8px 33.4px rgba(0, 0, 0, 0.05), 0px 22.3px 17.9px rgba(0, 0, 0, 0.042), 0px 12.5px 10px rgba(0, 0, 0, 0.035), 0px 6.7px 5.3px rgba(0, 0, 0, 0.028), 0px 2.8px 2.2px rgba(0, 0, 0, 0.02)';
---

<PresentationLayout title="Template · Feature impact">
  <div
    class="slide"
    style="padding: 0 !important; overflow: hidden !important; background: var(--flux-background);"
  >
    <!-- Left: text column (~37% width, inset from the left edge) -->
    <div
      class="flex flex-col justify-center"
      style="position: absolute; top: 0; bottom: 0; left: 6.25%; width: 37%;"
    >
      <h2
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(2rem, 2.5vw, 3rem);
          line-height: 1.1;
          letter-spacing: -0.01em;
          color: var(--flux-black);
          margin-bottom: 1.25rem;
        "
      >
        {title}
      </h2>

      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1.125rem, 1.45vw, 1.75rem);
          line-height: 1.3;
          color: var(--flux-black);
          margin-bottom: 1.5rem;
        "
      >
        {description}
      </p>

      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1.125rem, 1.45vw, 1.75rem);
          line-height: 1.3;
          color: var(--flux-black);
          margin-bottom: 1.75rem;
        "
      >
        <span style="font-weight: 700;">Impact:</span>{' '}{impact}
      </p>

      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(1.25rem, 1.6vw, 2rem);
          line-height: 1.25;
          color: var(--flux-black);
          margin-bottom: 0.875rem;
        "
      >
        Applicable for:
      </p>
      <div class="flex items-center" style="gap: 0.75rem; flex-wrap: wrap;">
        {pills.map((pill) => (
          <span
            style={`
              display: inline-flex;
              align-items: center;
              gap: 0.5rem;
              font-family: var(--flux-font-sans);
              font-weight: 700;
              font-size: clamp(0.875rem, 1.05vw, 1.25rem);
              color: var(--flux-black);
              background: ${pill.applicable ? 'var(--flux-green-100)' : 'var(--flux-grey-100)'};
              border: 1px solid ${pill.applicable ? 'var(--flux-green-600)' : 'var(--flux-primary-600)'};
              border-radius: var(--flux-radius-sm);
              padding: 0.4rem 0.9rem;
            `}
          >
            {pill.label}
            {pill.applicable && (
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                aria-hidden="true"
                style="flex-shrink: 0;"
              >
                <path
                  d="M3 8.4l3.2 3.2L13 4.8"
                  stroke="var(--flux-green-600)"
                  stroke-width="2.25"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            )}
          </span>
        ))}
      </div>
    </div>

    <!-- Right: screenshot card with persona pill tucked behind the top edge -->
    <div
      style="
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        right: -6%;
        aspect-ratio: 16 / 11;
      "
    >
      <span
        style="
          position: absolute;
          top: -1.35rem;
          right: 14%;
          z-index: 3;
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(0.875rem, 1.05vw, 1.25rem);
          color: var(--flux-black);
          background: var(--flux-yellow-300);
          border-radius: var(--flux-radius-full);
          padding: 0.5rem 1.25rem;
          white-space: nowrap;
        "
      >
        {persona}
      </span>

      <div
        style={`
          position: relative;
          z-index: 2;
          width: 100%;
          height: 100%;
          background: var(--flux-surface);
          border-radius: var(--flux-radius-md);
          box-shadow: ${cardShadow};
          display: flex;
          align-items: center;
          justify-content: center;
        `}
        aria-hidden="true"
      >
        <span
          style="
            font-family: var(--flux-font-sans);
            font-weight: 300;
            font-size: var(--flux-text-base);
            color: var(--flux-grey-300);
            margin-right: 10%;
          "
        >
          Product screenshot
        </span>
      </div>
    </div>
  </div>
</PresentationLayout>