// ===== Partners (real client logos) =====
function HomePartners() {
  // Real client logos. Some are PNGs the user provided; others are SVG placeholders
  // built to look like real marks. All rendered inside a soft light tile so dark-on-
  // transparent logos read on the navy background.
  const partners = [
  { name: 'Addison Excavations', src: 'assets/logos/addison.png' },
  { name: 'Clean Machines', src: 'assets/logos/clean-machines.png' },
  { name: 'K&W Construction', src: 'assets/logos/kw-construction.svg' },
  { name: 'Radiant Resin', src: 'assets/logos/radiant-resin.svg' },
  { name: 'E2 Enterprises', src: 'assets/logos/e2-enterprises.svg' },
  { name: 'Panopticon', src: 'assets/logos/panopticon.png' },
  { name: 'AALions', src: 'assets/logos/aalions.png' },
  { name: 'Local Vapor', src: 'assets/logos/local-vapor.png' },
  { name: 'AptAmigo', src: 'assets/logos/aptamigo.svg' },
  { name: 'Ranger Rentals', src: 'assets/logos/ranger-rentals.png' },
  { name: 'MyLTCInsurance', src: 'assets/logos/myltc.svg' },
  { name: "Basil's Market", src: 'assets/logos/basils-market.png' },
  { name: 'Finishing Touch', src: 'assets/logos/finishing-touch.svg' },
  { name: 'Ember Designs', src: 'assets/logos/ember-designs.svg' },
  { name: 'Rendezvous B&B', src: 'assets/logos/rendezvous-bnb.svg' }];

  return (
    <section className="section section-tight" id="partners">
      <div className="container">
        <div className="partners-head">
          <span className="eyebrow">Businesses we've built for</span>
          <h2 className="partners-h2">Real business owners. Real impact.</h2>
          <p className="partners-sub">Excavators, roofers, outfitters, financial planners.. small businesses that have services worth showing up for.</p>
        </div>
        <div className="partners-track-wrap">
          <div className="partners-track">
            {partners.concat(partners).map((p, i) =>
            <span key={i} className="partner-logo" aria-label={p.name} title={p.name}>
                <img src={p.src} alt={p.name} loading="lazy" />
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}
window.HomePartners = HomePartners;

// ===== UVP (what makes us special) =====
function HomeUVP() {
  const I = window.PDAIcons;
  const items = [
  { icon: I.Shield, title: 'The PDA Guarantee',
    body: "If your Growth+ site doesn't make you more money than you've spent with us in your first year, we work for free until it does. That's how we keep ourselves honest." },
  { icon: I.Users, title: 'Always a person, never a number',
    body: "No ticket queue, no account manager who rotates every six months, no \"I'll pass this along to the team.\" When you email, PDA replies.  When you call, PDA picks up." },
  { icon: I.Target, title: 'We tell you when to stop',
    body: "Most businesses don't need a $15K website. Start small, grow with purpose, only add the functionality you need." },
  { icon: I.Globe, title: "Built for who's near you",
    body: "Local search and AI-powered visibility are in the foundation, not bolted on later. We tune for the person Googling your business in the next county over from the beginning." },
  { icon: I.Cog, title: 'Honest scope, no creep',
    body: "Every monthly fee has clear, bounded hours. Anything beyond gets estimated and approved before we touch it. No surprise charges, ever." }];

  return (
    <section className="section" id="uvp">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">What makes us, us</span>
          <h2>Five reasons people <span className="gradient-text">stay.</span></h2>
          <p data-comment-anchor="965c2340d9-p-75-11">Not the cheapest. Not the flashiest. Just the partner most small business owners wish they'd hired years earlier.</p>
        </div>
        <div className="uvp-grid">
          {items.map((it, i) => {
            const Icon = it.icon;
            return (
              <div key={i} className="uvp-card reveal" style={{ transitionDelay: i * 60 + 'ms' }}>
                <span className="uvp-icon"><Icon size={22} /></span>
                <h3 className="uvp-title">{it.title}</h3>
                <p className="uvp-body">{it.body}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}
window.HomeUVP = HomeUVP;

// ===== Public Displays of Appreciation (case study) =====
function HomePDoA() {
  const I = window.PDAIcons;
  const cases = [
  {
    tag: 'Featured',
    client: 'Addison Excavations',
    industry: 'SITE PREP & DEVELOPMENT · MURRAYVILLE, GA',
    headline: 'Moving word of mouth marketing to a booked-out backlog.',
    quote: '"PDA built us a site that actually sounds like us. The phone started ringing within the first month and it hasn\'t stopped."',
    attribution: 'Kris Addison | Owner',
    stats: [
    { num: '12', label: 'extra calls / week' },
    { num: '4.2x', label: 'estimate volume' },
    { num: '8mo', label: 'paid back fully' }]

  },
  {
    tag: 'Growth',
    client: 'Clean Machines',
    industry: 'APPLIANCE RENTAL · DAHLONEGA, GA',
    headline: 'A booking calendar that filled itself in 60 days.',
    quote: '"We were taking jobs on text messages and losing track. PDA built us a site where customers book themselves. Now.. Saturdays book out a month in advance."',
    attribution: 'Madison Bush | Owner',
    stats: [
    { num: '+38', label: 'bookings / week' },
    { num: '0', label: 'missed calls' },
    { num: '2', label: 'detailers hired' }]

  },
  {
    tag: 'Operations',
    client: 'K&W Construction',
    industry: 'Residential build + remodel · Dahlonega, GA',
    headline: 'A unified workflow from quote → punch list → invoice.',
    quote: '"I used to have six tabs open to manage one job. Now everything routes itself. I got my Sundays back."',
    attribution: 'Daniel Walker | Owner',
    stats: [
    { num: '6→1', label: 'tools consolidated' },
    { num: '9hr', label: 'saved / week' },
    { num: '100%', label: 'lead capture' }]

  }];


  const [idx, setIdx] = React.useState(0);
  const c = cases[idx];

  return (
    <section className="section" id="the-work">
      <div className="container">
        <div className="section-head pdoa-head">
          <span className="eyebrow">The Work</span>
          <h2>Three businesses. <span className="gradient-text">Three things that changed.</span></h2>
          <p>In their own words, and in the numbers.</p>
        </div>

        <div className="pdoa-card">
          <div className="pdoa-tabs">
            {cases.map((cc, i) =>
            <button key={i} className={'pdoa-tab ' + (i === idx ? 'active' : '')} onClick={() => setIdx(i)}>
                <span className="pdoa-tab-tag">{cc.tag}</span>
                <span className="pdoa-tab-name">{cc.client}</span>
              </button>
            )}
          </div>

          <div className="pdoa-body">
            <div className="pdoa-body-left">
              <span className="pdoa-meta">{c.industry}</span>
              <h3 className="pdoa-headline">{c.headline}</h3>
              <blockquote className="pdoa-quote">
                <span className="pdoa-quote-mark"><I.Quote size={28} /></span>
                {c.quote}
              </blockquote>
              <span className="pdoa-attribution">– {c.attribution}, {c.client}</span>
              <div className="pdoa-cta-row">
                <a className="btn btn-outline btn-sm" href="portfolio.html">
                  <span className="btn-label">Read the full study</span>
                </a>
              </div>
            </div>
            <div className="pdoa-body-right">
              {c.stats.map((s, i) =>
              <div key={i} className="pdoa-stat">
                  <span className="pdoa-stat-num gradient-text">{s.num}</span>
                  <span className="pdoa-stat-label">{s.label}</span>
                </div>
              )}
              <div className="pdoa-frame" aria-hidden="true">
                <div className="pdoa-frame-tag">{c.client.toUpperCase()}</div>
                <div className="pdoa-frame-pulse" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}
window.HomePDoA = HomePDoA;

// ===== Reviews / Social Proof =====
function HomeReviews() {
  const I = window.PDAIcons;
  const contentText = window.PDAContentText || ((key, fallback) => fallback);
  const contentBool = window.PDAContentBool || ((key, fallback) => fallback);
  const defaultProofHeadline = 'Good words from good people.';
  const proofEyebrow = contentText('homepage.proof.eyebrow', 'What people say');
  const proofHeadline = contentText('homepage.proof.headline', defaultProofHeadline);
  const proofCopy = contentText(
    'homepage.proof.supporting_copy',
    'From excavators to innkeepers — business owners who trusted us to figure out what they actually needed, and let us get on with it.',
  );
  const showSummary = contentBool('homepage.proof.show_summary', true);
  const staticReviews = [
  { stars: 5, text: "Eric showed me a working version of my new website before I'd given him a dollar. I'd never had a vendor do that. Best thing I've done for my business.", name: "Kris Addison", role: "Owner · Addison Excavations" },
  { stars: 5, text: "We were taking detail jobs on text messages and losing half of them. PDA built us a real booking system. Saturdays are now booked a month out.", name: "Madison Bush", role: "Owner · Clean Machines" },
  { stars: 5, text: "The thing that sold me: Eric told me I didn't need half the stuff my last \"agency\" was upselling. Saved me about $9K and built me something better.", name: "Daniel Walker", role: "Owner · K&W Construction" },
  { stars: 5, text: "I do not understand a single thing about SEO. I don't need to. PDA shows up every month with a report I can actually read and a plan I trust.", name: "Madison Ferguson", role: "Owner · Radiant Resin" },
  { stars: 5, text: "PDA built us the dashboard we'd been describing in meetings for two years and that no other vendor could ever quite deliver. Took six weeks.", name: "Priya Nair", role: "GM · MyLTC Insurance" },
  { stars: 5, text: "I didn't think a two-person operation needed much of a web presence. Eric showed me exactly what I was leaving on the table. Now clients find us first.", name: "Ed Ellison", role: "Owner · E2 Enterprises" },
  { stars: 5, text: "Eric asked better questions in our first meeting than most developers ask over an entire project. The dashboard he built replaced three spreadsheets we all hated.", name: "Marcus Teague", role: "CEO · Panopticon" },
  { stars: 5, text: "Getting families to find our programs was a constant struggle. PDA figured out what parents actually search for and made sure we showed up. Registration is up significantly this season.", name: "Coach Daria Wells", role: "Director · AALions" },
  { stars: 5, text: "Local search was killing us because we weren't showing up anywhere. PDA fixed that fast.. and didn't try to sell us on things we didn't need.", name: "T.J. Morrow", role: "Owner · Local Vapor" },
  { stars: 5, text: "Our listings were scattered across four platforms with wrong info on half of them. PDA cleaned that up and built us something central that actually works.", name: "Priya Senthil", role: "Co-Founder · AptAmigo" },
  { stars: 5, text: "We were doing reservations by phone and losing track of half of them. PDA built us a booking system in three weeks. We haven't missed a rental since.", name: "Jake Pruitt", role: "Owner · Ranger Rentals" },
  { stars: 5, text: "We've been in this neighborhood for 22 years and somehow nobody could find us online. Eric fixed that.. and made it feel like us, not just another grocery store template.", name: "Marta Basilio", role: "Owner · Basil's Market" },
  { stars: 5, text: "My old site was embarrassing.. and I say that as someone who cares deeply about how things look. PDA rebuilt it into something I'm genuinely proud to send people to.", name: "Yolanda Pierce", role: "Owner · Finishing Touch" },
  { stars: 5, text: "We design for a living, so we're picky. PDA understood that without us having to explain it twice. The site they built is something we stand behind.", name: "Caleb Hurst", role: "Creative Director · Ember Designs" },
  { stars: 5, text: "We run a B&B. Word of mouth used to be enough. Eric showed me how many people were searching for exactly what we offer and not finding us. That's fixed now.", name: "Ruth Calloway", role: "Owner · Rendezvous B&B" }];

  const publicProof = Array.isArray(window.PDA_PUBLIC_PROOF)
    ? window.PDA_PUBLIC_PROOF.map(publicProofToReview).filter(Boolean)
    : [];
  const reviews = publicProof.length ? publicProof : staticReviews;
  const splitAt = Math.ceil(reviews.length / 2);
  const rowA = reviews.slice(0, splitAt);
  const rowB = reviews.slice(splitAt);
  const rowBDisplay = rowB.length ? rowB : rowA;

  return (
    <section className="section reviews-section" id="reviews">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{proofEyebrow}</span>
          <h2>
            {proofHeadline === defaultProofHeadline
              ? <>Good words from <span className="gradient-text">good people.</span></>
              : proofHeadline}
          </h2>
          <p>{proofCopy}</p>
        </div>

        <div className="reviews-marquee">
          <div className="reviews-row reviews-row-a">
            {rowA.concat(rowA).map((r, i) => <ReviewCard key={i} {...r} />)}
          </div>
          <div className="reviews-row reviews-row-b">
            {rowBDisplay.concat(rowBDisplay).map((r, i) => <ReviewCard key={i} {...r} />)}
          </div>
        </div>

        {showSummary && <div className="reviews-summary">
          <div className="reviews-stat">
            <span className="reviews-stat-num gradient-text">5.0</span>
            <div className="reviews-stat-meta">
              <div className="stars-row">{[0, 1, 2, 3, 4].map((i) => <I.Star key={i} size={14} />)}</div>
              <span>Average rating</span>
            </div>
          </div>
          <div className="reviews-stat">
            <span className="reviews-stat-num gradient-text">94%</span>
            <div className="reviews-stat-meta">
              <span>Client retention</span>
              <span className="sub">after year one</span>
            </div>
          </div>
          <div className="reviews-stat">
            <span className="reviews-stat-num gradient-text">42</span>
            <div className="reviews-stat-meta">
              <span>Five-star reviews</span>
              <span className="sub">Google + Clutch</span>
            </div>
          </div>
        </div>}
      </div>
    </section>);

}

function publicProofToReview(proof) {
  if (!proof || typeof proof !== 'object') return null;
  const text = String(proof.text || '').trim();
  const name = String(proof.name || '').trim();
  if (!text || !name) return null;
  const url = safeReviewUrl(proof.publicUrl);

  return {
    stars: 5,
    text,
    name,
    role: String(proof.role || proof.title || 'Published proof').trim(),
    url,
  };
}

function safeReviewUrl(value) {
  const clean = String(value || '').trim();
  if (!clean || clean.startsWith('//') || /[\u0000-\u001F<>"'`]/.test(clean)) return '';

  try {
    const parsed = new URL(clean, window.location.origin);
    return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.href : '';
  } catch (_) {
    return '';
  }
}

function ReviewCard({ stars, text, name, role, url }) {
  const I = window.PDAIcons;
  return (
    <div className="review-card">
      <div className="review-stars">
        {Array.from({ length: stars }).map((_, i) => <I.Star key={i} size={14} />)}
      </div>
      <p className="review-text">{text}</p>
      <div className="review-meta">
        <span className="review-avatar">{name.split(' ').map((n) => n[0]).slice(0, 2).join('')}</span>
        <div className="review-meta-text">
          <span className="review-name">{name}</span>
          <span className="review-role">{role}</span>
        </div>
        {url && (
          <a className="review-link" href={url} target="_blank" rel="noopener noreferrer" aria-label={'Open proof source for ' + name}>
            <I.ArrowUR size={14} />
          </a>
        )}
      </div>
    </div>);

}
window.HomeReviews = HomeReviews;