/* global React */
const FAITH_BODIES = {
  quiet_space: "Grace, sanctuary, rest, welcome. The chair is a quiet space. Bring whatever's on your heart, or don't.",
  come_as_you_are: "Grace, sanctuary, rest, welcome. Come as you are. Talk if you want, sit in quiet if you'd rather.",
  small_kindnesses: "Faith shows up here in small kindnesses: a warm welcome, an unhurried hour, an honest answer.",
  sanctuary_chair: "A small sanctuary in a busy week. The chair is yours, the conversation is yours, the pace is yours.",
  open_chair: "An open chair, an open ear, and time that genuinely belongs to you.",
  rest_for_you: "This is a place to rest. Bring your week with you, or leave it at the door. Either is welcome.",
  loved_chair: "You\u2019re loved before you sit down, and loved when you leave. The hour in between is just good hair.",
  cup_of_grace: "A cup of something warm, an hour of grace, and a stylist who prays for her clients by name.",
  shepherd_chair: "A small space tended with care. You\u2019re not a number here; you\u2019re a guest, and you\u2019re known.",
  good_to_see: "It\u2019s good to see you. Sit down, exhale, and let someone take care of you for a little while.",
  faith_quiet_hands: "Faith here looks like quiet hands and steady kindness. Nothing more, nothing less.",
  beloved_guest: "You\u2019re a beloved guest, not a booking. The whole hour is meant to feel that way.",
  hair_and_heart: "Grace, sanctuary, rest, welcome. Your hair gets the full attention; your heart gets a quiet place to land.",
  good_hair_grace: "Grace, sanctuary, rest, welcome. Good hair, gentle hands, and an hour that feels like it\u2019s yours.",
  hands_in_hair: "My hands in your hair, my heart in the work. A quiet hour of care, however you need it.",
  hair_as_ministry: "Hair is the small, holy thing I get to do. I take it seriously, and I take you seriously too.",
  blessing_chair: "Sit down, let me wash your hair, let me listen if you\u2019d like. Consider it a small blessing on your week.",
};

const THIRD_PILLARS = {
  unhurried_hour: { eyebrow: 'An unhurried hour', body: "No back-to-back chairs, no double-booking. Your appointment is yours, with time to actually breathe." },
  by_appointment: { eyebrow: 'By appointment', body: "Booking is simple, and the time you choose is held just for you. No rushing in, no waiting around." },
  by_appointment_short: { eyebrow: 'By appointment', body: "Booking is simple, and the time you choose is held just for you." },
  small_on_purpose: { eyebrow: 'Small on purpose', body: "One stylist, one chair, one guest. The whole business is built around the hour you spend in it." },
  honest_words: { eyebrow: 'Honest words', body: "If something won\u2019t work for your hair, I\u2019ll tell you. If it will, I\u2019ll show you. Either way, no upsell." },
  trusted_hands: { eyebrow: 'Trusted hands', body: "Years of training, gentle technique, and real care for the hair on your head and the person attached to it." },
  warm_welcome: { eyebrow: 'Warm welcome', body: "A warm drink, a quiet room, and someone genuinely glad you came in today." },
};

function DifferentiatorRow({ faithBodyKey = 'quiet_space', thirdPillarKey = 'unhurried_hour' }) {
  const Eyebrow = window.GFH_Eyebrow;
  const third = THIRD_PILLARS[thirdPillarKey] || THIRD_PILLARS.unhurried_hour;
  const items = [
    { eyebrow: 'Faith-rooted',
      body: FAITH_BODIES[faithBodyKey] || FAITH_BODIES.quiet_space },
    { eyebrow: 'A private suite',
      body: "Just you and Kallie. No buzzing crowd, no shared chairs. The whole appointment belongs to you." },
    third,
  ];
  return (
    <section style={{ background: '#FBF7F1', borderTop: '1px solid rgba(138,154,123,0.5)', borderBottom: '1px solid rgba(138,154,123,0.5)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '72px 24px' }}>
        <Eyebrow>What makes this different</Eyebrow>
        <div className="gfh-three" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, marginTop: 28 }}>
          {items.map((it, i) => (
            <div key={i}>
              <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 500, color: '#3D2F22', margin: '0 0 12px', letterSpacing: '-0.005em' }}>{it.eyebrow}</h3>
              <p style={{ fontFamily: "'Mulish',sans-serif", fontSize: 15.5, lineHeight: 1.65, color: '#2E2A26', margin: 0 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.GFH_DifferentiatorRow = DifferentiatorRow;
window.GFH_FAITH_BODIES = FAITH_BODIES;
window.GFH_THIRD_PILLARS = THIRD_PILLARS;