// home.jsx — Homepage for Rachel Dahlen Aesthetics

const TESTIMONIALS = [
  { name: 'Abby Barin', text: "I came in doubtful. After a so-so Botox experience with my dermatologist, I wasn't sure if Botox was right for me. But after my very first visit with Rachel, she changed my opinion. Her knowledge, helpfulness and bedside manner is amazing. My skin has never looked better." },
  { name: 'Cory', text: "Finding Rachel has been a blessing. Rachel takes time to understand your needs and presents options to meet those needs. Hearing 'I didn't know you've had work done' is a testament to Rachel's technique. Worth the investment, every time." },
  { name: 'Holly Slocum', text: "Rachel is incredibly experienced and knowledgeable about the latest, safest cosmetic techniques. Best of all, she is very committed to only natural looking results — never the frozen or exaggerated 'done' expressions." },
  { name: 'Brielle J.', text: "Rachel is the most knowledgeable, compassionate and honest person around. She will never steer you in the wrong direction. She keeps everything looking so pretty and natural." },
];

const SIGNATURE_TREATMENTS = [
  { eyebrow: 'Neuromodulators', title: 'Botox & Dysport', body: 'Refined, targeted relaxation of expression lines — for a face that still moves, but more softly.', href: '/procedures/#botox', img: '/assets/tx/t-botox.jpg', pos: 'center 32%' },
  { eyebrow: 'Dermal Filler', title: 'Restylane', body: 'Volume restored where time has taken it. Cheeks, lips, chin, jawline — balance, never excess.', href: '/procedures/#filler', img: '/assets/tx/t-filler.jpg', pos: 'center 35%' },
  { eyebrow: 'Collagen Restoration', title: 'Sculptra', body: 'A biostimulator that rebuilds your own collagen over months. Filler made by you.', href: '/treatments/#sculptra', img: '/assets/tx/t-sculptra.jpg', pos: 'center 26%' },
  { eyebrow: 'Skin Quality', title: 'SkinPen Microneedling', body: 'FDA-cleared collagen induction for texture, scars, pores, and tone.', href: '/treatments/#microneedling', img: '/assets/tx/t-microneedling.jpg', pos: 'center 28%' },
  { eyebrow: 'Resurfacing Facial', title: 'DiamondGlow', body: 'Exfoliate, extract, and infuse — radiance you can see leaving the appointment.', href: '/treatments/#diamondglow', img: '/assets/tx/t-diamondglow.jpg', pos: 'center 42%' },
  { eyebrow: 'Medical Peel', title: 'VI Peel & GlowTox', body: 'Medium-depth correction for pigment, acne, and texture. Brighter skin in a week.', href: '/treatments/#vipeel', img: '/assets/tx/t-vipeel.jpg', pos: 'center 35%' },
];

function HomePage() {
  return (
    <div>
      <Header active="" />
      <Hero />
      <Philosophy />
      <SignatureTreatments />
      <ProvidersStrip />
      <TestimonialsSection />
      <InstagramFeed />
      <BookCTA />
      <Footer />
    </div>
  );
}

function Hero() {
  return (
    <section style={{ position: 'relative', minHeight: '88vh', display: 'flex', alignItems: 'center', overflow: 'hidden', marginTop: -89 }}>
      <img src="/assets/studio-hero-idea.jpg" alt="Rachel Dahlen Aesthetics studio, Edina MN"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: '74% center', filter: 'contrast(0.97) saturate(0.9)' }} />
      {/* Directional scrim — heavier on the left to seat the centered text */}
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(26,15,8,0.90) 0%, rgba(26,15,8,0.74) 42%, rgba(26,15,8,0.34) 66%, rgba(26,15,8,0.06) 86%)' }} />
      {/* Gentle overall lift for contrast on bright wall areas */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,15,8,0.16)' }} />
      <div style={{ position: 'relative', width: '100%', padding: '150px clamp(28px, 5vw, 88px) 120px' }}>
        <div style={{ maxWidth: 560, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', textAlign: 'left', gap: 28 }}>
          <Eyebrow variant="light">Edina · Minnesota</Eyebrow>
          <h1 className="h-display" style={{ color: 'var(--color-ivory)', textShadow: '0 2px 24px rgba(0,0,0,0.45)' }}>
            Thoughtful care.<br/><Accent style={{ color: 'var(--color-tan)' }}>Lasting results.</Accent>
          </h1>
          <div className="burgundy-rule" style={{ background: 'var(--color-tan)' }} />
          <p className="body-md" style={{ maxWidth: 480, color: 'rgba(246,242,236,0.94)', textShadow: '0 1px 14px rgba(0,0,0,0.4)' }}>
            A clinically grounded, relationship-driven practice in Edina, MN — focused on thoughtful, data-backed treatments that support long-term skin health and natural, confidence-building results.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 4 }}>
            <Button variant="primary" href="#book-now" style={{ background: 'var(--color-ivory)', color: 'var(--color-deep-brown)', borderColor: 'var(--color-ivory)' }}>Book a Consultation</Button>
            <Button variant="ghost-light" href="/treatments/">Explore Treatments</Button>
          </div>
          <div style={{ display: 'flex', gap: 40, marginTop: 28, flexWrap: 'wrap' }}>
            <Stat value="15+" label="Years Injecting" />
            <Stat value="2009" label="Began Practice" />
            <Stat value="5★" label="Google Rated" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ value, label }) {
  return (
    <div style={{ textAlign: 'left' }}>
      <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 36, color: 'var(--color-ivory)', lineHeight: 1, textShadow: '0 1px 14px rgba(0,0,0,0.4)' }}>{value}</div>
      <div className="eyebrow" style={{ marginTop: 8, color: 'var(--color-tan)' }}>{label}</div>
    </div>
  );
}

