/* ── v4 Sections Part 2: Testimonials, Projects (w/ Modal), HireBanner, Contact, Footer, FloatingActions ── */

/* Testimonials section removed */

/* ── Project Data ── */
const PROJECT_DATA = [
{
  title: 'E-Commerce Funnel Optimization', category: 'Business Analysis',
  image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=450&fit=crop&auto=format&q=75',
  technologies: ['MySQL', 'CTEs', 'Window Functions', 'Funnel Analysis'],
  metric: '60%', metricLabel: 'Bounce Rate Identified',
  question: 'Where are users dropping off, and which segments should receive more retention spend?',
  problem: 'Marketing spend decisions lacked clear funnel visibility across 4 product lines and 12 months of session data.',
  method: 'Used SQL CTEs and window functions to compute stage-by-stage conversion and compare test vs control behavior.',
  result: 'Identified a 60% landing-page bounce rate and proved returning users converted at higher rates across the funnel.',
  impact: 'Recommended retention-focused spend reallocation to high-intent segments.',
  caseStudy: {
    problem: ['Marketing spend decisions lacked clear funnel visibility.', 'Stakeholders could not see where users dropped off across 4 product lines and 12 months of session data.', 'Retention and acquisition budgets were being split without supporting evidence.'],
    approach: ['Pulled session-level data into MySQL and modeled stage-by-stage conversion with CTEs', 'Used window functions to compare test vs control cohorts at each funnel stage', 'Segmented sessions by new vs returning users and by product line', 'Documented assumptions, edge cases, and the SQL logic for stakeholder review'],
    results: ['Identified a 60% landing-page bounce rate as the dominant funnel leak', 'Showed returning users converted at materially higher rates than first-time visitors', 'Mapped the friction points by product line, not just site-wide averages', 'Delivered a one-page summary the marketing lead could act on immediately'],
    businessImpact: 'Recommended retention-focused spend reallocation toward returning-user segments and a landing page rebuild for the worst-performing funnels.' },
  githubUrl: 'https://github.com/Rajdanej01'
},
{
  title: 'Operations Demand Forecasting', category: 'Operations Analytics',
  image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=450&fit=crop&auto=format&q=75',
  technologies: ['Python', 'ARIMA', 'Holt-Winters', 'Forecast Validation'],
  metric: '90%', metricLabel: 'Forecast Accuracy',
  question: 'How can operations teams anticipate demand and reduce fulfillment risk?',
  problem: 'Planning decisions needed better demand visibility across SKUs and time horizons.',
  method: 'Compared Holt-Winters and ARIMA forecasting methods with configurable forecast horizons and overlay plots.',
  result: 'Produced overlay forecast plots and exportable CSV outputs that helped stakeholders validate trends.',
  impact: 'Helped stakeholders plan fulfillment more proactively and reduce stockout risk.',
  caseStudy: {
    problem: ['Planning was reactive — stockouts and overstock surfaced after the fact.', 'There was no shared way to compare forecast methods or validate them against historical data.', 'Stakeholders needed configurable outputs they could trust, not a black box.'],
    approach: ['Built a Python forecasting workflow comparing ARIMA and Holt-Winters', 'Made horizon, seasonality, and validation window configurable per run', 'Generated 12-period overlay plots so stakeholders could see fit vs actual', 'Exported clean CSVs for downstream planning tools'],
    results: ['Reached 90% forecast accuracy on validation periods', 'Visualized method-vs-method tradeoffs for non-technical stakeholders', 'Made forecast runs reproducible with documented inputs and assumptions', 'Eliminated guesswork from monthly demand planning conversations'],
    businessImpact: 'Operations team began validating forecast assumptions weekly instead of monthly, and planning conversations moved from "what happened" to "what is most likely next."' },
  githubUrl: 'https://github.com/Rajdanej01'
},
{
  title: 'CRM & B2B Account Operations', category: 'Operations Analytics',
  image: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=800&h=450&fit=crop&auto=format&q=75',
  technologies: ['Excel VBA', 'CRM Design', 'Demand Forecasting', 'Account Segmentation'],
  metric: '95%', metricLabel: 'Fulfillment Maintained',
  question: 'How can a growing B2B operation replace paper tracking with a repeatable CRM workflow?',
  problem: 'Paper-based account tracking caused fragmented visibility across 50+ distributors.',
  method: 'Built a centralized CRM-style workflow with demand tracking, reorder logic, and account segmentation.',
  result: 'Centralized 50+ B2B accounts, supported 95% fulfillment, reduced stockouts by 22%, and improved repeat business by 37%.',
  impact: 'Operations team gained reliable account-level visibility and a repeatable reorder process.',
  caseStudy: {
    problem: ['Account tracking lived on paper across 50+ distributors.', 'Reorder timing was based on memory, not data — leading to stockouts and missed repeat sales.', 'There was no way to see which accounts were healthy, slipping, or at risk.'],
    approach: ['Designed a CRM-style workflow in Excel/VBA covering accounts, orders, and reorder cadence', 'Built demand forecasting tied to historical purchase patterns per account', 'Segmented accounts by recency and frequency to prioritize outreach', 'Trained the operations team on the workflow with documented SOPs'],
    results: ['Maintained 95% order fulfillment across the active distributor network', 'Reduced stockouts by 22% through reorder logic and demand forecasting', 'Grew the active B2B network by 21% in the same period', 'Improved repeat business by 37% via prioritized outreach to healthy accounts'],
    businessImpact: 'A founding-team operations function moved from spreadsheet chaos to a repeatable workflow that scaled with the business — and produced the metrics leadership used for planning.' },
  githubUrl: 'https://github.com/Rajdanej01'
},
{
  title: 'Marketing ROI & Conversion Friction Analysis', category: 'Data & BI',
  image: 'https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=800&h=450&fit=crop&auto=format&q=75',
  technologies: ['GA4', 'SEMrush', 'Cohort Analysis', 'Power BI'],
  metric: '+25%', metricLabel: 'Marketing ROI',
  question: 'Which channels and customer journeys are actually driving ROI?',
  problem: 'Marketing attribution and conversion friction were unclear — budget decisions lacked evidence.',
  method: 'Integrated GA4 and SEMrush datasets to map user journeys and isolate channel performance.',
  result: 'Improved marketing ROI by 25% and grew organic traffic from 15K to 21.3K visitors in 3 months.',
  impact: 'Recommended budget reallocation toward stronger channels and removed friction in conversion flows.',
  caseStudy: {
    problem: ['Marketing attribution leaned on last-click only.', 'Channels were judged by clicks and impressions, not by their contribution to conversions.', 'Conversion friction points were anecdotal, not documented.'],
    approach: ['Pulled GA4 sessions and SEMrush keyword data into a unified model', 'Mapped user journeys end-to-end and ran cohort analysis on conversion paths', 'Built a Power BI dashboard the marketing team could use without help', 'Diagnosed the highest-impact friction points and prioritized them by effort vs gain'],
    results: ['25% improvement in marketing ROI within one quarter', '42% organic traffic growth, from 15K to 21.3K visitors over 3 months', 'Documented the top 3 conversion friction points with recommended fixes', 'Replaced gut-feel budget arguments with a shared performance view'],
    businessImpact: 'Budget decisions started with the dashboard. Channel mix shifted toward the routes the data supported, and the team kept the dashboard as their weekly source of truth.' },
  githubUrl: 'https://github.com/Rajdanej01'
}];

