const { useState: _useState4, useEffect: _useEffect4, useRef: _useRef4 } = React;

// ─── 7. WHAT YOU RECEIVE ──────────────────────────────────────────────────
function WhatYouReceive() {
  const [ref, inView] = useInView(0.1);
  const social = ['6–12 branded posts', 'Matching captions', 'Bio cleanup', 'Highlight covers', 'Monthly content calendar', 'Canva / posting-ready files'];
  const websites = ['One-page mobile site', 'Services section', 'Contact form', 'Click-to-call', 'Google Maps embed', 'Basic SEO', 'Mobile speed optimization'];

  const Col = ({ title, items, accent, delay }) => (
    <div className="glass" style={{ borderRadius: 20, padding: 30, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(26px)', transition: `opacity 0.7s ease ${delay}ms, transform 0.7s ease ${delay}ms` }}>
      <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 24, fontWeight: 700, color: '#2A0E1A', marginBottom: 22, letterSpacing: '-0.01em' }}>{title}</h3>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: `${accent}14`, border: `1px solid ${accent}3a`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2.8"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
            <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15.5, color: 'rgba(42,14,26,0.72)', lineHeight: 1.5 }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );

  return (
    <section style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>Deliverables</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A' }}>Exactly what you get.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }} className="ps-grid">
          <Col title="For Social Media" items={social} accent="#D60457" delay={120} />
          <Col title="For Websites" items={websites} accent="#6E0240" delay={220} />
        </div>
      </div>
    </section>
  );
}

// ─── 9. WHY WORK WITH US (3x3) ────────────────────────────────────────────
const WHY_REASONS = [
  { title: 'Local business focus', body: 'We only work with small, local businesses — not enterprise clients.' },
  { title: 'Fast turnaround', body: 'Most projects launch within 1–2 weeks of kickoff.' },
  { title: 'Plain-English process', body: 'No jargon, no confusing proposals. Just clear next steps.' },
  { title: 'No long-term contracts', body: "Pay for what you need. Come back when you're ready for more." },
  { title: 'Clear pricing', body: 'Set packages with set deliverables. No scope creep, no surprise invoices.' },
  { title: 'Social + website match', body: 'One brand across every touchpoint customers find you on.' },
  { title: 'Mobile-first design', body: 'Built for the phone first — because thats how customers find you.' },
  { title: 'Bilingual options', body: 'English and Spanish content available, side-by-side or separately.' },
  { title: 'You keep your files', body: 'Your brand, your assets, your accounts. We hand everything over.' },
];

function WhyWorkWithUs() {
  const [ref, inView] = useInView(0.05);
  return (
    <section style={{ padding: '120px 48px', background: 'rgba(255,255,255,0.38)' }}>
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>Why Work With Us</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A' }}>Built for small businesses.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="why-grid">
          {WHY_REASONS.map((r, i) => (
            <div key={i} className="glass" style={{
              borderRadius: 16, padding: 24,
              opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)',
              transition: `opacity 0.6s ease ${i*60}ms, transform 0.6s ease ${i*60}ms`,
            }}>
              <h3 style={{ fontFamily: 'Fraunces, serif', fontSize: 18, fontWeight: 700, color: '#2A0E1A', marginBottom: 8, letterSpacing: '-0.01em' }}>{r.title}</h3>
              <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, lineHeight: 1.55, color: 'rgba(42,14,26,0.6)' }}>{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 10. BILINGUAL ────────────────────────────────────────────────────────
function Bilingual() {
  const [ref, inView] = useInView(0.15);
  return (
    <section style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.8s, transform 0.8s' }}>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginBottom: 28 }}>
          {[{ flag: '🇺🇸', label: 'English' }, { flag: '🇲🇽', label: 'Español' }].map(p => (
            <div key={p.label} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderRadius: 100, background: 'rgba(255,255,255,0.7)', border: '1px solid rgba(42,14,26,0.1)' }}>
              <span style={{ fontSize: 16 }}>{p.flag}</span>
              <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, fontWeight: 600, color: '#2A0E1A' }}>{p.label}</span>
            </div>
          ))}
        </div>
        <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A', marginBottom: 22 }}>
          English + Spanish content available.
        </h2>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 18, lineHeight: 1.7, color: 'rgba(42,14,26,0.65)', marginBottom: 18 }}>
          We create bilingual websites, captions, and promotional posts so you can reach more of your local community — clearly, naturally, and without the awkward auto-translate feel.
        </p>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, color: 'rgba(42,14,26,0.45)', fontStyle: 'italic' }}>
          Serving local small businesses and remote clients.
        </p>
      </div>
    </section>
  );
}