function Philosophy() {
  return (
    <section className="bg-linen" style={{ padding: '120px 0' }}>
      <div className="container-narrow" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 28, alignItems: 'center' }}>
        <Eyebrow>The Philosophy</Eyebrow>
        <h2 className="h-section">
          Where clinical expertise meets <Accent>personalized care.</Accent>
        </h2>
        <FadeRule style={{ margin: '8px auto' }} />
        <p className="body-md" style={{ maxWidth: 620, color: 'var(--color-taupe)' }}>
          Every plan begins with an honest conversation and a clinical assessment. We work patiently and deliberately — building results that support your skin's health over time, not just in the moment.
        </p>
        <p className="body-md" style={{ maxWidth: 620, color: 'var(--color-taupe)' }}>
          No pressure, no upselling. Just a thoughtful plan built around your face, your goals, and your timeline.
        </p>
        <div style={{ marginTop: 18 }}>
          <Button variant="ghost" href="/about-us/">About Us</Button>
        </div>
      </div>
    </section>
  );
}

function SignatureTreatments() {
  const trackRef = React.useRef(null);
  const page = (dir) => {
    const tr = trackRef.current; if (!tr) return;
    const cards = tr.querySelectorAll('[data-card]'); if (!cards.length) return;
    const gap = 24;
    const cardW = cards[0].getBoundingClientRect().width + gap;
    const visible = Math.max(1, Math.round(tr.clientWidth / cardW));
    const maxStart = Math.max(0, cards.length - visible);
    const cur = Math.round(tr.scrollLeft / cardW);
    let target = cur + dir;
    if (target > maxStart) target = 0;      // loop forward → back to start
    if (target < 0) target = maxStart;      // loop backward → jump to end
    const left = cards[target].offsetLeft - cards[0].offsetLeft;
    tr.scrollTo({ left, behavior: 'smooth' });
  };
  return (
    <section style={{ padding: '120px 0' }}>
      <style>{`
        .tx-track { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px; scroll-behavior: smooth; }
        .tx-track::-webkit-scrollbar { display: none; }
        .tx-ccard { flex: 0 0 calc((100% - 48px) / 3); transition: box-shadow .3s ease, transform .3s ease; }
        .tx-ccard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
        .tx-arrow {
          width: 52px; height: 52px; border-radius: 9999px;
          border: 1.5px solid var(--color-deep-brown); color: var(--color-deep-brown);
          background: transparent; font-size: 24px; line-height: 1;
          display: inline-flex; align-items: center; justify-content: center;
          cursor: pointer; transition: all .25s ease;
        }
        .tx-arrow:hover { background: var(--color-deep-brown); color: var(--color-ivory); }
        .tx-arrow-side { position: absolute; top: 38%; transform: translateY(-50%); z-index: 3; background: var(--color-ivory); box-shadow: var(--shadow-md); }
        .tx-arrow-left  { left: -16px; }
        .tx-arrow-right { right: -16px; }
        .tx-hint { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-taupe); }
        .tx-hint-arrow { font-size: 18px; color: var(--color-deep-brown); }
        @media (max-width: 980px) { .tx-ccard { flex-basis: calc((100% - 24px) / 2); } .tx-arrow-left { left: -10px; } .tx-arrow-right { right: -10px; } }
        @media (max-width: 600px) { .tx-ccard { flex-basis: 82%; } .tx-arrow-side { display: none; } .tx-hint { display: flex; } }
      `}</style>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 560 }}>
            <Eyebrow>Treatments</Eyebrow>
            <h2 className="h-section">A considered menu, <Accent>not a catalogue.</Accent></h2>
          </div>
          <a href="/treatments/" className="link-arrow">View All Treatments →</a>
        </div>
        <div style={{ position: 'relative' }}>
          <button className="tx-arrow tx-arrow-side tx-arrow-left" aria-label="Previous treatments" onClick={() => page(-1)}>‹</button>
          <div ref={trackRef} className="tx-track" style={{ display: 'flex', gap: 24, overflowX: 'auto', scrollSnapType: 'x mandatory' }}>
            {SIGNATURE_TREATMENTS.map((t, i) => (
              <a key={i} data-card href={t.href} className="tx-ccard" style={{ display: 'flex', flexDirection: 'column', background: 'var(--color-surface-raised)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', scrollSnapAlign: 'start' }}>
                <div style={{ aspectRatio: '4 / 3', overflow: 'hidden' }}>
                  <img src={t.img} alt={t.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: t.pos, filter: 'contrast(0.97) saturate(0.92)' }} />
                </div>
                <div style={{ padding: '24px 26px 28px', display: 'flex', flexDirection: 'column', gap: 11, flex: 1 }}>
                  <Eyebrow>{t.eyebrow}</Eyebrow>
                  <h3 className="h-sub">{t.title}</h3>
                  <p className="body-sm" style={{ color: 'var(--color-taupe)', flex: 1 }}>{t.body}</p>
                  <div style={{ marginTop: 4, fontSize: 11, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-deep-brown)' }}>Learn more →</div>
                </div>
              </a>
            ))}
          </div>
          <button className="tx-arrow tx-arrow-side tx-arrow-right" aria-label="Next treatments" onClick={() => page(1)}>›</button>
          <div className="tx-hint"><span className="tx-hint-arrow">‹</span> Swipe to explore <span className="tx-hint-arrow">›</span></div>
        </div>
      </div>
    </section>
  );
}

