// shared.jsx — small helpers reused by all three home directions

const PROJECTS = [
  { id: 'beautygrass', name: 'Beautygrass', kind: 'Skincare e-commerce', platform: 'Shopify', year: '2024', img: 'img/beautygrass-skincare-ritual-hero-section.jpg', tag: 'beauty / dtc', alt: 'Beautygrass skincare Shopify store homepage featuring collagen face mist product collection' },
  { id: 'paynewestwood', name: 'Payne Westwood', kind: 'Marketing consultancy', platform: 'Squarespace', year: '2026', img: 'img/paynewestwood-laptop-mockup.jpg', tag: 'b2b / strategy', alt: 'Payne Westwood marketing consultancy Squarespace website with strategy-focused homepage hero' },
  { id: 'urbanworld', name: 'Urban World', kind: 'Architecture festival website', platform: 'Squarespace', year: '2025', img: 'img/urbanworld-architecture-festival-homepage.jpg', tag: 'events / culture', alt: 'Urban World architecture and culture festival website homepage showcasing events and submissions' },
  { id: 'urbanatlantic', name: 'Urban Atlantic', kind: 'Real estate development', platform: 'Squarespace', year: '2025', img: 'img/urbanatlantic-real-estate-development-homepage.jpg', tag: 'real estate / development', alt: 'Urban Atlantic real estate development company Squarespace website homepage' },
  { id: 'dispersive', name: 'Dispersive Networks', kind: 'Network security platform', platform: 'Squarespace', year: '2024', img: 'img/dispersive-networks-ultra-secure-homepage.jpg', tag: 'b2b / technology', alt: 'Dispersive Networks ultra-secure network security B2B platform homepage design' },
  { id: 'digitalspark', name: 'Digital Spark Weddings', kind: 'Wedding photography', platform: 'Squarespace', year: '2024', img: 'img/digitalspark-weddings-photography-homepage.jpg', tag: 'photography / lifestyle', alt: 'Digital Spark Weddings photography portfolio Squarespace website with gallery homepage' },
  { id: 'teachplaylearn', name: 'Teach Play Learn', kind: 'Education platform', platform: 'Squarespace', year: '2023', img: 'img/teachplaylearn-educational-platform-homepage.jpg', tag: 'education / saas', alt: 'Teach Play Learn educational platform homepage showing courses and learning resources' },
  { id: 'wearesantamonica', name: 'We Are Santa Monica', kind: 'Government/nonprofit initiative', platform: 'Custom CMS', year: '2022', img: 'img/wearesantamonica-laptop-mockup.jpg', tag: 'nonprofit / government', alt: 'We Are Santa Monica nonprofit government initiative website addressing community programs' },
  { id: 'greenandred', name: 'Green and Red Vineyard', kind: 'Winery/wine club', platform: 'Squarespace', year: '2023', img: 'img/greenandred-vineyard-wine-homepage.jpg', tag: 'wine / lifestyle', alt: 'Green and Red Vineyard winery website homepage featuring wine club and tasting room' },
  { id: 'leolawellness', name: 'Leola Wellness', kind: 'Wellness coaching', platform: 'Squarespace', year: '2023', img: 'img/leolawellness-coaching-homepage-hero.jpg', tag: 'wellness / coaching', alt: 'Leola Wellness coaching website homepage with calming hero section and service overview' },
  { id: 'oldsuffolkpunch', name: 'Old Suffolk Punch', kind: 'Pub/restaurant', platform: 'Squarespace', year: '2022', img: 'img/oldsuffolkpunch-pub-restaurant-homepage.jpg', tag: 'food / hospitality', alt: 'Old Suffolk Punch pub and restaurant Squarespace website with menu and booking features' },
  { id: 'sixtychapel', name: 'Sixty Chapel', kind: 'Wedding venue + events', platform: 'Squarespace', year: '2026', img: 'img/sixtychapel-wedding-venue-website-hero.jpg', tag: 'events / hospitality', alt: 'Sixty Chapel wedding venue website hero showcasing elegant event space and booking' },
  { id: 'creative-breed', name: 'Creative Breed', kind: 'Studio site', platform: 'Squarespace', year: '2024', img: 'img/creative-breed-empathy-storytelling-blog.jpg', tag: 'studio / branding', alt: 'Creative Breed studio and branding agency Squarespace portfolio website' },
  { id: 'ember', name: 'Ember & Beam', kind: 'Home goods shop', platform: 'Shopify', year: '2024', img: 'img/ember-and-beam-coconut-wax-candle-collection.jpg', tag: 'lifestyle / dtc', alt: 'Ember and Beam home goods Shopify store featuring candles and lifestyle products' },
  { id: 'edupreneurs', name: 'Edupreneurs', kind: 'Membership platform', platform: 'Squarespace', year: '2024', img: 'img/edupreneurs-entrepreneur-network-homepage.jpg', tag: 'education / b2b', alt: 'Edupreneurs membership and course creator community platform built on Squarespace' },
  { id: 'powerofyou', name: 'Power of YOU', kind: 'Life coaching practice', platform: 'Squarespace', year: '2024', img: 'img/powerofyou-life-coaching-hero.jpg', tag: 'wellness / b2c', alt: 'Power of YOU life coaching practice website with booking and program overview' },
  { id: 'lacausa', name: 'Lacausa', kind: 'Apparel brand', platform: 'Shopify', year: '2023', img: 'img/lacausa-laptop-mockup.jpg', tag: 'fashion / dtc', alt: 'Lacausa sustainable apparel brand Shopify store with lookbook and product pages' },
  { id: 'parkcounty', name: 'Explore Park County', kind: 'Tourism board', platform: 'Squarespace', year: '2023', img: 'img/exploreparkcounty-tourism-homepage-hero.jpg', tag: 'tourism / non-profit', alt: 'Explore Park County tourism board website featuring outdoor activities and visitor guide' },
];

