/* global React, IconShieldCheck, IconTarget, IconCompass, IconLayers, IconStar, IconQuote,
   IconArrowRight, IconArrowUpRight, IconLeaf, IconLock, IconHeart, IconCheck, SITE */

const MID_ICON = {
  Target:      <IconTarget size={20} />,
  Compass:     <IconCompass size={20} />,
  ShieldCheck: <IconShieldCheck size={20} />,
  Layers:      <IconLayers size={20} />,
  Lock:        <IconLock size={16} />,
  Heart:       <IconHeart size={16} />,
  Check:       <IconCheck size={16} />,
};

// ============================================================
// WHY TRUST US
// ============================================================
const WhyTrust = () => {
  const points = SITE.whyTrust.points;

  return (
    <section id="why" className="section section-soft">
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start',
        }} className="why-grid">

          <div>
            <div className="eyebrow-accent" style={{ marginBottom: 18 }}>Why students trust us</div>
            <h2 className="display-lg" style={{ marginBottom: 24, maxWidth: 480 }}>
              Counselling that takes your{' '}
              <span className="serif-italic">specific life</span>{' '}
              into account.
            </h2>
            <p className="body-lg" style={{ maxWidth: 460, marginBottom: 40 }}>
              We don&apos;t sell the highest‑rank college. We help you pick the college that gives you the best four years and the best next ten.
            </p>

            {/* Editorial proof panel — shown only when a pull quote is set */}
            {SITE.whyTrust.pullQuote && (
              <div style={{
                padding: 32,
                background: 'var(--color-canvas)',
                border: '1px solid var(--color-hairline)',
                borderRadius: 24,
              }}>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
                  fontSize: 22, lineHeight: 1.35, color: 'var(--color-ink)',
                  letterSpacing: '-0.3px', marginBottom: 24,
                }}>
                  &ldquo;{SITE.whyTrust.pullQuote.text}&rdquo;
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 100,
                    background: SITE.whyTrust.pullQuote.grad,
                    color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12,
                  }}>{SITE.whyTrust.pullQuote.initials}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, color: 'var(--color-ink)' }}>
                      {SITE.whyTrust.pullQuote.name}
                    </div>
                    <div className="caption" style={{ fontSize: 12 }}>
                      {SITE.whyTrust.pullQuote.tag}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {points.map((p, i) => (
              <div key={p.title} style={{
                display: 'grid',
                gridTemplateColumns: '52px 1fr',
                gap: 20,
                padding: '24px 8px',
                borderTop: i === 0 ? '1px solid var(--color-hairline)' : '1px solid var(--color-hairline-soft)',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 100,
                  background: 'var(--color-canvas)',
                  border: '1px solid var(--color-hairline)',
                  color: 'var(--color-ink)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginTop: 4,
                }}>{MID_ICON[p.icon]}</div>
                <div>
                  <div className="title-md" style={{ fontSize: 17, marginBottom: 6 }}>{p.title}</div>
                  <p className="body-sm" style={{ maxWidth: 440 }}>{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .why-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// COUNSELLORS
// ============================================================
const Counsellors = () => {
  const team = SITE.counsellors;

  return (
    <section id="counsellors" className="section">
      <div className="container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'end',
          marginBottom: 56, gap: 32, flexWrap: 'wrap',
        }}>
          <div>
            <div className="eyebrow-accent" style={{ marginBottom: 18 }}>Your counsellors</div>
            <h2 className="display-lg" style={{ maxWidth: 540 }}>
              People who&apos;ve sat in your{' '}
              <span className="serif-italic">exact</span>{' '}
              chair.
            </h2>
          </div>
          <p className="body-md" style={{ maxWidth: 360 }}>
            Every guidance session is led by someone who has personally been through JEE or BITSAT at a top program.
          </p>
        </div>

        <div className="counsellors-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
        }}>
          {team.map((m) => (
            <div key={m.name} className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column' }}>
              <div style={{
                width: 56, height: 56, borderRadius: 100,
                background: m.grad,
                color: 'white', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 20,
              }}>{m.initials}</div>
              <div className="title-md" style={{ fontSize: 16, marginBottom: 4 }}>{m.name}</div>
              <div className="caption" style={{ marginBottom: 4, fontSize: 12 }}>{m.role}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--color-primary)', marginBottom: 18, letterSpacing: '0.02em' }}>
                {m.tag}
              </div>
              <p className="body-sm" style={{ fontSize: 13, lineHeight: 1.5 }}>{m.bio}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .counsellors-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .counsellors-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// TESTIMONIALS
// ============================================================
const Testimonials = () => {
  const items = SITE.testimonials;

  return (
    <section id="stories" className="section section-soft">
      <div className="container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'end',
          marginBottom: 56, gap: 32, flexWrap: 'wrap',
        }}>
          <div>
            <div className="eyebrow-accent" style={{ marginBottom: 18 }}>Stories</div>
            <h2 className="display-lg" style={{ maxWidth: 540 }}>
              Student{' '}
              <span className="serif-italic">stories.</span>
            </h2>
          </div>
        </div>

        <div className="testimonials-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {items.map((t, i) => (
            <div key={i} className="card" style={{
              padding: 28,
              background: 'var(--color-canvas)',
              display: 'flex', flexDirection: 'column',
            }}>
              <IconQuote size={20} style={{ color: 'var(--color-primary)', marginBottom: 18, opacity: 0.7 }} />
              <p style={{
                fontFamily: 'var(--font-sans)',
                fontSize: t.size === 'lg' ? 16 : 15,
                lineHeight: 1.55,
                color: 'var(--color-ink)',
                marginBottom: 28,
                flexGrow: 1,
              }}>
                {t.quote}
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 18, borderTop: '1px solid var(--color-hairline-soft)' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 100,
                  background: t.grad,
                  color: 'white', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  {t.name.split(' ').map((s) => s[0]).join('').slice(0, 2)}
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, color: 'var(--color-ink)' }}>
                    {t.name}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--color-primary)', marginTop: 2 }}>
                    {t.tag}
                  </div>
                  <div className="caption" style={{ fontSize: 11, marginTop: 2 }}>{t.exam}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .testimonials-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

// ============================================================
// PRICING
// ============================================================
const Pricing = () => {
  const plans = SITE.plans;
  return (
    <section id="pricing" className="section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow-accent" style={{ marginBottom: 14 }}>Pricing</div>
          <h2 className="display-lg" style={{ marginBottom: 16 }}>
            Simple, transparent pricing
          </h2>
          <p className="body-md" style={{ color: 'var(--color-body)', maxWidth: 480, margin: '0 auto' }}>
            Pick the plan that matches your exams. One-time payment — no subscriptions, no hidden fees.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 20,
          alignItems: 'start',
        }}>
          {plans.map((plan) => (
            <div key={plan.id} style={{
              position: 'relative',
              background: plan.popular ? 'var(--color-surface-dark)' : 'var(--color-canvas)',
              border: plan.popular ? '2px solid var(--color-primary)' : '1px solid var(--color-hairline)',
              borderRadius: 24,
              padding: 28,
              display: 'flex',
              flexDirection: 'column',
              gap: 20,
              transition: 'box-shadow 200ms',
            }}>
              {plan.popular && (
                <div style={{
                  position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)',
                  background: 'var(--color-primary)', color: 'var(--color-on-primary)',
                  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  padding: '4px 14px', borderRadius: 100,
                }}>Most popular</div>
              )}

              {/* header */}
              <div>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: plan.popular ? 'var(--color-primary)' : 'var(--color-muted)',
                  marginBottom: 8,
                }}>{plan.tag}</div>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 700,
                  color: plan.popular ? 'var(--color-on-dark)' : 'var(--color-ink)',
                  marginBottom: 12,
                }}>{plan.name}</div>
                {plan.originalPrice && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 500,
                      textDecoration: 'line-through',
                      color: plan.popular ? 'rgba(255,255,255,0.45)' : 'var(--color-muted)',
                    }}>₹{plan.originalPrice.toLocaleString('en-IN')}</span>
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
                      letterSpacing: '0.05em', textTransform: 'uppercase',
                      background: plan.popular ? 'rgba(255,255,255,0.15)' : 'var(--color-primary-soft)',
                      color: plan.popular ? '#fff' : 'var(--color-primary)',
                      padding: '2px 8px', borderRadius: 100,
                    }}>{Math.round((1 - plan.price / plan.originalPrice) * 100)}% off</span>
                  </div>
                )}
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{
                    fontFamily: 'var(--font-sans)', fontSize: 38, fontWeight: 700,
                    letterSpacing: '-1.5px',
                    color: plan.popular ? 'var(--color-on-dark)' : 'var(--color-ink)',
                  }}>₹{plan.price.toLocaleString('en-IN')}</span>
                  <span style={{
                    fontFamily: 'var(--font-sans)', fontSize: 13,
                    color: plan.popular ? 'var(--color-on-dark-soft)' : 'var(--color-muted)',
                  }}>one-time</span>
                </div>
              </div>

              {/* features */}
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {plan.features.map((f) => (
                  <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <span style={{
                      width: 16, height: 16, borderRadius: 100, flexShrink: 0, marginTop: 1,
                      background: plan.popular ? 'rgba(247,242,232,0.12)' : 'var(--color-primary-soft)',
                      color: plan.popular ? 'var(--color-primary)' : 'var(--color-primary)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <IconCheck size={9} />
                    </span>
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.5,
                      color: plan.popular ? 'var(--color-on-dark-soft)' : 'var(--color-body)',
                    }}>{f}</span>
                  </li>
                ))}
              </ul>

              {/* CTA */}
              <a
                href="#/counselling"
                className={plan.popular ? 'btn btn-accent' : 'btn btn-secondary'}
                style={{ textAlign: 'center', justifyContent: 'center', marginTop: 'auto' }}
              >
                Get started
                <IconArrowRight size={15} />
              </a>
            </div>
          ))}
        </div>

        <p style={{
          textAlign: 'center', marginTop: 28,
          fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--color-muted)',
        }}>
          Not sure which plan fits? <a href="https://wa.me/919411306517" target="_blank" rel="noreferrer" style={{ color: 'var(--color-primary)' }}>Ask us on WhatsApp</a> and we'll help you choose.
        </p>
      </div>
    </section>
  );
};

