// sections2.jsx — Apps, Philosophy (Values), Support, CTA, Footer
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

function SectionLabel({ kicker, title, children }) {
  return (
    <div data-reveal className="reveal" style={{ textAlign: 'center', marginBottom: 56 }}>
      <p style={{ fontSize: 'clamp(1.5rem, 3vw, 2.2rem)', letterSpacing: '0.06em',
        color: 'var(--primary)', textTransform: 'uppercase', marginBottom: 10, fontWeight: 700 }}>{kicker}</p>
      <h2 style={{ fontSize: 'clamp(1rem, 2vw, 1.4rem)', lineHeight: 1.2,
        letterSpacing: '0.04em', color: 'var(--muted)', fontWeight: 400 }}>{title}</h2>
      {children && <p style={{ maxWidth: 540, margin: '16px auto 0', fontSize: 16,
        lineHeight: 1.6, color: 'var(--muted)' }}>{children}</p>}
      <div className="hairline" style={{ maxWidth: 220, margin: '26px auto 0' }} />
    </div>
  );
}

/* ——— About ——— */
function AboutSection() {
  return (
    <section id="about" style={{ position: 'relative', padding: '110px 32px 60px', maxWidth: 880, margin: '0 auto' }}>
      <SectionLabel kicker="About" title="A studio for the inner life.">
        Soul Studio builds premium mobile experiences that support reflection, emotional
        clarity, and sustainable daily routines. We create products that feel quiet,
        focused, and steady, designed to earn a place in people's lives through
        usefulness, not noise.
      </SectionLabel>
    </section>
  );
}

/* ——— Why We Exist ——— */
function WhySection() {
  return (
    <section id="why" style={{ position: 'relative', padding: '60px 32px', maxWidth: 880, margin: '0 auto' }}>
      <SectionLabel kicker="Why we exist" title="Less noise. More intention.">
        We make products that help people slow down, check in, and come back to
        themselves every day. Instead of endless engagement, we focus on calm
        experiences people can actually live with and return to.
      </SectionLabel>
    </section>
  );
}