// ─── 11. FOUNDER ──────────────────────────────────────────────────────────
function Founder() {
  const [ref, inView] = useInView(0.15);
  return (
    <section style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 880, margin: '0 auto', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 48, alignItems: 'center', opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.8s, transform 0.8s' }} className="ps-grid">
        <div style={{ width: 200, height: 200, borderRadius: '50%', overflow: 'hidden', justifySelf: 'center', position: 'relative', boxShadow: '0 12px 40px rgba(110,2,64,0.18)' }}>
          <Placeholder zone="founder-photo" aspect="1:1" label="Founder photo" image="assets/founder.png" />
        </div>
        <div>
          <div style={{ display: 'inline-flex', padding: '5px 12px', borderRadius: 100, background: 'rgba(255,199,28,0.12)', border: '1px solid rgba(255,199,28,0.3)', marginBottom: 16 }}>
            <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, color: '#FB761F', letterSpacing: '0.1em', textTransform: 'uppercase' }}>From the Founder</span>
          </div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(28px,3vw,40px)', fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', color: '#2A0E1A', marginBottom: 22 }}>I work directly with every client.</h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: 'rgba(42,14,26,0.65)', marginBottom: 14 }}>
            No middlemen, no account managers, no hand-offs to a junior designer you'll never meet. When you hire DreamCode, you're working with the person actually making your website and your posts.
          </p>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: 'rgba(42,14,26,0.65)', marginBottom: 18 }}>
            No upsells, no monthly traps. Pay once for what you need, get clean files you own forever, come back when you're ready for the next thing. That's the whole studio.
          </p>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 18, fontStyle: 'italic', color: '#6E0240' }}>— The Founder</div>
        </div>
      </div>
    </section>
  );
}

// ─── 12. NEW FAQ ──────────────────────────────────────────────────────────
const NEW_FAQS = [
  { q: 'Do I need to have a logo already?', a: "Not at all. If you don't have one, we can clean up what you've got or build a simple logo treatment as part of your project. Most of our clients come to us with little or no existing branding." },
  { q: 'Can you make posts in Spanish and English?', a: 'Yes — bilingual content is one of our specialties. We can write captions and design posts in either language, or run both side-by-side so you reach your full local community.' },
  { q: 'Do I need to sign a monthly contract?', a: "Never. Every package is a one-time project. You pay for what you need, you keep your files, and you come back when you want to do more. No retainers, no auto-renewals." },
  { q: 'How fast can I get my content or website?', a: "Most projects launch in 1–2 weeks from kickoff. Simpler packages can be done in under a week. We'll give you a clear timeline before any work starts." },
  { q: 'Do you post for me, or just design the content?', a: "By default we design the content and hand it to you in posting-ready files, so you stay in control of your accounts. If you want us to schedule and post for you, we can quote that as a small add-on." },
  { q: 'What do you need from me to start?', a: "Just a few minutes on the quote form below. After that we'll ask for your business basics — what you do, your hours, any photos you have. If you don't have something, we'll work around it." },
];

function FAQItemNew({ faq, index, inView }) {
  const [open, setOpen] = _useState4(false);
  return (
    <div style={{ borderBottom: '1px solid rgba(42,14,26,0.07)', opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(14px)', transition: `opacity 0.6s ease ${index*70}ms, transform 0.6s ease ${index*70}ms` }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', padding: '22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, fontWeight: 500, color: open?'#2A0E1A':'rgba(42,14,26,0.78)', lineHeight: 1.4, flex: 1, transition: 'color 0.2s' }}>{faq.q}</span>
        <div style={{ width: 26, height: 26, borderRadius: '50%', background: open?'rgba(246,46,51,0.14)':'rgba(255,255,255,0.5)', border: `1px solid ${open?'rgba(246,46,51,0.38)':'rgba(42,14,26,0.11)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.3s', transform: open?'rotate(45deg)':'rotate(0)' }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={open?'#F62E33':'rgba(42,14,26,0.45)'} strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
        </div>
      </button>
      <div style={{ maxHeight: open?260:0, opacity: open?1:0, overflow: 'hidden', transition: 'max-height 0.4s ease,opacity 0.3s ease', paddingBottom: open?22:0 }}>
        <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15.5, lineHeight: 1.7, color: 'rgba(42,14,26,0.6)' }}>{faq.a}</p>
      </div>
    </div>
  );
}

function NewFAQ() {
  const [ref, inView] = useInView(0.1);
  return (
    <section id="faq" style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 740, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 52, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>Questions</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(28px,3vw,42px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A' }}>Honest answers.</h2>
        </div>
        {NEW_FAQS.map((faq, i) => <FAQItemNew key={i} faq={faq} index={i} inView={inView} />)}
      </div>
    </section>
  );
}

window.WhatYouReceive = WhatYouReceive;
window.WhyWorkWithUs = WhyWorkWithUs;
window.Bilingual = Bilingual;
window.Founder = Founder;
window.NewFAQ = NewFAQ;