// ============================================================
// CTA BAND
// ============================================================
const CTA = () => {
  return (
    <section className="section-dark" style={{ padding: '120px 0' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 0.9fr',
          gap: 80, alignItems: 'center',
        }} className="cta-grid">
          <div>
            <div className="eyebrow" style={{ color: 'var(--color-primary)', marginBottom: 24 }}>
              Guidance slots filling for 2026
            </div>
            <h2 className="display-xl" style={{ color: 'var(--color-on-dark)', marginBottom: 24, fontSize: 56, lineHeight: 1.05 }}>
              The right college guidance can{' '}
              <span className="serif-italic" style={{ color: 'var(--color-primary)' }}>change your trajectory.</span>
            </h2>
            <p className="body-lg" style={{ color: 'var(--color-on-dark-soft)', maxWidth: 520, marginBottom: 40 }}>
              Fill the form in seven minutes. Pay securely via UPI. Your slot is confirmed within an hour and your counsellor will reach out to schedule your 30-minute guidance call.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#/counselling" className="btn btn-accent btn-lg">
                Get college guidance
                <IconArrowRight size={16} />
              </a>
              <a href="#how" className="btn btn-on-dark-outline btn-lg">
                How it works
              </a>
            </div>
          </div>

          {/* Trust strip */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
            border: '1px solid rgba(247,242,232,0.08)',
            borderRadius: 24,
            overflow: 'hidden',
          }}>
            {SITE.ctaTrust.map((t, i) => (
              <div key={i} style={{
                padding: 28,
                borderRight: i % 2 === 0 ? '1px solid rgba(247,242,232,0.08)' : 'none',
                borderBottom: i < 2 ? '1px solid rgba(247,242,232,0.08)' : 'none',
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 100,
                  background: 'rgba(247,242,232,0.08)',
                  color: 'var(--color-on-dark)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 16,
                }}>{MID_ICON[t.icon]}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--color-on-dark)', marginBottom: 4 }}>
                  {t.k}
                </div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--color-on-dark-soft)', lineHeight: 1.5 }}>
                  {t.v}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .cta-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

// ============================================================
// FAQ
// ============================================================
const FAQ = () => {
  const qs = SITE.faq;

  const [openIdx, setOpenIdx] = React.useState(0);

  return (
    <section id="faq" className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }} className="faq-grid">
          <div>
            <div className="eyebrow-accent" style={{ marginBottom: 18 }}>FAQ</div>
            <h2 className="display-lg">
              Questions students{' '}
              <span className="serif-italic">actually</span>{' '}
              ask us.
            </h2>
          </div>
          <div>
            {qs.map((item, i) => (
              <div key={item.q} style={{
                borderTop: '1px solid var(--color-hairline)',
                borderBottom: i === qs.length - 1 ? '1px solid var(--color-hairline)' : 'none',
              }}>
                <button
                  onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
                  style={{
                    width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    padding: '24px 0', background: 'transparent', border: 0, cursor: 'pointer',
                    color: 'var(--color-ink)', textAlign: 'left',
                  }}
                >
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 500, letterSpacing: '-0.2px' }}>
                    {item.q}
                  </span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 100,
                    border: '1px solid var(--color-hairline)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--color-ink)',
                    transition: 'transform 200ms ease-out',
                    transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0)',
                    flexShrink: 0,
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: openIdx === i ? 240 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 280ms ease-out, padding 200ms ease-out',
                  paddingBottom: openIdx === i ? 24 : 0,
                }}>
                  <p className="body-md" style={{ maxWidth: 580 }}>{item.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
};

window.WhyTrust = WhyTrust;
window.Counsellors = Counsellors;
window.Testimonials = Testimonials;
window.Pricing = Pricing;
window.CTA = CTA;
window.FAQ = FAQ;