// Home page — real copy from alignedattachments.com Home.pdf

const HomePage = () => (
  <main>
    {/* HERO */}
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">Your Transformation Starts Here</div>
            <h1 className="hero-display">
              Stop chasing.<br/>
              <em>Start connecting.</em>
            </h1>
            <p className="hero-sub">
              Relationship coaching for adults ready to fix painful patterns and
              become secure in their relationships. Feel safe in love. Reparent yourself.
              Build lasting relationships.
            </p>
            <div className="hero-cta-row">
              <Btn variant="dark" href="#/work-with-me" onClick={navTo("work-with-me")}>1:1 Coaching (2 Spots Left)</Btn>
              <Btn variant="outline" href="#/free-workbook" onClick={navTo("free-workbook")}>Free Workbook</Btn>
            </div>
            <div className="hero-trust-row">
              <span>✓ Trauma-informed</span>
              <span>✓ 1:1 personalized</span>
              <span>✓ Integrated Attachment Theory</span>
            </div>
          </div>
          <div className="hero-img-wrap">
            <div className="hero-img-bg"/>
            <img src="assets/photo-brittney-curls.webp" alt="Brittney Edwards" className="hero-img"/>
          </div>
        </div>
        <div style={{ height: 96 }}/>
      </div>
    </section>

    {/* MARQUEE */}
    <section className="marquee-strip">
      <div className="marquee-track">
        <span>Build Secure Attachments</span>
        <span className="dot">·</span>
        <span>Heal Core Wounds</span>
        <span className="dot">·</span>
        <span>Rewire Your Love Story</span>
        <span className="dot">·</span>
        <span>Find Aligned Connection</span>
        <span className="dot">·</span>
        <span>Build Secure Attachments</span>
        <span className="dot">·</span>
        <span>Heal Core Wounds</span>
        <span className="dot">·</span>
        <span>Rewire Your Love Story</span>
        <span className="dot">·</span>
        <span>Find Aligned Connection</span>
        <span className="dot">·</span>
      </div>
    </section>

    {/* INTRO LETTER */}
    <section className="section section-cream">
      <div className="container-narrow" style={{ textAlign: "center" }}>
        <Eyebrow>Welcome To Aligned Attachments</Eyebrow>
        <h2 className="h-display" style={{ fontSize: 44, margin: "16px 0 28px" }}>
          Transform your life with <em className="serif-em">Aligned Attachments.</em>
        </h2>
        <div className="body-lg" style={{ textAlign: "left" }}>
          <p style={{ marginTop: 0 }}>
            It's no secret that attachment wounds shape how we experience relationships.
            Studies show that these unresolved wounds can impact emotional well-being and
            lead to chronic anxiety, emotional shutdown, and unstable relationship patterns
            over time.
          </p>
          <p>
            When this goes unaddressed, people often find themselves overthinking every
            interaction, fearing abandonment, pulling away when things get close, or
            repeating the same painful dynamics with different partners. Luckily, I know
            how to help you fix that.
          </p>
          <p>
            My name is <strong style={{ color: "var(--aa-ink-1000)" }}>Brittney Edwards</strong>,
            and I'm a certified Integrated Attachment Theory relationship coach. I help
            adults with anxious and fearful avoidant attachment styles uncover the
            subconscious patterns driving their reactions, reprogram negative core beliefs,
            and develop the emotional regulation, communication, and boundary skills needed
            to become secure.
          </p>
          <p>
            While there's plenty of information explaining <em>why</em> these patterns
            exist, I focus on teaching you <em>how</em> to actually heal your attachment
            style and become secure.
          </p>
          <p style={{ marginBottom: 0 }}>
            Not only does this work help you to break free from exhausting relationship
            cycles, but it also helps you build long-lasting, emotionally safe, fulfilling
            relationships — with others and with yourself.
          </p>
        </div>
        <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
          <Btn variant="dark" href="#/about" onClick={navTo("about")}>Meet Brittney</Btn>
          <Btn variant="outline" href="#/services" onClick={navTo("services")}>Reserve Your Spot</Btn>
        </div>
      </div>
    </section>

    {/* THREE-STEP PATH */}
    <section className="section section-white">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Eyebrow>The Method</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 48, margin: "16px 0 14px" }}>
            Your 3-step path to <em className="serif-em">secure love.</em>
          </h2>
          <p className="body-lg" style={{ maxWidth: 620, margin: "0 auto" }}>
            Backed by Integrated Attachment Theory and trauma-informed somatic work — built for
            actual nervous systems, not theory in a vacuum.
          </p>
        </div>
        <div className="step-grid">
          {[
            { n: "01", t: "Emotional Regulation", d: "Calm your nervous system before you act on the panic. Daily practices that make hard moments survivable, instead of devastating." },
            { n: "02", t: "Pattern Identification", d: "See your attachment patterns clearly — without shame. Understand exactly what your subconscious is doing on autopilot." },
            { n: "03", t: "Subconscious Reprogramming", d: "Rewire the beliefs you formed in childhood so secure connection feels like home, not a threat to outrun." },
          ].map((s, i) => (
            <article key={s.n} className="step-card reveal" data-stagger={i + 1}>
              <span className="step-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* MY SERVICES TEASER */}
    <section className="section section-cream">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <Eyebrow>My Services</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 44, margin: "14px 0 22px" }}>
            Personalized support for the patterns you didn't choose.
          </h2>
          <p className="body-lg" style={{ marginBottom: 18 }}>
            Are you feeling stuck in old patterns or unsure how to create meaningful
            relationships? My Integrated Attachment Theory coaching offers personalized
            support to help you heal from generational trauma, master emotional regulation
            skills, and build secure, thriving connections.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["1:1 Coaching", "Personalized guidance to identify and overcome challenges, so you feel confident and empowered."],
              ["Proven Tools & Guidance", "Actionable strategies to heal from past patterns and build healthier, lasting relationships."],
              ["Ongoing Support", "Consistent check-ins and encouragement to ensure progress and lasting transformation."],
            ].map(([t, d]) => (
              <li key={t} style={{ paddingLeft: 28, position: "relative" }}>
                <span style={{ position: "absolute", left: 0, top: 4, color: "var(--aa-teal-700)", fontSize: 16, fontWeight: 700 }}>✓</span>
                <strong style={{ fontFamily: "var(--aa-font-headline)", textTransform: "uppercase", fontSize: 12.5, letterSpacing: "0.18em", color: "var(--aa-ink-1000)", display: "block", marginBottom: 4 }}>{t}</strong>
                <span className="body-md">{d}</span>
              </li>
            ))}
          </ul>
          <Btn variant="dark" href="#/services" onClick={navTo("services")}>Explore Services →</Btn>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", inset: "-5% -5% -5% -5%", background: "var(--aa-mint-200)", borderRadius: 26, zIndex: 0, opacity: .85 }}/>
          <img src="assets/photo-couple-warm.webp" alt="" style={{ position: "relative", zIndex: 1, width: "100%", height: 520, objectFit: "cover", borderRadius: 20, boxShadow: "0 20px 50px rgba(20,57,58,.18)" }}/>
        </div>
      </div>
    </section>

    {/* FREE CONSULT BAND */}
    <section className="testimonial-dark">
      <div className="container-narrow" style={{ textAlign: "center" }}>
        <Eyebrow light>Free 15-Minute Consultation</Eyebrow>
        <h2 className="h-caps" style={{ fontSize: 44, color: "var(--aa-cyan-glow)", margin: "20px 0 24px" }}>
          Schedule your free<br/>consultation today.
        </h2>
        <p style={{ fontFamily: "var(--aa-font-body)", fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.82)", maxWidth: 600, margin: "0 auto 32px" }}>
          Are you struggling with repeating negative patterns in your relationships?
          Let's work together to uncover what's holding you back and create secure,
          thriving connections. Find out your attachment style — no obligation.
        </p>
        <Btn variant="cyan" href="#/services" onClick={navTo("services")}>Reserve Your Spot</Btn>
      </div>
    </section>

    {/* TESTIMONIALS */}
    <section className="section section-cream">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <Eyebrow>Testimonials</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 44, margin: "14px 0 0" }}>
            Real shifts. Real <em className="serif-em">people.</em>
          </h2>
        </div>
        <div className="tcards-grid">
          {[
            { q: "When I talked to Brittney, I was in a bad place. My confidence was shot, and I felt like I was losing everything that mattered. She didn't just throw empty positivity at me — she walked me through a process that changed how I saw myself. By the end of our session, nothing in my life had changed, but my perspective had. And that made all the difference.", a: "Aaron A." },
            { q: "The book is phenomenal, Brittney! No fluff, all results. After trying just about everything (including EMDR), these simple but powerful exercises created a significant shift in me — from past resentments to future excitement. Thank you for sharing this gem!", a: "Alex D." },
            { q: "I was skeptical, but I figured, what do I have to lose? I've tried a lot, but Brittney's approach was one of the most effective. She's thoughtful, understanding, and actually listens. I highly recommend her to anyone struggling with emotional trauma!", a: "Mick S." },
          ].map((t, i) => (
            <article key={t.a} className="tcard reveal" data-stagger={i + 1}>
              <div className="tcard-stars">★ ★ ★ ★ ★</div>
              <p className="tcard-quote">"{t.q}"</p>
              <div className="tcard-attr">— {t.a}</div>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* SOCIAL GRID */}
    <section className="section section-white">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <Eyebrow>From The Feed</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 40, margin: "14px 0 12px" }}>
            Daily reminders for the <em className="serif-em">healing journey.</em>
          </h2>
          <p className="body-md" style={{ maxWidth: 560, margin: "0 auto" }}>
            Follow @alignedattachments on Instagram for free tools, mindset shifts,
            and reminders that you're not broken — you're patterned.
          </p>
        </div>
        <div className="social-grid">
          {[
            "social-stop-chasing.png",
            "social-build-secure-attachments.png",
            "social-heal-core-wounds.png",
            "social-3-step-path.png",
            "social-aligned-connections.png",
            "social-grow-secure.png",
            "social-heal-deepest-fears.png",
            "social-tired-emotional-loop.png",
          ].map((src) => (
            <a key={src} className="social-tile reveal" href="https://www.instagram.com/alignedattachments/" target="_blank" rel="noreferrer">
              <img src={`assets/${src}`} alt=""/>
            </a>
          ))}
        </div>
      </div>
    </section>

    {/* MINT CTA */}
    <section className="mint-cta">
      <div className="container mint-cta-inner">
        <div>
          <h2>Build secure attachments<br/>that actually last.</h2>
          <p>Apply for 1:1 coaching — only 2 spots open this month.</p>
        </div>
        <Btn variant="dark" href="#/work-with-me" onClick={navTo("work-with-me")}>Apply Now →</Btn>
      </div>
    </section>
  </main>
);

window.HomePage = HomePage;