const SERVICES = [
  { n: '01', slug: 'squarespace', t: 'Custom Squarespace', d: 'Design & build on the platform I know best — fluid layouts, custom code, Commerce, scheduling, members.' },
  { n: '02', slug: 'shopify', t: 'Custom Shopify', d: 'Themes that don’t look like themes. Storefront polish, product pages that convert, careful migrations.' },
  { n: '03', slug: 'wordpress', t: 'Custom WordPress', d: 'Block-theme builds and Elementor sites. Ownership, flexibility, and a CMS your team won’t fight.' },
  { n: '04', slug: 'webflow', t: 'Custom Webflow', d: 'Motion-rich, pixel-precise builds for studios and brands who want total design control and beautiful interactions.' },
  { n: '05', slug: 'apps', t: 'Apps, mobile & native', d: 'Yes — native iOS & Android, cross-platform React Native, and installable web apps, shipped end to end.' },
  { n: '06', slug: 'brand', t: 'Brand & visual identity', d: 'Logo, type system, color, and the small details that make a brand actually feel like one.' },
  { n: '07', slug: 'redesign', t: 'Redesigns & refreshes', d: 'Keep what’s working, fix what isn’t. Often the highest-leverage thing a small business can do.' },
  { n: '08', slug: 'seo', t: 'SEO setup & optimization', d: 'Real-world technical SEO, content structure, and the boring metadata work that quietly compounds.' },
  { n: '09', slug: 'migrations', t: 'Platform migrations', d: 'Wix → Squarespace, Squarespace → Shopify, anything → Webflow. URL maps, redirects, no traffic loss.' },
  { n: '10', slug: 'support', t: 'Ongoing support', d: 'A monthly retainer for tweaks, updates, page launches, and that one thing you keep meaning to fix.' },
];