window.PROJECT_DATA = PROJECT_DATA;

/* ── Case Study Modal ── */
function CaseStudyModal({ project, onClose }) {
  const p = project;
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    return () => {document.body.style.overflow = '';window.removeEventListener('keydown', onKey);};
  }, []);

  const sectionIcon = (icon, label, color) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
      {icon}
      <h3 style={{ fontSize: 18, fontWeight: 700, color: C.white, margin: 0 }}>{label}</h3>
    </div>;


  return (
    <div role="dialog" aria-modal="true" onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center', overflowY: 'auto', padding: '40px 16px'
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: C.bgCard, borderRadius: 20, border: `1px solid ${C.border}`,
        maxWidth: 760, width: '100%', position: 'relative', animation: 'modalIn 0.3s ease-out'
      }}>
        {/* Close */}
        <button onClick={onClose} className="btn-base btn-ghost btn-icon-size" style={{ position: 'absolute', top: 16, right: 16, zIndex: 2 }}>{Icons.close(20, C.textMuted)}</button>

        {/* Image */}
        <div style={{ aspectRatio: '16/9', overflow: 'hidden', borderRadius: '20px 20px 0 0' }}>
          <img src={p.image} alt={p.title} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>

        <div style={{ padding: '28px 32px 32px' }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 12, padding: '3px 10px', borderRadius: 6, background: C.purpleSubtle, color: C.purpleLight, fontWeight: 600 }}>{p.category}</span>
            <span style={{ fontSize: 12, padding: '3px 10px', borderRadius: 6, background: 'rgba(45,212,191,0.1)', color: C.teal, fontWeight: 700 }}>{p.metric} {p.metricLabel}</span>
          </div>
          <h2 style={{ fontSize: 24, fontWeight: 800, color: C.white, marginBottom: 24 }}>{p.title}</h2>

          {/* Sections */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <div>
              {sectionIcon(Icons.target(18, C.teal), 'The Problem', C.teal)}
              {p.caseStudy.problem.map((t, i) => <p key={i} style={{ color: C.textMuted, fontSize: 14, lineHeight: 1.7, marginBottom: 8 }}>{t}</p>)}
            </div>
            <div>
              {sectionIcon(Icons.microscope(18, C.purple), 'My Approach', C.purple)}
              <ul style={{ margin: 0, paddingLeft: 18 }}>
                {p.caseStudy.approach.map((t, i) => <li key={i} style={{ color: C.textMuted, fontSize: 14, lineHeight: 1.7, marginBottom: 4 }}>{t}</li>)}
              </ul>
            </div>
            <div>
              {sectionIcon(Icons.chart(18, C.green), 'Results', C.green)}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {p.caseStudy.results.map((t, i) =>
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 14, color: C.textMuted, lineHeight: 1.6 }}>
                    <span style={{ color: C.teal, fontWeight: 700, flexShrink: 0 }}>{i + 1}.</span>{t}
                  </div>
                )}
              </div>
            </div>
            <div>
              {sectionIcon(Icons.briefcase(18, C.gold), 'Business Impact', C.gold)}
              <p style={{ color: C.textMuted, fontSize: 14, lineHeight: 1.7 }}>{p.caseStudy.businessImpact}</p>
            </div>
          </div>

          {/* Tech + buttons */}
          <div style={{ marginTop: 24, paddingTop: 20, borderTop: `1px solid ${C.border}` }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
              {p.technologies.map((t) => <span key={t} className="skill-tag" style={{ fontSize: 12 }}>{t}</span>)}
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              {p.githubUrl && <Btn href={p.githubUrl} variant="outline" size="sm" icon={Icons.github(14, C.textMuted)}>View Code</Btn>}
            </div>
          </div>
        </div>
      </div>
    </div>);

}
window.CaseStudyModal = CaseStudyModal;

