---
export interface ProcessStep {
  num: string;
  title: string;
  body: string;
  duration?: string;
}

export interface Props {
  tag?: string;
  italicTitle?: string;
  endTitle?: string;
  steps?: ProcessStep[];
  ctaLabel?: string;
  ctaHref?: string;
}

const {
  tag = '[04] PROCESS.',
  italicTitle = 'comment',
  endTitle = "ON BOSSE ENSEMBLE.",
  steps = [
    {
      num: '01',
      title: 'BRIEF',
      body: "ON ECHANGE PAR MAIL OU TEL. TU DECRIS LE PROJET : DATE, LIEU, TYPE DE SHOOT, ATTENTES, BUDGET. JE POSE LES QUESTIONS QUI MANQUENT.",
      duration: 'JOUR MEME',
    },
    {
      num: '02',
      title: 'DEVIS',
      body: "JE TE RENVOIE UN DEVIS DETAILLE : FORMULE, LIVRABLES, DELAIS, CONDITIONS. PAS DE PETITES LIGNES, PAS DE SURPRISE.",
      duration: '< 48H',
    },
    {
      num: '03',
      title: 'SHOOT',
      body: "ON CALE LA DATE, JE VIENS AVEC MON MATERIEL. APPROCHE DOCUMENTAIRE : J OBSERVE, J ENREGISTRE, JE DERANGE PEU.",
      duration: 'J-DAY',
    },
    {
      num: '04',
      title: 'LIVRAISON',
      body: "GALERIE PRIVEE EN LIGNE AVEC LES PHOTOS TRIEES, RETOUCHEES, LIVREES EN HAUTE DEFINITION. TU TELECHARGES ET PARTAGES.",
      duration: '< 4 SEMAINES',
    },
  ],
  ctaLabel = '[ DEMANDE DE DEVIS &rarr; ]',
  ctaHref = '/contact',
} = Astro.props;
---
<section class="process" id="process">
  <header class="section-head">
    <p class="tag">{tag}</p>
    <h2><span class="ital">{italicTitle}</span> {endTitle}</h2>
  </header>

  <ol class="process__list">
    {steps.map((step) => (
      <li class="process__step">
        <div class="process__num">{step.num}</div>
        <div class="process__body">
          <h3 class="process__title">{step.title}</h3>
          <p class="process__text" set:html={step.body}></p>
        </div>
        {step.duration && <p class="process__dur">{step.duration}</p>}
      </li>
    ))}
  </ol>

  <div class="process__footer">
    <a class="cta cta--big" href={ctaHref} set:html={ctaLabel}></a>
  </div>
</section>

<style>
  .process {
    padding: 2.5rem 1.5rem 3rem;
    border-bottom: 2px solid var(--ink);
  }
  .process .section-head { margin-bottom: 2rem; }
  .process .section-head .tag {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--ink-2);
    margin: 0 0 0.75rem;
  }
  .process .section-head h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .process .section-head .ital {
    font-style: italic;
    font-weight: 300;
  }

  .process__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .process__step {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1rem 1.25rem;
    padding: 1.5rem 1rem 1.5rem 0;
    border-top: 1px solid var(--ink);
    position: relative;
  }
  .process__step:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--ink); }
  .process__step:nth-child(even) { padding-left: 1.5rem; }
  .process__num {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
  }
  .process__body {
    grid-column: 2;
  }
  .process__title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .process__text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .process__dur {
    grid-column: 2;
    margin: 0.75rem 0 0;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--accent);
    font-weight: 700;
  }

  .process__footer {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--ink);
    padding-top: 2rem;
  }

  @media (max-width: 720px) {
    .process__list { grid-template-columns: 1fr; }
    .process__step:nth-child(odd) {
      padding-right: 0;
      border-right: none;
    }
    .process__step:nth-child(even) {
      padding-left: 0;
    }
    .process__num { font-size: 2rem; }
  }
</style>