function ProvidersStrip() {
  return (
    <section className="bg-espresso" style={{ padding: '120px 0' }}>
      <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Eyebrow variant="light">The Team</Eyebrow>
          <h2 className="h-section" style={{ color: 'var(--color-ivory)' }}>
            Two practitioners. <Accent style={{ color: 'var(--color-tan)' }}>One standard.</Accent>
          </h2>
          <BurgRule />
          <p className="body-md" style={{ color: 'rgba(246,242,236,0.78)', maxWidth: 460 }}>
            Rachel Dahlen, NP-BC brings 15+ years of cosmetic injectable experience and one-on-one training from top plastic surgeons. Jessie joins as advanced practice esthetician with 13 years in medical aesthetics — corrective facials, chemical peels, microneedling, and skin renewal.
          </p>
          <div style={{ marginTop: 10 }}>
            <Button variant="ghost-light" href="/about-us/">About the Team</Button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <ProviderCard name="Rachel Dahlen, NP-BC" role="Founder · Aesthetic Nurse Practitioner" img="/assets/rachel.jpeg" />
          <ProviderCard name="Jessie" role="Advanced Practice Esthetician" img="/assets/jessie.jpeg" offset />
        </div>
      </div>
    </section>
  );
}

function ProviderCard({ name, role, img, offset }) {
  return (
    <div style={{ marginTop: offset ? 36 : 0 }}>
      <div className="photo-frame" style={{ aspectRatio: '3 / 4', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }}>
        <img src={img} alt={name} style={{ objectPosition: '50% 14%' }} />
      </div>
      <div style={{ marginTop: 18 }}>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--color-ivory)' }}>{name}</div>
        <div className="eyebrow" style={{ marginTop: 6, color: 'var(--color-tan)' }}>{role}</div>
      </div>
    </div>
  );
}