/* ── Project Card v4 ── */
function ProjectCardV4({ project, onCaseStudy }) {
  const [hov, setHov] = React.useState(false);
  const p = project;
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{
      background: C.bgCard, borderRadius: 16, overflow: 'hidden',
      border: `1px solid ${hov ? 'rgba(124,58,237,0.35)' : C.border}`,
      boxShadow: hov ? `0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,58,237,0.12)` : `0 0 0 1px rgba(124,58,237,0.06)`,
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      transform: hov ? 'translateY(-8px) scale(1.01)' : 'none'
    }}>
      <div style={{ aspectRatio: '16/9', overflow: 'hidden', position: 'relative' }}>
        <img src={p.image} alt={p.title} loading="lazy" decoding="async" style={{
          width: '100%', height: '100%', objectFit: 'cover',
          transition: 'transform 0.6s', transform: hov ? 'scale(1.06)' : 'scale(1)',
          filter: hov ? 'brightness(1.1)' : 'brightness(0.85)'
        }} />
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(to top, ${C.bgCard} 0%, transparent 60%)` }}></div>
        <span style={{ position: 'absolute', top: 12, left: 12, fontSize: 11, padding: '4px 10px', borderRadius: 6, background: C.purpleSubtle, color: C.purpleLight, fontWeight: 600, backdropFilter: 'blur(8px)', border: `1px solid rgba(124,58,237,0.15)` }}>{p.category}</span>
        <span style={{ position: 'absolute', top: 12, right: 12, display: 'flex', alignItems: 'center', gap: 4, padding: '5px 12px', borderRadius: 8, background: 'rgba(12,18,34,0.7)', backdropFilter: 'blur(12px)', border: '1px solid rgba(45,212,191,0.25)' }}>
          <span style={{ fontSize: 15, fontWeight: 800, color: C.teal }}>{p.metric}</span>
          <span style={{ fontSize: 11, color: C.textDim }}>{p.metricLabel}</span>
        </span>
        {hov &&
        <button onClick={() => {track('Project Case Study Opened', { project: p.title });onCaseStudy(p);}} style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(12,18,34,0.5)', border: 'none', cursor: 'pointer'
        }}>
            <div style={{ padding: '10px 20px', borderRadius: 10, background: `rgba(124,58,237,0.9)`, color: C.white, fontSize: 13, fontWeight: 600, boxShadow: `0 4px 20px ${C.purpleGlow}` }}>View Case Study</div>
          </button>
        }
      </div>
      <div style={{ padding: '18px 20px 22px' }}>
        <h3 style={{ fontSize: 17, fontWeight: 700, color: C.white, marginBottom: 6 }}>{p.title}</h3>
        <p style={{ fontSize: 13, color: C.textDim, lineHeight: 1.5, marginBottom: 4 }}>{p.problem.split('.')[0]}.</p>
        <p style={{ fontSize: 13, color: C.textMuted, lineHeight: 1.5, marginBottom: 4 }}>{p.method.split('.')[0]}.</p>
        <p style={{ fontSize: 13, color: C.teal, lineHeight: 1.5, marginBottom: 14, fontWeight: 500 }}>{p.result.split(',')[0]}.</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
          {p.technologies.map((t) => <span key={t} style={{ fontSize: 11, padding: '3px 10px', borderRadius: 6, background: C.purpleSubtle, color: C.purpleLight, border: '1px solid rgba(124,58,237,0.12)', fontWeight: 500 }}>{t}</span>)}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn href={p.githubUrl} variant="outline" size="sm" icon={Icons.github(13, C.textMuted)} onClick={() => track('GitHub Clicked', { project: p.title })}>Code</Btn>
          <button onClick={() => {track('Project Case Study Opened', { project: p.title });onCaseStudy(p);}} className="btn-base btn-outline btn-sm">Case Study</button>
        </div>
      </div>
    </div>);

}
window.ProjectCardV4 = ProjectCardV4;

/* ── Projects Section ── */
function Projects() {
  const categories = ['All', ...new Set(PROJECT_DATA.map((p) => p.category))];
  const [filter, setFilter] = React.useState('All');
  const [modal, setModal] = React.useState(null);
  const ghStats = useGitHubStats('Rajdanej01');
  const filtered = filter === 'All' ? PROJECT_DATA : PROJECT_DATA.filter((p) => p.category === filter);

  return (
    <section id="projects" style={{ padding: '100px 24px', background: C.bgSurface }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle label="Projects That Moved" highlight="the Business" sub="Operations and business analytics work with measurable outcomes. Click any card for the full case study." />

        {/* GitHub Stats Strip */}
        {ghStats &&
        <Reveal>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 20, marginBottom: 32, padding: '12px 20px', background: C.bgCard, borderRadius: 10, border: `1px solid ${C.border}` }}>
              <span style={{ fontSize: 13, color: C.textMuted, display: 'flex', alignItems: 'center', gap: 6 }}>{Icons.pkg(14, C.purple)} <strong style={{ color: C.text }}>{ghStats.repoCount}</strong> Public Repos</span>
              <span style={{ fontSize: 13, color: C.textMuted, display: 'flex', alignItems: 'center', gap: 6 }}>{Icons.star(14, C.gold)} <strong style={{ color: C.text }}>{ghStats.stars}</strong> Stars</span>
              <span style={{ fontSize: 13, color: C.textMuted, display: 'flex', alignItems: 'center', gap: 6 }}>🐍 <strong style={{ color: C.text }}>{ghStats.topLang}</strong> (primary)</span>
              {ghStats.lastUpdate && <span style={{ fontSize: 13, color: C.textMuted, display: 'flex', alignItems: 'center', gap: 6 }}>🔄 Updated <strong style={{ color: C.text }}>{new Date(ghStats.lastUpdate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</strong></span>}
            </div>
          </Reveal>
        }

        <FilterTabs categories={categories} active={filter} onChange={setFilter} />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 340px), 1fr))', gap: 24 }}>
          {filtered.map((p, i) =>
          <Reveal key={p.title} delay={i * 0.08}>
              <ProjectCardV4 project={p} onCaseStudy={setModal} />
            </Reveal>
          )}
        </div>

        <Reveal delay={0.2}>
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <Btn href="https://github.com/Rajdanej01" variant="outline" size="lg" icon={Icons.github(18, C.textMuted)}>Explore All Repos on GitHub</Btn>
          </div>
        </Reveal>
      </div>

      {modal && <CaseStudyModal project={modal} onClose={() => setModal(null)} />}
    </section>);

}
window.Projects = Projects;

/* ── Hire Banner ── */
function HireBanner() {
  return (
    <section style={{ padding: '64px 24px', background: 'linear-gradient(135deg, rgba(124,58,237,0.1), rgba(45,212,191,0.05))', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%)', pointerEvents: 'none' }}></div>
      <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(124,58,237,0.12)', border: '1px solid rgba(124,58,237,0.2)', borderRadius: 20, padding: '5px 14px', marginBottom: 16 }}>
            {Icons.sparkles(14, C.purple)}
            <span style={{ fontSize: 12, fontWeight: 600, color: C.purpleLight }}>Open to Work</span>
          </div>
          <h2 style={{ fontSize: 'clamp(24px, 3.5vw, 34px)', fontWeight: 800, color: C.white, marginBottom: 12, lineHeight: 1.25 }}>
            Messy workflows, unclear reporting?{' '}
            <span style={{ background: `linear-gradient(135deg, ${C.purple}, ${C.teal})`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Let's make it decision-ready.</span>
          </h2>
          <p style={{ color: C.textMuted, fontSize: 15, marginBottom: 28, maxWidth: 520, marginInline: 'auto', lineHeight: 1.7 }}>
            I build clear reporting systems, process insights, and operational dashboards so teams move faster with less guesswork.
          </p>
          <Btn onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>Get in Touch</Btn>
        </Reveal>
      </div>
    </section>);

}
window.HireBanner = HireBanner;

/* ── Contact ── */
function Contact() {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [status, setStatus] = React.useState(null);
  const [errors, setErrors] = React.useState({});
  const [focused, setFocused] = React.useState(null);
  const [shake, setShake] = React.useState(false);
  const maxMsg = 500;

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.email.trim()) e.email = 'Required';else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Invalid email';
    if (!form.message.trim()) e.message = 'Required';else
    if (form.message.trim().length < 10) e.message = 'At least 10 characters';
    return e;
  };

  const handleSubmit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) {setShake(true);setTimeout(() => setShake(false), 600);return;}
    setStatus('sending');
    track('Contact Submitted');
    setTimeout(() => {
      const subject = encodeURIComponent(`Portfolio Contact from ${form.name}`);
      const body = encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\n\n${form.message}`);
      const a = document.createElement('a');
      a.href = `mailto:raajdanej@gmail.com?subject=${subject}&body=${body}`;
      a.rel = 'noopener noreferrer';
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      setStatus('sent');
      setForm({ name: '', email: '', message: '' });
    }, 1200);
  };

  const inputStyle = (field) => ({
    width: '100%', padding: '13px 16px', borderRadius: 10,
    border: `1.5px solid ${errors[field] ? C.red : focused === field ? C.purple : C.border}`,
    background: focused === field ? 'rgba(124,58,237,0.04)' : C.bgSurface,
    color: C.text, fontSize: 15, outline: 'none', transition: 'all 0.25s', boxSizing: 'border-box', fontFamily: 'inherit',
    boxShadow: focused === field ? '0 0 0 3px rgba(124,58,237,0.12)' : 'none'
  });

  return (
    <section id="contact" style={{ padding: '100px 24px', background: C.bg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle label="Start a" highlight="Conversation" sub="Have a business problem, messy workflow, or reporting gap? Send it over. I'll respond with a clear next step." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 360px), 1fr))', gap: 48, maxWidth: 960, margin: '0 auto' }}>
          <Reveal direction="right">
            <div>
              <h3 style={{ fontSize: 20, fontWeight: 700, color: C.white, marginBottom: 12 }}>Let's Connect</h3>
              <p style={{ color: C.textMuted, fontSize: 15, lineHeight: 1.7, marginBottom: 24 }}>Operations question, reporting gap, or a workflow that needs fixing? Send the details and I'll respond with a clear next step.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
                {[
                { icon: Icons.github(20, C.white), label: 'GitHub', sub: '@Rajdanej01', url: 'https://github.com/Rajdanej01', eventName: 'GitHub Clicked' },
                { icon: Icons.linkedin(20, C.white), label: 'LinkedIn', sub: 'rajdanej', url: 'https://www.linkedin.com/in/rajdanej', eventName: 'LinkedIn Clicked' },
                { icon: Icons.mail(20, C.white), label: 'Email', sub: 'raajdanej@gmail.com', url: 'mailto:raajdanej@gmail.com' }].
                map((l) => <ContactLink key={l.label} {...l} />)}
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 13, color: C.teal, background: `${C.teal}11`, padding: '7px 14px', borderRadius: 8, fontWeight: 500 }}>📍 Boston, MA</span>
                <a href="tel:+18572301647" style={{ fontSize: 13, color: C.purpleLight, background: `${C.purpleLight}11`, padding: '7px 14px', borderRadius: 8, fontWeight: 500, textDecoration: 'none' }}>📞 (857) 230-1647</a>
              </div>
            </div>
          </Reveal>

          <Reveal delay={0.15} direction="left">
            <div className={shake ? 'shake-anim' : ''} style={{ background: C.bgCard, borderRadius: 16, border: `1px solid ${C.border}`, padding: 28, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 120, height: 120, borderRadius: '50%', background: 'rgba(124,58,237,0.06)', pointerEvents: 'none' }}></div>
              {status === 'sent' ?
              <div style={{ textAlign: 'center', padding: '48px 20px' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(45,212,191,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="15" stroke={C.teal} strokeWidth="2" className="check-circle-anim" /><polyline points="10,16 14,20 22,12" stroke={C.teal} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" className="check-mark-anim" /></svg>
                  </div>
                  <h3 style={{ fontSize: 20, fontWeight: 700, color: C.white, marginBottom: 8 }}>Message Sent!</h3>
                  <p style={{ color: C.textMuted, fontSize: 14, marginBottom: 16 }}>I typically reply within 24 hours.</p>
                  <button onClick={() => setStatus(null)} className="btn-base btn-ghost btn-sm" style={{ color: C.purple }}>Send Another →</button>
                </div> :

              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div style={{ fontSize: 16, fontWeight: 700, color: C.white, marginBottom: 2 }}>Send a Message</div>
                  {['name', 'email'].map((f) =>
                <div key={f}>
                      <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: C.textMuted, marginBottom: 6, textTransform: 'capitalize' }}>{f} <span style={{ color: C.red }}>*</span></label>
                      <input value={form[f]} autoComplete={f} onChange={(e) => {setForm({ ...form, [f]: e.target.value });setErrors({ ...errors, [f]: undefined });}}
                  onFocus={() => setFocused(f)} onBlur={() => setFocused(null)}
                  placeholder={f === 'email' ? 'your@email.com' : 'Your full name'} style={inputStyle(f)} />
                      {errors[f] && <span style={{ fontSize: 12, color: C.red, marginTop: 4, display: 'block' }}>⚠ {errors[f]}</span>}
                    </div>
                )}
                  <div>
                    <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: C.textMuted, marginBottom: 6 }}>Message <span style={{ color: C.red }}>*</span></label>
                    <textarea value={form.message} autoComplete="off" onChange={(e) => {if (e.target.value.length <= maxMsg + 50) {setForm({ ...form, message: e.target.value });setErrors({ ...errors, message: undefined });}}}
                  onFocus={() => setFocused('message')} onBlur={() => setFocused(null)}
                  placeholder="Describe your project, challenge, or opportunity..." rows={5} style={{ ...inputStyle('message'), resize: 'none' }} />
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
                      {errors.message ? <span style={{ fontSize: 12, color: C.red }}>⚠ {errors.message}</span> : <span></span>}
                      <span style={{ fontSize: 11, color: form.message.length > maxMsg ? '#f59e0b' : C.textDim }}>{form.message.length} / {maxMsg}</span>
                    </div>
                  </div>
                  <button type="submit" disabled={status === 'sending'} className="btn-base btn-primary btn-md" style={{ width: '100%', justifyContent: 'center', opacity: status === 'sending' ? 0.7 : 1 }}>
                    {status === 'sending' ? <React.Fragment><span className="spinner"></span>Sending…</React.Fragment> : <React.Fragment>{Icons.send(16)} Send Message</React.Fragment>}
                  </button>
                </form>
              }
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}
window.Contact = Contact;

