// Home page — all sections + App
const { Button, Card, Badge, Tag, Accordion } = window.KrystalDesignSystem_a15719;

/* ---------------- HERO ---------------- */
function Hero() {
  const scrollY = useParallax();
  return (
    <section style={{ position: 'relative', paddingTop: 72, paddingBottom: 40, overflow: 'hidden' }}>
      {/* brand gradient blob */}
      <div className="float-blob" aria-hidden="true" style={{ position: 'absolute', top: -120, right: -80, width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle at 30% 30%, rgba(29,92,66,0.20), rgba(97,122,85,0.10) 55%, transparent 72%)', filter: 'blur(10px)', transform: `translateY(${scrollY * 0.06}px)`, zIndex: 0 }}></div>
      <div className="container hero-grid" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center', minHeight: 560 }}>
        <div>
          <div data-reveal className="reveal">
            <Badge tone="primary" style={{ height: 30, padding: '0 14px', fontSize: 13 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--success)', display: 'inline-block' }}></span>
              Available for freelance & full-time
            </Badge>
          </div>
          <h1 data-reveal data-delay="1" className="reveal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(44px,7vw,76px)', lineHeight: 1.03, letterSpacing: '-0.03em', margin: '22px 0 0', color: 'var(--text-primary)' }}>
            I design bold brands<br />&amp; build fast<br /><span style={{ position: 'relative', display: 'inline-block' }}>websites<svg viewBox="0 0 220 14" style={{ position: 'absolute', left: 0, bottom: -6, width: '100%', height: 12 }} aria-hidden="true"><path className="underline-draw" d="M2 9 C 60 2, 160 2, 218 8" fill="none" stroke="var(--color-accent)" strokeWidth="4" strokeLinecap="round" /></svg></span>.
          </h1>
          <p data-reveal data-delay="2" className="reveal" style={{ fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.7, color: 'var(--text-secondary)', margin: '26px 0 0', maxWidth: 500 }}>
            I'm Sohail Merchant — a <strong style={{ color: 'var(--text-primary)', fontWeight: 600 }}>graphic designer, UI/UX designer &amp; web developer</strong> in {window.SITE.city}. I turn ambitious ideas into striking visual identities and high-performing responsive websites.
          </p>
          <div data-reveal data-delay="3" className="reveal" style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap' }}>
            <Button size="lg" onClick={() => location.href = 'Contact.html'} trailingIcon={<i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>}>Start a project</Button>
            <Button size="lg" variant="secondary" onClick={() => location.href = 'Work.html'}>View my work</Button>
          </div>
          <div data-reveal data-delay="4" className="reveal" style={{ display: 'flex', gap: 40, marginTop: 48 }}>
            {[['8', '+', 'Years experience'], ['180', '+', 'Projects shipped'], ['70', '+', 'Happy clients']].map(([n, s, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 36, color: 'var(--text-primary)', lineHeight: 1 }}><Counter to={parseInt(n)} suffix={s} /></div>
                <div style={{ fontSize: 13.5, color: 'var(--text-secondary)', marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        {/* portrait panel */}
        <div data-reveal data-delay="2" className="reveal" style={{ position: 'relative' }}>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'linear-gradient(150deg,#1D5C42,#2E6B4E 45%,#617A55)', aspectRatio: '4/5', boxShadow: 'var(--shadow-lg)' }}>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
              {/* portrait placeholder */}
              <svg viewBox="0 0 200 240" style={{ width: '78%', height: 'auto', opacity: 0.9 }} aria-hidden="true">
                <circle cx="100" cy="80" r="46" fill="rgba(255,255,255,0.16)" />
                <path d="M28 240 C 28 168, 172 168, 172 240 Z" fill="rgba(255,255,255,0.16)" />
              </svg>
            </div>
            <div style={{ position: 'absolute', top: 18, left: 18, color: 'rgba(255,255,255,0.72)', fontSize: 12, fontFamily: 'var(--font-heading)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Replace with your photo</div>
          </div>
          {/* floating chips */}
          <div className="float-blob" style={{ position: 'absolute', bottom: 26, left: -24, animationDelay: '1.5s' }}>
            <Card style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: 'color-mix(in srgb, var(--golden-yellow) 22%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i data-lucide="palette" style={{ width: 18, height: 18, color: '#7A5B00' }}></i></div>
              <div><div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>Brand identity</div><div style={{ fontSize: 11.5, color: 'var(--text-secondary)' }}>Logos & systems</div></div>
            </Card>
          </div>
          <div className="float-blob" style={{ position: 'absolute', top: 18, right: -20, animationDelay: '0.6s' }}>
            <Card style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: 'color-mix(in srgb, var(--forest-green) 14%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i data-lucide="code-2" style={{ width: 18, height: 18, color: 'var(--color-primary)' }}></i></div>
              <div><div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>Web dev</div><div style={{ fontSize: 11.5, color: 'var(--text-secondary)' }}>Fast & responsive</div></div>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- TOOLS marquee ---------------- */
function Tools() {
  const tools = [
    ['Adobe Photoshop', 'image'], ['Adobe Illustrator', 'pen-tool'], ['Adobe Premiere Pro', 'clapperboard'],
    ['CorelDRAW', 'shapes'], ['Canva', 'layout-template'], ['CrazyTalk', 'smile'],
  ];
  const row = [...tools, ...tools];
  return (
    <section style={{ padding: '28px 0 8px', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)', background: 'var(--surface-muted)' }}>
      <div className="container" style={{ marginBottom: 18 }}>
        <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Tools I work in daily</span>
      </div>
      <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)', WebkitMaskImage: 'linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)', paddingBottom: 20 }}>
        <div className="marquee">
          {row.map(([name, icon], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, whiteSpace: 'nowrap' }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--surface-card)', border: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i data-lucide={icon} style={{ width: 20, height: 20, color: 'var(--color-primary)' }}></i></div>
              <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 17, color: 'var(--text-primary)' }}>{name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- ABOUT teaser ---------------- */
function AboutTeaser() {
  return (
    <section className="section container">
      <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div data-reveal className="reveal">
          <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--surface-muted)', aspectRatio: '5/4', border: '1px solid var(--border-default)', position: 'relative' }}>
            <svg viewBox="0 0 400 320" style={{ width: '100%', height: '100%' }} aria-hidden="true">
              <rect width="400" height="320" fill="var(--surface-muted)" />
              <circle cx="150" cy="120" r="60" fill="none" stroke="var(--color-primary)" strokeWidth="2" opacity="0.5" />
              <rect x="210" y="150" width="120" height="120" rx="16" fill="none" stroke="var(--color-secondary)" strokeWidth="2" opacity="0.5" />
              <path d="M60 260 L140 200 L220 250" fill="none" stroke="var(--color-accent)" strokeWidth="3" opacity="0.7" />
            </svg>
            <span style={{ position: 'absolute', bottom: 14, left: 16, fontSize: 12, color: 'var(--text-secondary)' }}>Workspace / process photo placeholder</span>
          </div>
        </div>
        <div>
          <SectionHead eyebrow="About & journey" title="A creative professional who ships" />
          <div data-reveal data-delay="1" className="reveal">
            <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--text-secondary)', margin: '0 0 18px' }}>
              For over eight years I've helped startups and established brands look sharp and perform brilliantly. As a <strong style={{ color: 'var(--text-primary)' }}>branding specialist and responsive website designer</strong>, I bridge the gap between beautiful design and clean, fast code.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--text-secondary)', margin: '0 0 26px' }}>
              I obsess over the details others skip — kerning, load time, and the tiny interactions that make a product feel alive. That's the difference between a design that looks good and one that works.
            </p>
            <Button variant="secondary" onClick={() => location.href = 'About.html'} trailingIcon={<i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>}>Read my full story</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- SKILLS ---------------- */
function Skills() {
  const groups = [
    { icon: 'palette', title: 'Graphic Design', desc: 'Logos, brand identity systems, print & packaging, social creatives.', skills: ['Logo design', 'Brand identity', 'Print & packaging', 'Illustration'] },
    { icon: 'layout-dashboard', title: 'UI/UX Design', desc: 'Research-led interfaces, wireframes, prototypes, design systems.', skills: ['Wireframing', 'Prototyping', 'Design systems', 'User flows'] },
    { icon: 'code-2', title: 'Web Development', desc: 'Responsive, accessible, SEO-friendly front-ends that load fast.', skills: ['HTML/CSS/JS', 'Responsive UI', 'WordPress', 'Performance'] },
    { icon: 'megaphone', title: 'Digital Marketing', desc: 'Campaigns, SEO strategy and content that actually converts.', skills: ['SEO strategy', 'Social campaigns', 'Content', 'Analytics'] },
  ];
  return (
    <section className="section" style={{ background: 'var(--surface-muted)', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)' }}>
      <div className="container">
        <SectionHead center eyebrow="What I do" title="Skills that cover the whole journey" sub="From the first sketch of a logo to a deployed, search-optimized website — I handle design and development end to end." />
        <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
          {groups.map((g, i) => (
            <div key={g.title} data-reveal data-delay={String((i % 4) + 1)} className="reveal">
              <Card className="lift" style={{ height: '100%' }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: 'color-mix(in srgb, var(--forest-green) 12%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                  <i data-lucide={g.icon} style={{ width: 24, height: 24, color: 'var(--color-primary)' }}></i>
                </div>
                <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 19, margin: '0 0 8px', color: 'var(--text-primary)' }}>{g.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-secondary)', margin: '0 0 16px' }}>{g.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {g.skills.map(s => <Tag key={s}>{s}</Tag>)}
                </div>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- SERVICES ---------------- */
function Services() {
  const services = [
    { icon: 'sparkles', title: 'Brand identity & logo design', desc: 'A distinctive logo and full identity system — colors, type, and guidelines your team can run with.' },
    { icon: 'monitor-smartphone', title: 'Responsive web design & development', desc: 'Mobile-first websites that look premium and load in the blink of an eye across every device.' },
    { icon: 'figma', title: 'UI/UX design', desc: 'Intuitive product interfaces backed by research, wireframes, and clickable prototypes.' },
    { icon: 'video', title: 'Video editing & motion', desc: 'Promo edits, reels and motion graphics in Premiere Pro and CrazyTalk that grab attention.' },
    { icon: 'trending-up', title: 'Digital marketing & SEO', desc: 'Search-optimized content and campaigns engineered to grow reach and conversions.' },
    { icon: 'printer', title: 'Print & packaging', desc: 'Brochures, packaging, and marketing collateral prepped and press-ready.' },
  ];
  return (
    <section className="section container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20 }}>
        <SectionHead eyebrow="Services" title="How I can help you win" />
        <div data-reveal className="reveal" style={{ marginBottom: 48 }}><Button variant="ghost" onClick={() => location.href = 'Contact.html'} trailingIcon={<i data-lucide="arrow-up-right" style={{ width: 16, height: 16 }}></i>}>Request a quote</Button></div>
      </div>
      <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
        {services.map((s, i) => (
          <div key={s.title} data-reveal data-delay={String((i % 3) + 1)} className="reveal">
            <Card className="lift" style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ width: 46, height: 46, borderRadius: 13, background: 'linear-gradient(135deg, rgba(29,92,66,0.12), rgba(242,183,5,0.14))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={s.icon} style={{ width: 22, height: 22, color: 'var(--color-primary)' }}></i>
              </div>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18, margin: 0, color: 'var(--text-primary)' }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-secondary)', margin: 0 }}>{s.desc}</p>
            </Card>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- TESTIMONIALS ---------------- */
function Testimonials() {
  const items = [
    { q: "Sohail rebranded our studio top to bottom. The new identity and website doubled our enquiries in three months.", n: 'Aisha Kapoor', r: 'Founder, Lumen Interiors' },
    { q: "Rare to find someone equally strong in design and code. He delivered a pixel-perfect, lightning-fast site.", n: 'Rahul Desai', r: 'CEO, NorthStar Fintech' },
    { q: "Professional, fast, and endlessly creative. Our packaging finally looks like the premium product it is.", n: 'Meera Shah', r: 'Marketing Lead, Verdant Foods' },
  ];
  return (
    <section className="section" style={{ background: 'var(--surface-muted)', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)' }}>
      <div className="container">
        <SectionHead center eyebrow="Testimonials" title="Clients I've made look great" />
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {items.map((t, i) => (
            <div key={t.n} data-reveal data-delay={String((i % 3) + 1)} className="reveal">
              <Card style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'flex', gap: 3 }}>{[0,1,2,3,4].map(k => <i key={k} data-lucide="star" style={{ width: 16, height: 16, color: 'var(--color-accent)', fill: 'var(--color-accent)' }}></i>)}</div>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-primary)', margin: 0, fontWeight: 500 }}>"{t.q}"</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
                  <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'linear-gradient(135deg,#1D5C42,#617A55)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontFamily: 'var(--font-heading)' }}>{t.n[0]}</div>
                  <div><div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text-primary)' }}>{t.n}</div><div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{t.r}</div></div>
                </div>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
const FAQ_ITEMS = [
  { title: 'What services does Sohail Merchant offer?', content: "I offer graphic design, logo and brand identity design, UI/UX design, responsive web development, video editing, and digital marketing & SEO — all from Vadodara, India, for clients worldwide." },
  { title: 'How much does a project cost?', content: 'Every project is scoped individually. Logo and branding packages start small; full websites are quoted based on pages, features, and timeline. Share your brief on the contact page for a tailored quote.' },
  { title: 'How long does a typical website take?', content: 'A focused marketing site usually takes 2–4 weeks from kickoff to launch, depending on content readiness and revision rounds. Branding projects run 1–3 weeks.' },
  { title: 'Do you work with clients outside Vadodara or India?', content: 'Absolutely. I collaborate remotely with clients across the globe and am comfortable working across time zones over email, call, and shared design tools.' },
  { title: 'Will my website be SEO and mobile friendly?', content: 'Yes — every site I build is mobile-first, accessible, and optimized for Core Web Vitals and modern (including AI-powered) search from day one.' },
];
function FAQSection() {
  return (
    <section className="section container">
      <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 56, alignItems: 'start' }}>
        <div data-reveal className="reveal">
          <SectionHead eyebrow="FAQ" title="Questions, answered" sub="Everything you might want to know before we start working together." />
          <Button onClick={() => location.href = 'Contact.html'}>Still curious? Ask me</Button>
        </div>
        <div data-reveal data-delay="1" className="reveal"><Accordion items={FAQ_ITEMS} allowMultiple={false} /></div>
      </div>
    </section>
  );
}

/* ---------------- CTA strip ---------------- */
function CTAStrip() {
  return (
    <section className="container" style={{ paddingBottom: 8 }}>
      <div data-reveal className="reveal" style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-xl)', background: 'linear-gradient(135deg,#1D5C42,#2E6B4E 55%,#617A55)', padding: 'clamp(40px,6vw,72px)', textAlign: 'center' }}>
        <div className="float-blob" aria-hidden="true" style={{ position: 'absolute', top: -60, left: -40, width: 220, height: 220, borderRadius: '50%', background: 'rgba(249,233,0,0.12)' }}></div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(30px,4.5vw,48px)', color: '#fff', margin: 0, letterSpacing: '-0.02em', position: 'relative' }}>Have a project in mind?</h2>
        <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.85)', margin: '16px auto 30px', maxWidth: 520, lineHeight: 1.6, position: 'relative' }}>Let's turn it into something people remember. Tell me about your brand and goals — I'll reply within a day.</p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', position: 'relative' }}>
          <Button size="lg" variant="secondary" onClick={() => location.href = 'Contact.html'} style={{ background: '#fff', border: 'none' }}>Start a project</Button>
          <a href={'mailto:' + window.SITE.email} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, height: 60, padding: '0 28px', borderRadius: 16, color: '#fff', border: '1px solid rgba(255,255,255,0.4)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 18 }}><i data-lucide="mail" style={{ width: 18, height: 18 }}></i>{window.SITE.email}</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- App ---------------- */
function App() {
  useReveal();
  React.useEffect(() => { window.refreshIcons(); });
  return (
    <React.Fragment>
      <Nav active="home" />
      <main>
        <Hero />
        <Tools />
        <AboutTeaser />
        <Skills />
        <Services />
        <Testimonials />
        <FAQSection />
        <CTAStrip />
      </main>
      <Footer />
    </React.Fragment>
  );
}

/* parallax hook */
function useParallax() {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let raf = null;
    const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { setY(window.scrollY); raf = null; }); };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}
window.useParallax = useParallax;

ReactDOM.createRoot(document.getElementById('root')).render(<App />);