// Seção Vestimenta — detalhes de dress code
window.DressCode = function DressCode() {
  return (
    <section id="vestimenta" className="dc-section">
      <div className="container">

        <header className="section-header" data-animate>
          <p className="sub">Como se vestir</p>
          <h2>Vestimenta</h2>
          <Ornament width={140} color="#ffffff" />
          <p className="dc-intro">
            Estamos muito felizes que celebrará este evento conosco! Queremos que todos
            se sintam bem, bonitos e confortáveis. Por ser uma cerimônia formal e religiosa,
            é aconselhado que a escolha da roupa seja adequada para a ocasião —
            com decência e bom critério.
          </p>
        </header>

        {/* Cards OPTE / EVITE */}
        <div className="dc-cards" data-animate>

          {/* OPTE */}
          <article className="dc-card dc-card--opte">
            <div className="dc-card-label">O QUE VESTIR</div>
            <div className="dc-card-divider" />
            <div className="dc-card-body">
              <div className="dc-opte-row">
                <div className="dc-opte-tipos">
                  <span><span className="dc-dot" />SOCIAL</span>
                  <span><span className="dc-dot" />FORMAL</span>
                  <span><span className="dc-dot" />RIGOR</span>
                </div>
                <div className="dc-opte-sep" />
                <div className="dc-opte-generos">
                  <div className="dc-opte-grupo">
                    <p className="dc-opte-gender">MULHERES</p>
                    <p className="dc-opte-desc">Saia/Vestido midi ou longo.</p>
                  </div>
                  <div className="dc-opte-grupo">
                    <p className="dc-opte-gender">HOMENS</p>
                    <p className="dc-opte-desc">Camisa social e calça.<br/>Não precisa gravata.</p>
                  </div>
                </div>
              </div>
            </div>
          </article>

          {/* EVITE */}
          <article className="dc-card dc-card--evite">
            <div className="dc-card-label dc-card-label--evite">EVITE</div>
            <div className="dc-card-divider dc-card-divider--evite" />
            <div className="dc-card-body">
              <ul className="dc-evite-list">
                <li><span className="dc-dot dc-dot--evite" />Roupa casual</li>
                <li><span className="dc-dot dc-dot--evite" />Informal demais</li>
                <li><span className="dc-dot dc-dot--evite" />Provocante (decote, roupa muito curta ou justa)</li>
                <li className="dc-evite-destaque"><span className="dc-dot dc-dot--evite" />Não use branco e vermelho/vinho.</li>
              </ul>
              <p className="dc-evite-nota">
                Essas cores estão reservadas aos noivos e aos seus pais.
                Contamos com a sua colaboração.
              </p>
            </div>
          </article>

        </div>

        {/* Versículo */}
        <blockquote className="dc-verse" data-animate>
          <p className="dc-verse-text">
            "Que cada um de nós agrade ao seu próximo para o bem dele,
            para edificá-lo. Pois nem mesmo o Cristo agradou a si mesmo."
          </p>
          <cite className="dc-verse-ref">ROMANOS 15:2,3</cite>
        </blockquote>

      </div>

      <style>{`
        .dc-section {
          background: #711312;
          padding: 96px 0 88px;
        }
        .dc-section .section-header h2 { color: #ffffff; }
        .dc-section .section-header .sub { color: rgba(255,255,255,0.7); }
        .dc-intro {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic;
          font-size: 17px;
          color: #ffffff;
          line-height: 1.7;
          max-width: 540px;
          margin: 14px auto 0;
        }

        /* Cards */
        .dc-cards {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          margin-top: 48px;
        }
        .dc-card {
          background: #ffffff;
          border: 0.5px solid rgba(139,38,53,0.18);
          border-radius: 12px;
          padding: 28px 26px 26px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        }
        .dc-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 14px 28px -18px rgba(139,38,53,0.3);
          border-color: #ADADAD;
        }
        .dc-card-label {
          font-family: 'Augustus', 'Cormorant Garamond', serif;
          font-size: 13px;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: #5C3D2E;
        }
        .dc-card-label--evite { color: #711312; }
        .dc-card-divider {
          height: 1px;
          background: rgba(139,38,53,0.15);
        }
        .dc-card-divider--evite { background: rgba(113,19,18,0.3); }
        .dc-card-body { display: flex; flex-direction: column; gap: 14px; }

        /* OPTE */
        .dc-opte-row {
          display: flex;
          align-items: flex-start;
          gap: 0;
        }
        .dc-opte-tipos {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding-right: 16px;
        }
        .dc-opte-tipos span {
          font-family: 'Augustus', 'Cormorant Garamond', serif;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 2px;
          color: #5C3D2E;
          text-transform: uppercase;
          line-height: 1.7;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .dc-dot {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #711312;
          flex-shrink: 0;
        }
        .dc-opte-sep {
          width: 1px;
          background: rgba(139,38,53,0.2);
          align-self: stretch;
          flex-shrink: 0;
          margin-right: 16px;
        }
        .dc-opte-generos {
          display: flex;
          flex-direction: column;
          gap: 16px;
          flex: 1;
        }
        .dc-opte-grupo { display: flex; flex-direction: column; gap: 3px; }
        .dc-opte-gender {
          font-family: 'Augustus', 'Cormorant Garamond', serif;
          font-size: 12px;
          letter-spacing: 2px;
          color: #711312;
          text-transform: uppercase;
          margin: 0;
        }
        .dc-opte-desc {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic;
          font-size: 15px;
          color: #5C3D2E;
          line-height: 1.5;
          margin: 0;
        }

        /* EVITE */
        .dc-evite-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        .dc-evite-list li {
          font-family: 'Augustus', 'Cormorant Garamond', serif;
          font-size: 12px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: #711312;
          font-weight: 700;
          line-height: 1.7;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .dc-dot--evite { background: #711312; }
        .dc-evite-destaque {
          text-decoration: underline;
          text-underline-offset: 3px;
        }
        .dc-evite-nota {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic;
          font-size: 14px;
          color: #5C3D2E;
          line-height: 1.6;
          margin: 0;
          border-top: 0.5px solid rgba(139,38,53,0.15);
          padding-top: 12px;
        }

        /* Versículo */
        .dc-verse {
          text-align: center;
          margin: 48px auto 0;
          max-width: 460px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 14px;
        }
        .dc-verse-text {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic;
          font-weight: 300;
          font-size: clamp(16px, 2vw, 19px);
          color: #ffffff;
          line-height: 1.75;
          margin: 0;
        }
        .dc-verse-ref {
          font-family: 'Augustus', 'Cormorant Garamond', serif;
          font-size: 11px;
          letter-spacing: 3px;
          color: rgba(255,255,255,0.7);
          text-transform: uppercase;
          font-style: normal;
        }

        @media (max-width: 700px) {
          .dc-section { padding: 72px 0 64px; }
          .dc-cards { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};