/* ── Contact Link ── */
function ContactLink({ icon, label, sub, url, eventName }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={url} target={url.startsWith('mailto:') || url.startsWith('tel:') ? undefined : '_blank'} rel="noopener noreferrer" onClick={() => eventName && track(eventName)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '12px 16px', borderRadius: 12,
      background: hov ? C.bgCardHover : C.bgCard, border: `1px solid ${hov ? 'rgba(124,58,237,0.25)' : C.border}`,
      textDecoration: 'none', transition: 'all 0.25s', transform: hov ? 'translateX(4px)' : 'none', minHeight: 44
    }}>
      <div style={{ width: 40, height: 40, borderRadius: 10, background: hov ? 'rgba(124,58,237,0.2)' : C.purpleSubtle, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.25s', flexShrink: 0 }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: C.text }}>{label}</div>
        <div style={{ fontSize: 13, color: C.textDim, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sub}</div>
      </div>
      <div style={{ opacity: hov ? 1 : 0, transition: 'opacity 0.2s', flexShrink: 0 }}>{Icons.external(14, C.purple)}</div>
    </a>);

}
window.ContactLink = ContactLink;

/* ── Footer ── */
function FooterSection() {
  const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  return (
    <React.Fragment>
      <div style={{ height: 2, background: 'linear-gradient(90deg, transparent, #7c3aed 30%, #2dd4bf 70%, transparent)' }}></div>
      <footer style={{ padding: '48px 24px 24px', background: C.bg }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', gap: 40, marginBottom: 32 }}>
            {/* Brand */}
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, marginBottom: 10 }}>
                <span style={{ color: C.white }}>Raj</span><span style={{ color: C.purple }}>Danej</span>
              </div>
              <p style={{ fontSize: 13, color: C.textMuted, lineHeight: 1.6, marginBottom: 10, fontWeight: 600 }}>Business Analyst &amp; Operations Analytics Specialist</p>
              <p style={{ fontSize: 13, color: C.textDim, lineHeight: 1.7 }}>I build clear reporting systems, process insights, and operational dashboards that help teams move faster with less guesswork.</p>
            </div>
            {/* Quick Links */}
            <div>
              <h4 style={{ fontSize: 12, fontWeight: 700, color: C.textMuted, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>Quick Links</h4>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[['Home','hero'],['About','about'],['Experience','experience'],['Projects','projects'],['Contact','contact']].map(([l, id]) =>
                <a key={l} href={`#${id}`} onClick={(e) => { e.preventDefault(); go(id); }} style={{ color: C.textDim, fontSize: 13, textDecoration: 'none', textAlign: 'left', minHeight: 24, transition: 'color 0.2s' }}
                onMouseEnter={(e) => e.target.style.color = C.teal} onMouseLeave={(e) => e.target.style.color = C.textDim}>{l}</a>
                )}
              </div>
            </div>
            {/* Contact Info */}
            <div>
              <h4 style={{ fontSize: 12, fontWeight: 700, color: C.textMuted, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>Contact</h4>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <a href="mailto:raajdanej@gmail.com" style={{ color: C.textDim, fontSize: 13, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>{Icons.mail(14, C.textDim)} raajdanej@gmail.com</a>
                <a href="tel:+18572301647" style={{ color: C.textDim, fontSize: 13, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>📞 (857) 230-1647</a>
                <span style={{ color: C.textDim, fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 }}>📍 Boston, MA</span>
                <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
                  <a href="https://www.linkedin.com/in/rajdanej" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" onClick={() => track('LinkedIn Clicked')} style={{ color: C.textDim, fontSize: 13, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>{Icons.linkedin(16, C.textDim)} LinkedIn</a>
                  <a href="https://github.com/Rajdanej01" target="_blank" rel="noopener noreferrer" aria-label="GitHub" onClick={() => track('GitHub Clicked')} style={{ color: C.textDim, fontSize: 13, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>{Icons.github(16, C.textDim)} GitHub</a>
                </div>
              </div>
            </div>
          </div>

          <div style={{ borderTop: `1px solid ${C.border}`, paddingTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <p style={{ color: C.textDim, fontSize: 12 }}>© {new Date().getFullYear()} Raj Danej. All rights reserved.</p>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <span style={{ color: C.textDim, fontSize: 12 }}>Built with React + TypeScript</span>
              <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="btn-base btn-ghost btn-sm" style={{ color: C.textDim, fontSize: 12 }}>Back to top ↑</button>
            </div>
          </div>
        </div>
      </footer>
    </React.Fragment>);

}
window.FooterSection = FooterSection;

/* ── Floating Actions ── */
function FloatingActions() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const h = () => setShow(window.scrollY > 400);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 90,
      display: 'flex', flexDirection: 'column', gap: 10,
      opacity: show ? 1 : 0, transform: show ? 'translateY(0)' : 'translateY(20px)',
      transition: 'all 0.3s', pointerEvents: show ? 'auto' : 'none'
    }}>
      <button onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })} className="btn-base btn-primary btn-icon-size" title="Let's Talk" style={{ width: 48, height: 48, borderRadius: 14, boxShadow: `0 4px 20px ${C.purpleGlow}` }}>{Icons.chat(20)}</button>
      <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="btn-base btn-social-icon btn-icon-size" title="Back to top" style={{ width: 48, height: 48, borderRadius: 14 }}>{Icons.arrowUp(18, C.textMuted)}</button>
    </div>);

}
window.FloatingActions = FloatingActions;