function TestimonialsSection() {
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
          <Eyebrow>In Their Words</Eyebrow>
          <h2 className="h-section">A practice built on <Accent>trust.</Accent></h2>
          <FadeRule style={{ margin: '8px auto' }} />
        </div>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ color: 'var(--color-deep-brown)', letterSpacing: '0.3em', fontSize: 14 }}>★★★★★</div>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.5, color: 'var(--color-deep-brown)' }}>“{t.text}”</p>
              <div style={{ paddingTop: 14, borderTop: '1px solid var(--color-border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="eyebrow">— {t.name}</span>
                <span style={{ fontSize: 10, color: 'var(--color-text-muted)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>via Google</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Instagram feed (Behold) ───────────────────────────────────────
// To go live: create a free feed at behold.so, connect @r.d.aesthetics,
// then paste your feed ID below (replace YOUR_BEHOLD_FEED_ID).
const BEHOLD_FEED_ID = 'pgKYEqOh22rgq3ceDk9C';
const IG_URL = 'https://www.instagram.com/r.d.aesthetics/';

function IGIcon({ size = 16, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" style={{ flexShrink: 0 }}>
      <rect x="2.5" y="2.5" width="19" height="19" rx="5.5" />
      <circle cx="12" cy="12" r="4.2" />
      <circle cx="17.6" cy="6.4" r="1.1" fill={color} stroke="none" />
    </svg>
  );
}

function InstagramFeed() {
  const [posts, setPosts] = React.useState(null);
  React.useEffect(() => {
    if (!BEHOLD_FEED_ID || BEHOLD_FEED_ID === 'YOUR_BEHOLD_FEED_ID') return; // show placeholders until configured
    fetch('https://feeds.behold.so/' + BEHOLD_FEED_ID)
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(d => {
        const arr = Array.isArray(d) ? d : (d.posts || []);
        setPosts(arr.slice(0, 8).map(p => ({
          img: (p.sizes && p.sizes.medium && p.sizes.medium.mediaUrl) || p.thumbnailUrl || p.mediaUrl,
          link: p.permalink || IG_URL,
        })));
      })
      .catch(() => {}); // keep placeholders on any failure
  }, []);

  const placeholders = ['ig1','ig2','ig3','ig4','ig5','ig6','ig7','ig8']
    .map(n => ({ img: '/assets/ig/' + n + '.jpg', link: IG_URL }));
  const all = posts && posts.length ? posts : placeholders;
  const count = Math.max(4, Math.floor(all.length / 4) * 4); // fill complete rows of 4
  const tiles = all.slice(0, count);

  return (
    <section className="bg-linen" style={{ padding: '104px 0' }}>
      <div className="container">
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginBottom: 44 }}>
          <Eyebrow>Instagram</Eyebrow>
          <h2 className="h-section">As seen on <Accent>Instagram.</Accent></h2>
          <p className="body-md" style={{ color: 'var(--color-taupe)', maxWidth: 460 }}>Treatments, results, and a look inside the studio.</p>
          <a href={IG_URL} target="_blank" rel="noopener noreferrer" className="link-arrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
            <IGIcon size={16} /> Follow on Instagram
          </a>
        </div>
        <div className="ig-grid">
          {tiles.map((t, i) => (
            <a key={i} href={t.link} target="_blank" rel="noopener noreferrer" className="ig-tile">
              <img src={t.img} alt="Rachel Dahlen Aesthetics on Instagram" loading="lazy" />
              <span className="ig-overlay"><IGIcon size={30} color="var(--color-ivory)" /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function BookCTA() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '140px 0' }}>
      <img src="/assets/studio-cta.jpg" alt="The Rachel Dahlen Aesthetics consultation lounge"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 45%', filter: 'contrast(0.97) saturate(0.92)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,15,8,0.66) 0%, rgba(26,15,8,0.58) 50%, rgba(26,15,8,0.7) 100%)' }} />
      <div className="container-narrow" style={{ position: 'relative', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 28, alignItems: 'center' }}>
        <Eyebrow variant="light">Begin</Eyebrow>
        <h2 className="h-section" style={{ color: 'var(--color-ivory)', textShadow: '0 2px 20px rgba(0,0,0,0.45)' }}>Begin with a <Accent style={{ color: 'var(--color-tan)' }}>conversation.</Accent></h2>
        <FadeRule style={{ margin: '6px auto' }} />
        <p className="body-md" style={{ maxWidth: 560, color: 'rgba(246,242,236,0.92)', textShadow: '0 1px 14px rgba(0,0,0,0.4)' }}>
          Every new patient begins with an unhurried consultation — honest, data-backed, no pressure. Book a visit, ask a question, or stop by the clinic in Edina.
        </p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 12 }}>
          <Button variant="primary" href="#book-now" style={{ background: 'var(--color-ivory)', color: 'var(--color-deep-brown)', borderColor: 'var(--color-ivory)' }}>Book Now</Button>
          <Button variant="ghost-light" href="tel:6122943749">612 · 294 · 3749</Button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, BookCTA });