/* ——— Products ——— */
function AppsSection() {
  const coming = [
    { tag: 'Wellness', name: 'Foodtracking', desc: 'A more mindful food tracker built around awareness, balance, and sustainable habits.', c: 'var(--accent)' },
    { tag: 'Mindset', name: 'Affirmations', desc: 'A daily companion for calmer thoughts and stronger inner language. Built to help people reset their mindset, reconnect with themselves, and create a more intentional emotional baseline.', c: 'var(--mauve)' },
  ];
  return (
    <section id="products" style={{ position: 'relative', padding: '110px 32px', maxWidth: 1240, margin: '0 auto' }}>
      <SectionLabel kicker="Our products" title="Built to be returned to, with intention.">
        Each Soul Studio product is designed around a simple idea: if an app becomes
        part of someone's routine, it should leave them feeling clearer, steadier,
        and more grounded after using it.
      </SectionLabel>

      {/* Featured: Begin — banner */}
      <div data-reveal className="reveal card-hover" style={{ borderRadius: 28, overflow: 'hidden',
        border: '1px solid var(--border)', background: 'linear-gradient(150deg, var(--card) 0%, rgba(139,75,107,0.2) 100%)',
        display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap',
        padding: 'clamp(26px,3.5vw,40px)', marginBottom: 30 }}>
        <img src="assets/icon.jpg" alt="Begin app icon" style={{ width: 78, height: 78,
          borderRadius: 19, objectFit: 'cover', border: '1px solid var(--border)', flexShrink: 0,
          boxShadow: '0 0 36px rgba(var(--glow-c),0.32)' }} />
        <div style={{ flex: 1, minWidth: 240 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8, flexWrap: 'wrap' }}>
            <h3 style={{ fontSize: 'clamp(1.7rem,2.6vw,2.3rem)', lineHeight: 1,
              color: 'var(--text)' }}>Begin: Bible &amp; Prayer Journal</h3>
            <span style={{ display: 'inline-block', padding: '4px 11px', borderRadius: 999,
              fontSize: 11, fontWeight: 600, color: 'var(--peach)', whiteSpace: 'nowrap',
              background: 'rgba(227,185,138,0.14)', border: '1px solid rgba(227,185,138,0.25)' }}>● Live now</span>
          </div>
          <p style={{ fontSize: 13.5, color: 'var(--primary)', marginBottom: 12, letterSpacing: '0.02em' }}>
            iOS &amp; Android</p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--muted)', maxWidth: 560 }}>
            A personalized companion for daily prayer, Scripture, and reflection. Begin helps
            people start the day with presence, structure, and a rhythm they can return to,
            shaped around what they're walking through right now.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
            {[
              { label: 'App Store',   sub: 'Download on the', rating: '5.0 ★',
                href: 'https://apps.apple.com/us/app/begin-prayer-bible-journal/id6760112071',
                path: 'M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z' },
              { label: 'Google Play', sub: 'Get it on',        rating: null,
                href: 'https://play.google.com/store/apps/details?id=com.mtstudio.holyfaith',
                path: 'M3.18 23.76c.3.16.65.19.98.08L14 17.77l-2.82-2.82-7.99 7.99c-.22.44-.22.55 0 .82zm16.35-10.04-3.3-1.89L13 15.05l2.81 2.81 3.72-2.11c.9-.51.9-1.56 0-2.03zm-16.6-9.95c-.22.26-.27.45 0 .82l7.99 7.99L13.76 9.5 3.98 3.86a1.04 1.04 0 00-.05-.09zm9.04 8.5L8.96 10.2l-5.79 5.8L8.96 21.8l3.01-3.01-2.82-2.82 2.82-2.82z' },
            ].map((b, bi) => (
              <a key={bi} href={b.href} target="_blank" rel="noopener noreferrer"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
                  padding: '9px 15px', borderRadius: 10, textDecoration: 'none',
                  background: 'rgba(0,0,0,0.45)', border: '1px solid rgba(255,255,255,0.13)',
                  backdropFilter: 'blur(10px)', color: 'var(--text)' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"
                  style={{ opacity: 0.9, flexShrink: 0 }}>
                  <path d={b.path} />
                </svg>
                <div>
                  <div style={{ fontSize: 9, letterSpacing: '0.08em', color: 'var(--muted)',
                    textTransform: 'uppercase', lineHeight: 1.2 }}>{b.sub}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em' }}>{b.label}</div>
                  {b.rating && <div style={{ fontSize: 9.5, color: 'var(--peach)', marginTop: 1 }}>{b.rating}</div>}
                </div>
              </a>
            ))}
          </div>
        </div>
        <Magnetic strength={0.3} style={{ flexShrink: 0 }}>
          <a href="https://apps.apple.com/us/app/begin-prayer-bible-journal/id6760112071" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex',
            alignItems: 'center', gap: 9, padding: '14px 24px', borderRadius: 999,
            background: 'var(--peach)', color: '#2a2014', fontWeight: 700, fontSize: 14,
            textDecoration: 'none', whiteSpace: 'nowrap' }}>Download Begin ↗</a>
        </Magnetic>
      </div>

      {/* Screenshot carousel */}
      <ScreenshotCarousel />

      {/* Coming soon */}
      <p data-reveal className="reveal" style={{ fontSize: 20, color: 'var(--text)', fontWeight: 600,
        margin: '50px 0 18px', padding: '0 4px' }}>What's coming next</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }} className="coming-grid">
        {coming.map((a, i) => (
          <div key={i} data-reveal className="reveal card-hover" style={{ padding: 34, borderRadius: 24,
            border: '1px solid var(--border)', background: 'var(--card)', transitionDelay: `${i * 0.08}s` }}>
            <div style={{ width: 54, height: 54, borderRadius: 15, display: 'grid', placeItems: 'center',
              fontSize: 22, fontWeight: 700, marginBottom: 22, color: a.c,
              background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border)' }}>✦</div>
            <p className="font-mono" style={{ fontSize: 10.5, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: a.c, marginBottom: 8 }}>{a.name}</p>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--muted)' }}>{a.desc}</p>
            <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--border)',
              fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)' }}>
              In development · Coming 2026
            </div>
          </div>
        ))}
      </div>

      <style>{`
        .card-hover { transition: transform .4s cubic-bezier(0.16,1,0.3,1), border-color .4s, box-shadow .4s; }
        .card-hover:hover { transform: translateY(-5px); border-color: rgba(var(--glow-a),0.35);
          box-shadow: 0 24px 50px -24px rgba(0,0,0,0.5); }
        @media (max-width: 820px) {
          .coming-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ——— A look inside Begin — phone demo + feature list ——— */
function ScreenshotCarousel() {
  const features = [
    { t: 'Personalized 30-day prayer guide', d: "Receive a 30-day prayer plan built in Scripture, chosen for what you're walking through." },
    { t: 'Faith journey insights', d: "Track answered prayers and witness God's faithfulness over time." },
    { t: 'Christian meditation', d: 'Guided Bible meditation to still your mind, quiet the noise, and draw near to God.' },
    { t: 'Prayer journal', d: 'Reflect, write, grow.' },
    { t: 'Faith affirmations', d: 'Speak the Word over your life. Daily Scripture-based declarations to renew your mind, one day at a time.' },
    { t: 'Prayer reminders', d: 'Build a daily prayer habit that sticks.' },
    { t: 'Works offline', d: 'Pray anywhere, no Wi-Fi needed.' },
  ];
  return (
    <div data-reveal className="reveal" style={{ marginBottom: 30 }}>
      <p style={{ fontSize: 20, color: 'var(--text)', fontWeight: 600,
        marginBottom: 26, padding: '0 4px' }}>A look inside Begin</p>

      <div className="inside-grid" style={{ display: 'grid',
        gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 'clamp(28px,4vw,64px)',
        alignItems: 'center' }}>

        {/* phone playing the how-it-works demo */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div className="phone-float">
            <BeginPhone src="assets/begin-how.mp4" />
          </div>
        </div>

        {/* what to expect */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {features.map((f, i) => (
            <div key={i} data-reveal className="reveal" style={{ display: 'flex', gap: 16,
              padding: '14px 4px', borderBottom: i < features.length - 1 ? '1px solid var(--border)' : 'none',
              transitionDelay: `${i * 0.06}s` }}>
              <span style={{ color: 'var(--primary)', fontSize: 15, lineHeight: 1.5, flexShrink: 0 }}>✦</span>
              <div>
                <p style={{ fontSize: 15, fontWeight: 600, color: 'var(--text)', marginBottom: 3 }}>{f.t}</p>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--muted)' }}>{f.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .inside-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* ——— Philosophy / Values ——— */
function PhilosophySection() {
  const pillars = [
    { n: '01', t: 'Clarity', d: 'We remove friction, clutter, and decision fatigue so each product feels easy to enter and easy to return to.' },
    { n: '02', t: 'Calm', d: 'We use pacing, visual softness, and restraint to create experiences that feel grounding rather than overstimulating.' },
    { n: '03', t: 'Daily use', d: 'We build around repeatable rituals, not addictive loops, so the product supports real life instead of competing with it.' },
  ];
  return (
    <section id="philosophy" style={{ position: 'relative', padding: '60px 32px 100px', maxWidth: 1140, margin: '0 auto' }}>
      <SectionLabel kicker="Our philosophy" title="Calm by design. Useful by habit.">
        Our philosophy only matters if it changes the experience of the product.
        We design every app to feel simple in the moment and valuable over time.
      </SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, alignItems: 'start' }} className="pillar-grid">
        {pillars.map((p, i) => (
          <div key={p.n} data-reveal className={`reveal card-hover pillar-cream${i === 1 ? ' pillar-stagger' : ''}`}
            style={{ position: 'relative', overflow: 'hidden',
              transitionDelay: `${i * 0.1}s`, padding: '34px 30px', borderRadius: 24,
              background: 'var(--card-cream)', border: '1px solid rgba(0,0,0,0.07)' }}>
            <div aria-hidden="true" style={{
              position: 'absolute', bottom: -28, right: -6,
              fontSize: 152, fontWeight: 700, lineHeight: 1,
              fontFamily: "'Newsreader', Georgia, serif",
              color: 'rgba(0,0,0,0.05)', pointerEvents: 'none',
              userSelect: 'none', letterSpacing: '-0.04em',
            }}>{p.n}</div>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
              <span className="font-mono" style={{ fontSize: 10.5, letterSpacing: '0.2em',
                textTransform: 'uppercase', color: 'var(--accent)' }}>{p.n}</span>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)', opacity: 0.55 }} />
            </div>
            <h3 style={{ position: 'relative', fontSize: 24, color: 'var(--text-on-cream)', marginBottom: 12, fontWeight: 600 }}>{p.t}</h3>
            <p style={{ position: 'relative', fontSize: 14.5, lineHeight: 1.7, color: 'var(--muted-on-cream)' }}>{p.d}</p>
          </div>
        ))}
      </div>
      <style>{`
        .pillar-cream:hover { box-shadow: 0 20px 44px -20px rgba(100,50,70,0.18) !important; border-color: rgba(var(--glow-b),0.22) !important; }
        .pillar-stagger { margin-top: 44px; }
        @media (max-width:820px){ .pillar-grid{ grid-template-columns:1fr !important; gap:22px; } .pillar-stagger{ margin-top: 0; } }
      `}</style>
    </section>
  );
}

/* ——— Support ——— */
function SupportSection() {
  const opts = [
    { t: 'Begin Support', d: 'Help with Begin: subscriptions, restore purchases, account questions, and bug reports.', cta: 'Get Begin help', c: 'var(--primary)', i: 'A' },
    { t: 'General Inquiries', d: 'Questions about Soul Studio, partnership ideas, press, or anything else? Reach out directly.', cta: 'Email Soul Studio', c: 'var(--accent)', i: 'S' },
  ];
  return (
    <section id="support" style={{ position: 'relative', padding: '100px 32px', maxWidth: 1080, margin: '0 auto' }}>
      <SectionLabel kicker="Support" title="We're here to help" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26 }} className="sup-grid">
        {opts.map((o, i) => {
          const cream = i === 0;
          return (
            <a key={i} href="mailto:support@mtstudioapp.com" data-reveal className={`reveal card-hover sup-card${cream ? ' sup-cream' : ''}`}
              style={{ display: 'flex', flexDirection: 'column', padding: 34, borderRadius: 24,
                border: cream ? '1px solid rgba(0,0,0,0.07)' : '1px solid var(--border)',
                background: cream ? 'var(--card-cream)' : 'var(--card)',
                textDecoration: 'none', transitionDelay: `${i * 0.08}s` }}>
              <div style={{ width: 50, height: 50, borderRadius: 14, display: 'grid', placeItems: 'center',
                fontSize: 19, fontWeight: 700, marginBottom: 22, color: o.c,
                background: cream ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.04)',
                border: cream ? '1px solid rgba(0,0,0,0.1)' : '1px solid var(--border)' }}>{o.i}</div>
              <h3 style={{ fontSize: 22, marginBottom: 10, fontWeight: 600,
                color: cream ? 'var(--text-on-cream)' : 'var(--text)' }}>{o.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, flex: 1, marginBottom: 22,
                color: cream ? 'var(--muted-on-cream)' : 'var(--muted)' }}>{o.d}</p>
              <span className="sup-cta" style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 14, fontWeight: 600, color: o.c, transition: 'gap .25s' }}>{o.cta} →</span>
            </a>
          );
        })}
      </div>
      <style>{`
        .sup-card:hover .sup-cta { gap: 14px; }
        .sup-cream:hover { box-shadow: 0 20px 44px -20px rgba(100,50,70,0.18) !important; border-color: rgba(var(--glow-b),0.22) !important; }
        @media (max-width:760px){ .sup-grid{ grid-template-columns:1fr !important; } }
      `}</style>
    </section>
  );
}

/* ——— CTA ——— */
function CTASection() {
  return (
    <section style={{ padding: '60px 32px 110px', maxWidth: 920, margin: '0 auto' }}>
      <div data-reveal className="reveal" style={{ position: 'relative', borderRadius: 30, overflow: 'hidden',
        padding: 'clamp(40px,6vw,72px)', textAlign: 'center', border: '1px solid var(--border)',
        background: 'linear-gradient(150deg, var(--card), rgba(139,75,107,0.22))' }}>
        <div style={{ position: 'absolute', top: '-30%', left: '50%', transform: 'translateX(-50%)',
          width: 420, height: 320, pointerEvents: 'none',
          background: 'radial-gradient(ellipse, rgba(var(--glow-a),0.22), transparent 70%)' }} />
        <p className="font-mono" style={{ position: 'relative', fontSize: 11.5, letterSpacing: '0.24em',
          textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 18 }}>Let's build together</p>
        <h2 style={{ position: 'relative', fontSize: 'clamp(2rem,4.5vw,3.2rem)',
          lineHeight: 1.08, color: 'var(--text)', marginBottom: 18, fontWeight: 700 }}>
          Have an idea for a<br />calmer kind of app?
        </h2>
        <p style={{ position: 'relative', maxWidth: 460, margin: '0 auto 32px', fontSize: 16,
          lineHeight: 1.6, color: 'var(--muted)' }}>
          Whether you want to collaborate, partner, or simply say hello, we'd love to hear from you.
        </p>
        <Magnetic strength={0.3} style={{ display: 'inline-block', position: 'relative' }}>
          <a href="mailto:support@mtstudioapp.com" style={{ display: 'inline-flex', alignItems: 'center',
            gap: 10, padding: '15px 32px', borderRadius: 999, background: 'var(--primary)',
            color: 'var(--bg)', fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
            Start a conversation →
          </a>
        </Magnetic>
      </div>
    </section>
  );
}

/* ——— Footer ——— */
function Footer() {
  return (
    <footer style={{ position: 'relative', zIndex: 2, borderTop: '1px solid var(--border)',
      padding: '54px 32px 40px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 22, marginBottom: 36 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <img src="assets/logo.png" alt="" style={{ width: 30, height: 30,
            borderRadius: 9, objectFit: 'cover' }} />
            <span style={{ fontWeight: 700, letterSpacing: '0.16em', fontSize: 15 }}>SOUL STUDIO</span>
          </div>
          <nav style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
            {['About', 'Philosophy', 'Products', 'Support'].map((l) => (
              <a key={l} href={`#${l.toLowerCase()}`} className="foot-link" style={{ fontSize: 13,
                letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)',
                textDecoration: 'none', transition: 'color .2s' }}>{l}</a>
            ))}
          </nav>
        </div>
        <div style={{ paddingTop: 26, borderTop: '1px solid var(--border)', display: 'flex',
          justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
            {[
              { label: 'Terms of Service', href: 'https://www.mtstudioapp.com/terms-of-service' },
              { label: 'Privacy Policy',   href: 'https://www.mtstudioapp.com/privacy-policy' },
              { label: 'Legal Notice',     href: 'https://www.mtstudioapp.com/mentions-legales' },
            ].map(({ label, href }) => (
              <a key={label} href={href} target="_blank" rel="noopener noreferrer" className="foot-link"
                style={{ fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: 'var(--muted)', textDecoration: 'none', transition: 'color .2s',
                  padding: '10px 0', minHeight: 44, display: 'inline-flex', alignItems: 'center' }}>{label}</a>
            ))}
          </div>
          <button
            onClick={() => window.postMessage({ type: '__activate_edit_mode' }, '*')}
            aria-label="Open theme switcher"
            className="theme-btn"
            style={{ background: 'none', border: '1px solid rgba(255,255,255,0.15)', cursor: 'pointer',
              borderRadius: 999, padding: '5px 14px', display: 'inline-flex', alignItems: 'center', gap: 7,
              color: 'rgba(255,255,255,0.4)', fontSize: 11.5, letterSpacing: '0.06em',
              transition: 'color .2s, border-color .2s', fontFamily: 'inherit' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--primary)', flexShrink: 0 }} />
            Themes
          </button>
          <p style={{ fontSize: 13, color: 'var(--muted)' }}>© 2026 MT Studio</p>
        </div>
      </div>
      <style>{`
        .foot-link:hover{ color: var(--text) !important; }
        .theme-btn:hover{ color: rgba(255,255,255,0.7) !important; border-color: rgba(255,255,255,0.3) !important; }
      `}</style>
    </footer>
  );
}

Object.assign(window, { SectionLabel, AboutSection, WhySection, AppsSection, PhilosophySection, SupportSection, CTASection, Footer });