const TESTIMONIALS = [
  { q: 'Maia made the whole process feel weirdly easy. We launched in three weeks and the site still looks better than anything we briefed her on.', who: 'Sasha L.', role: 'Founder, Ember & Beam' },
  { q: 'She thinks like a designer, codes like a developer, and replies to emails faster than my project manager. Hire her, then hire her again.', who: 'Theo R.', role: 'Creative Director, Creative Breed' },
  { q: 'Our Shopify migration was supposed to take two months. Maia did it in five weeks and we didn’t lose a single product or order in the cutover.', who: 'Priya M.', role: 'Owner, Beautygrass' },
  { q: 'Maia captured the exact vibe I was going for — warm, professional, approachable. She took my vision and made it even better. Booking calls has never been easier.', who: 'Diane M.', role: 'Founder, Power of YOU' },
  { q: 'The Payne Westwood site does exactly what we needed: it explains what we do in a way that makes sense to business owners who don\'t speak marketing. Inquiry volume jumped immediately.', who: 'Payne W.', role: 'Founder, Payne Westwood' },
];

const PROCESS = [
  { n: '01', t: 'Get acquainted', d: 'A 30-minute call. You tell me what you need, I tell you whether I’m the right fit. No pitch deck.' },
  { n: '02', t: 'Map it out', d: 'Sitemap, content plan, references, and a fixed-price proposal. Everything on one page.' },
  { n: '03', t: 'Design in the open', d: 'Live in-platform mockups instead of static Figma. You can click around the actual site as it grows.' },
  { n: '04', t: 'Build & polish', d: 'Real content, real animations, real responsiveness. Two rounds of revisions and a launch checklist.' },
  { n: '05', t: 'Hand it over', d: 'A Loom walkthrough, a written manual, and 30 days of free post-launch support. You own everything.' },
];

const PLATFORMS = [
  { n: 'Squarespace', dot: '#7a8a55' },
  { n: 'Shopify',     dot: '#c98455' },
  { n: 'WordPress',   dot: '#2b3a2a' },
  { n: 'Webflow',     dot: '#4353ff' },
];

// Striped placeholder when an image isn't available — kept for safety.
function Placeholder({ label, w='100%', h='100%', stripeA='#d9d4c2', stripeB='#cfc8b3' }) {
  const bg = `repeating-linear-gradient(135deg, ${stripeA} 0 12px, ${stripeB} 12px 24px)`;
  return (
    <div style={{ width:w, height:h, background:bg, display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:'rgba(0,0,0,.5)', letterSpacing:'.08em', textTransform:'uppercase' }}>
      {label}
    </div>
  );
}

// A tiny rotating signet that all three directions reuse for personality.
function Signet({ size=120, color='#2b3a2a', textColor='#ecead8', text='Maia Hariton • Web design & dev • ', center='✿' }) {
  const r = size/2;
  // Build a wavy/scalloped outer edge so it reads as a hand-cut paper stamp, not a flat coin.
  const petals = 28;
  const outer = r;
  const inner = r * 0.94;
  const points = [];
  for (let i = 0; i < petals * 2; i++) {
    const a = (i / (petals * 2)) * Math.PI * 2;
    const rad = i % 2 === 0 ? outer : inner;
    points.push([r + Math.cos(a) * rad, r + Math.sin(a) * rad]);
  }
  const scallop = 'M ' + points.map(([x,y]) => x.toFixed(2)+','+y.toFixed(2)).join(' L ') + ' Z';
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} style={{ display:'block' }}>
      <defs>
        <path id={`sig-${size}`} d={`M ${r}, ${r} m -${r-16}, 0 a ${r-16},${r-16} 0 1,1 ${(r-16)*2},0 a ${r-16},${r-16} 0 1,1 -${(r-16)*2},0`} />
      </defs>
      <path d={scallop} fill={color} />
      <circle cx={r} cy={r} r={r-7} fill="none" stroke={textColor} strokeOpacity=".55" strokeWidth="1" strokeDasharray="2 3" />
      <text fontFamily="'JetBrains Mono', monospace" fontSize={size*0.085} fill={textColor} letterSpacing="2.4" fontWeight="600">
        <textPath href={`#sig-${size}`}>{text + text}</textPath>
      </text>
      <text x={r} y={r+size*0.10} textAnchor="middle" fontFamily="'Instrument Serif', serif" fontSize={size*0.32} fill={textColor}>{center}</text>
    </svg>
  );
}

Object.assign(window, { PROJECTS, SERVICES, TESTIMONIALS, PROCESS, PLATFORMS, Placeholder, Signet });
